在頁面上存儲HTML模板的最佳實踐？

Question

我正在為我正在構建的網站開發一個相當繁重的JavaScript接口，我決定使用（最近制作的官方） jQuery模板插件從我的查詢生成我的元素到JSON API。 現在，我目前遇到的問題是：

我很容易有一堆這些模板。 一種用於每種對象，一種用於列表，一些用於頁面的部分，等等。是否有任何存儲這些模板的首選方式？ 我已經閱讀過使用模板名稱定義帶有id的<script>標簽，然后從那里檢索文本（正如John Resig在“ JavaScript Micro-Templating ”中描述的那樣），但是有一堆<script>標簽在每一頁看起來有點hackish。

所以，問題是：對於這種情況，有沒有“最佳實踐”？

Answer 1

為什么不直接將模板加載到隱藏元素中，然后使用$(template).clone() ？ 這節省了許多逃避的頭痛。 我無法談論.clone()與<script>方法的性能，但我可以告訴你額外的腳本標簽是性能損失，通常只是使代碼混亂。

為什么？

• 即使你有一個時髦的逃避實用程序，仍然會犯錯誤，並且它們將更難以閱讀。 此外，如果您必須在團隊工作中工作，特別是如果人們啟動/滾動項目，可能不容易理解。

• 你可以創建一個指針對象，比如templates = {} ，然后使用jquery對象指針將它加載到你的可克隆元素，如下所示：

    templates = {}; templates.message = $("#templates .message"); templates.dialog = $("#templates .dialog"); 

現在，您只需要創建一個新模板：

var newDialog = templates.dialog.clone();

您可以創建一個包裝函數來接受params，然后使用newDialog.find("title").html(title), newDialog.find("message").html(message),等添加它們。

同樣，從性能角度來看，我不知道哪個更快，因為我現在沒有時間進行測試。 但是我知道在使用足夠大的代碼庫來處理需要模板時，使用認可的方法通常會更好......最終其他人不可避免地會參與其中，你需要解決的事情越多，你擁有的時間就越少做你自己的badass編碼。

性能的另一個重要方面是時間...如果遇到性能延遲，則應確保使用setTimeout分解冗長的可執行代碼塊。 它創建一個新的堆棧，讓瀏覽器在創建新堆棧之前繪制已處理的內容。 在處理性能問題（通常是最常見的性能問題，尤其是非編碼人員）時，這極大地有助於處理視覺延遲。 如果你想了解更多信息，請給我發消息，我會收集一些資源。 現在時間有限，在工作中撲滅火災。 :)

Answer 2

我最近完成了這個練習，雖然<script>標簽方法似乎有點hackish，但我接受了這個很好的解決方案並且選擇了我自己的版本（John Resigs版本顯然非常好，但是我自己很容易理解我的自己的腦版）

我的版本是基本模板，並使用##VALUE## form替換值替換

模板:(單項模板或行模板）

<script type="text/html" id="ItemTemplate">
<table>
  <tr>
    <td>##LABEL1##</td>
    <td>##VALUE1##</td>
  <tr>
</table>
</script>

內容構建功能：

function constructFromTemplate(content, values, appendTo) {
    var modifiedHtml = content;
    modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##');

    $.each(values, function (n, v) {
        modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v);
    });

    if (appendTo != null) 
    {
        $(appendTo).append(modifiedHtml);
        //initializePageElements();
    }

    return modifiedHtml;
}

用法

內容將從函數返回和/或您可以設置appendTo參數設置elementID以自動append內容。 （將null設置為不append ）

可替換值僅作為動態對象添加，其中object名稱是可替換項。

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);

注意：我已經注釋掉了//initializePageElements(); ，這用於初始化模板上的jQuery插件，樣式。

將內容插入DOM時，只有內聯樣式才有效

Answer 3

看看https://github.com/inspiraller/STQuery

STQuery使用與jquery相同的所有方法名稱，但它不是在dom上操作元素，而是直接在字符串上工作：

var strTemplate = '<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>';

var ST = STQuery(strTemplate);

ST.find('h1').html('Hello');
ST.find('.content').html('World!');

var strTemplateUpdated = ST.html();

這使邏輯與模板分離，即不顯眼的html模板。

與jquery相比，優點是STQuery不必首先寫入DOM，這意味着您可以使用Web worker或在服務器上執行所有模板操作。 注意：在此消息中，stquery僅使用javascript編寫，因此需要轉換為所選的服務器端語言。

Answer 4

在過去的一年里，我嘗試了許多不同的技術，我同意script技巧有點不對，但我認為這是我們最好的。

頁面加載時需要存在的任何模板都必須是DOM的一部分。 任何將它們存放在地方並裝載它們的嘗試都會產生明顯的滯后。

我編寫了一些模板助手，允許我在頁面上插入必要的模板，同時仍然可以在需要時通過AJAX延遲加載它們。 我將頁面上的所有模板加載到頁面加載的變量中，這使得引用更容易一些。

我當然希望聽到其他人如何處理這個問題。

Answer 5

我用我的框架jquery純html模板成功使用了腳本

關於最佳實踐，請查看twitter的新界面，使用一個頁面查看所有內容，並僅通過“＃！/ paths”在內部進行路由。

使用單頁網站接縫是Web應用程序的下一個重要步驟，我個人稱之為web 3.0 :)它還將消除在每個頁面上擁有所有相同模板的問題 - 您將只有一個頁面。

Answer 6

在asp.net mvc中，我經常在部分視圖中打包我的常用模板，我可以在其中包含我需要它的地方。 這樣我就不需要在整個地方重復我的模板了。

另一種方法是將模板放在單獨的文件中。 與newslist.tmpl.html一樣，它允許您使用ajax加載模板。 考慮到這可以與數據加載並行完成，它不應該減慢您的應用程序速度，因為它最有可能比數據調用更快。