當一個網絡應用程序生成大多數標記的JavaScript ...

Question

我已經看到了一個網頁應用程序，通過javascript + jquery生成大部分頁面的標記。服務器僅生成一個只有1個DIV的網頁。剩下的工作就是通過javascript + jquery + AJAX在客戶端創建。

這種以javascript爲中心的方法有哪些優缺點？

Answer 1

優點：

你得到了很多的靈活性，當您的整個前端是在JavaScript。一切都是動態生成的，並且按需加載數據更加容易。它還使得將元素綁定到數據更容易，這使得它們可以在服務器上發生更改時自動更新（無需用戶重新加載瀏覽器！）。查看Backbone.js或Knockout.js，瞭解構建大量JavaScript應用程序的有趣方法。

走這條路線還可以讓你的服務器保持非常輕的重量。通常，服務器只需實現一個簡單的RESTful/JSON接口。實際上，前端是一個單獨的靜態文件，它會調用您的界面。由於你是在用戶在網站上進行異步調用，它可以感覺更快，更像是本機應用程序（即GMail）

另一個好處是，讓客戶端做更多的工作可以經常減少服務器上的負載。客戶甚至不會注意到額外的工作，因爲它發生得如此之快，但您的服務器可能會讚賞節省。如果您對服務器調用很敏感，您還可能使用更少的帶寬。

缺點：

有些人已禁用JavaScript（雖然實際上它是用戶的百分之零點幾）。而且，在某些邊緣情況下，瀏覽器的交叉兼容性可能會更加困難（但jQuery使得這更容易）。最大的障礙是很多網絡爬蟲不會抓取您網站上的任何內容，因爲抓取工具通常不會執行JavaScript。他們只是解析HTML（谷歌可能是一個例外？）。

根據我在構建Web應用程序方面的經驗，任何面向公衆的內容（即營銷材料）都應該是靜態內容，以便網絡抓取工具能夠看到它。一旦用戶登錄到應用程序，我喜歡所有事情都是通過RESTful調用服務器的100％客戶端。

Answer 2

• 缺點：非常大的JavaScript文件
• 缺點：如果關閉JavaScript，您的網站不能正常工作
• 缺點：很難風格
• 缺點：大JavaScript文件返回給客戶端，可能更 代碼用不了
• 缺點：可能難以調試

，如果你的接口返回大名單，你是否也需要返回它並在JS中循環並構建控件並添加它們？

Answer 3

那麼，當你說「使用jquery + ajax從javascript生成」時，你並不完全清楚。這可能意味着平面HTML頁面正在被加載，而不是需要刷新瀏覽器。沒有正確或錯誤的方法來構建動態與靜態HTML;一切都必須在上下文中進行。

jquerymobile相當廣泛地使用這種技術。

Answer 4

服務器應該做大量的提升，因爲這就是它的原因。客戶的介入應該最小化。客戶端開發應該關注於增強用戶體驗，並確保在許多瀏覽器上很好地工作。它不應該是像重構DOM某種方式，通過數據對數據進行排序和過濾等任務 - 除非有令人信服的理由。

因此，在我的小見解中，在客戶端上卸載太多的表示邏輯可能是一個壞主意。

Answer 5

您對比

Server produces data (usually JSON) -> Client-side Java Script creates HTML 
Server produces data, server formats HTML -> Client renders HTML 

應用程序可以使用這些技術的某種組合，前者可以很容易地得到具有豐富的用戶體驗，動態更新頁面。您會注意到前者還會將更多工作分擔給客戶端（我認爲JSON比生成的HTML更加簡潔），因此從長遠來看，一旦JavaScript被下載並緩存，網絡帶寬就會減少。

以JavaScript爲中心的方法更加複雜，通常需要更多的努力來編寫。

Answer 6

始終致力於獨立的顧慮：

• 信息的標記在CSS
• 行爲
• 風格的Javascript

如果你開始在Javascript中單獨做的一切，你打破這種模式。到目前爲止，該模型對Web的工作非常有效。

也就是說，做使用JavaScript逐漸增強的網站。例如。如果您可以通過ajax顯示某些內容而不是頁面重新加載，那麼請繼續，但普通的頁面請求也應該可以工作。

查看github的存儲庫瀏覽器，獲取漸進式增強的一個很好的例子。如果您使用支持它的瀏覽器，它將通過ajax加載頁面，和更改地址欄中的網址以匹配。否則，它會完成它始終完成的任務，並且只需使用常規鏈接進入該頁面即可。所以那裏有javascript，並且做了一些很酷的技巧，但是沒有它，一切都能正常工作。