在JavaScript中生成HTML與加載HTML文件

Question

目前，我正在創建一個完全由JS驅動的網站。 我根本不使用任何HTML頁面（索引頁面除外）。 每個查詢都返回JSON，然后我在JavaScript中生成HTML並插入DOM。 這樣做不是有創建帶有布局結構的HTML文件，然后將該文件加載到DOM並使用來自JSON的新數據更改元素的缺點嗎？

編輯：我所有的頁面都加載了AJAX調用。 但是我有一個這樣的結構：

<nav></nav>
<div id="content"></div>
<footer></footer>

基本上，我從不更改nav或footer元素，它們在加載index.html文件時僅加載一次。 然后在每個頁面上單擊，我向服務器發送一個AJAX調用，它以JSON返回數據，並使用jQuery生成HTML代碼，並插入$('#content').html(content);

創建單獨的HTML文件，然后使用$('#someID').html(newContent)更改帶有JSON數據的每個元素，將使用更多代碼，並且我需要向服務器發送1個以上的請求來加載此文件，因此我以為我可以在瀏覽器中生成它。

EDIT2：SEO不是很重要，因為我的網站需要登錄，所以我將在index.html文件中創建所有元標記。

Answer 1

通常，這是一種不錯的處理方式。 我假設您每次都使用AJAX更新頁面（盡管您沒有這么說）。

有一些事情要注意。 如果您始終使用相同的URL，那么您的用戶將無法返回同一頁面 。 而且他們無法將鏈接發送給他們的朋友。 為了解決這個問題，您可以使用history.pushState()來更新URL，而無需重新加載頁面。

另外，如果每頁發送多個請求，並且沒有等待它們的HTML結構，則每次都可能以不同的順序返回它們。 這不是問題，只是需要注意的事情。

從AJAX返回HTML是一個壞主意。 這意味着，當您想更改頁面的布局時，需要編輯所有文件。 如果要返回JSON，則在一處進行更改要容易得多。

Answer 2

絕對重要的一件事：

您需要花多長時間開發一個新系統，以JSON +代碼的形式發送數據，而JS需要將JS作為HTML注入頁面？

僅返回HTML需要多長時間？ 以及如果可以重用一些已經存在的服務器端代碼需要多長時間？

並檢查頁面的服務器端交互量是多少...

創建純HTML的一些優點：

1）它是簡單的標記，通常與JSON一樣緊湊或實際上更緊湊。

2）較少出錯，因為您得到的只是標記，而且沒有代碼。

3）在大多數情況下，編程將更快，因為您不必為客戶端單獨編寫代碼。

4）HTML是內容，JavaScript是行為。 完全沒有令人信服的理由混合使用這兩種方法。

用javascript或其他腳本語言編寫..如果您在其余代碼之間遇到問題，將無法正常工作

而且在純HTML頁面中調試也更容易

我的看法...在任何需要的地方使用scriptiong代碼..您可以在html中完成的其余代碼...它將節省前往服務器，然后獲取數據並再次顯示的行程時間。

編碼時請牢記第4點。

Answer 3

如果您關心SEO，則希望在頁面加載時顯示HTML，這比您的第二種策略更接近您的第二種策略。

2014年5月更新：Google聲稱在執行Javascript方面變得越來越出色： http ： //googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html仍然不清楚什么有效，什么無效。

其他更新可能在這里： Google或其他搜索引擎是否執行JavaScript？

Answer 4

我認為您可以考慮3種方法：

• 僅將JSON發送到客戶端並根據模板（即handlerbar.js）進行渲染

• 從服務器端創建頁面通常可以更快地渲染，您也可以緩存頁面。

• 或混合使用這些方法來從服務器生成部分視圖並將其發送給客戶端，例如，就像在客戶端上具有車把模板並應用JSON中的數據，而在服務器上僅具有相同模板，並以最終格式將其呈現在服務器上並將其發送給客戶端，在客戶端上，您只需替換部分視圖即可。

還有一些需要考慮的問題取決於應用程序的用例，這是如果您要定位SEO，則應考慮ColBeseder建議，如果您要定位移動用戶，則可能最好使用僅JSON響應，因為這是更輕量級的響應。

編輯：

根據您所說的，您正在創建一個單頁應用程序，如果這是正確的，則可能可以使用JSON或類似AngularJS的局部視圖。 但是，如果您編寫的服務器端邏輯僅用於處理JSON響應，則可能最好在客戶端上使用模板引擎，例如handlerbar.js ， underscore或jquery template ，並且可以定義HTML的可重用部分並將其應用於它來自JSON的數據。