如何優化在JavaScript字符串中使用的長html代碼的創建

我需要定義包含非常長的html代碼的javascript變量。如何優化在JavaScript字符串中使用的長html代碼的創建

下面是一個簡單的例子：由於HTML將是多長很多，我寧願在純HTML工作，而不是文本追加到一個JavaScript字符串

var text = "Select one item:<br>"; 
text += "<ul class='thumbnails'><li class='span3'><a href='#' class='thumbnail'><img src='http://placehold.it/260x180' alt=''></a></li></ul>";

。

我想創建一個單獨的html文件，但我想這將需要一個Ajax調用來獲取其內容。處理這個問題的最佳方法是什麼？

來源

2012-08-10 tucson

而不是在Javascript中以字符串的形式構建HTML，我寧願建議您在頁面本身發出這些html元素，並在加載時隱藏。然後在Javascript中，您可以選擇該容器並顯示它。

來源

2012-08-10 10:38:06 sundar

由於N.Zakas的「maintainable javascript」一書中說，你應該保持«HTML出的JavaScript»通過UI層的鬆散耦合，以促進代碼的高mantainability。

除了ajax解決方案，您還可以將標記作爲註釋放置在html文件中，並通過javascript（作爲常規DOM節點）讀取它，或者可以使用某種微型模擬系統（例如handlebars）並將您的標記在一個腳本塊（這個想法是把標記放在哪裏可以找到，而不是JavaScript邏輯）

來源

2012-08-10 10:38:55 fcalderan

一個可能的解決方案是使用模板。有幾個JavaScript庫提供模板，underscore.js是一個：http://underscorejs.org/#template，或更多關於如何將它用於模板的詳細信息http://www.headspring.com/blog/developer-deep-dive/an-underscore-templates-primer/

加下劃線對於其他許多事情來說都很棒。

來源

2012-08-10 10:39:17

您可以將文本分解爲實際的HTML對象。

var thumbnailsUL = document.createElement('ul'); 
for (index in {your-thumbnails-list}) { 
    var thumbnail = document.createElement('li'); 
    thumbnail.innerHTML = {whatever you need, more objects or html as text}; 
    thumbnailsUL.appendChild(thumbnail); 
}

理想情況下，沒有理由在JavaScript中構建這個 - 你能不能從服務器發出它嗎？

來源

2012-08-10 10:39:48

如何優化在JavaScript字符串中使用的長html代碼的創建

回答

相關問題