是否有效的創建html模板添加到DOM模塊？

我需要將HTML動態添加到我的Web應用程序中。我不確定最好的資源有效的做法。是否有效的創建html模板添加到DOM模塊？

$('body).append('<div>[content here]</div>');

我創建了一個模塊作爲模板：而不是像手動每次追加

var settings = (function(){ 

var commonTemplate = '<body id="ckit">' 
         +'<div class="ckit-container">' 
          [code removed for brevity] 
         +'</div>' 
        +'</body>'; 


return { 

    templates: { 

     toolbar : '<div id="ckit" class="layout-compact is-hiddenx" data-ckit-compact style="">' 
         [code removed for brevity] 
       +'<div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>'+commonTemplate+'</div>', 

     loadingHtml: '<div class="ckit-preloader" data-loading>' 
         [code removed for brevity] 
         +'</div>', 


     createMessageForm: '<form action="" class="" data-create-message>'    
         [code removed for brevity] 
         +'</form>', 

     errorTemplate: '<div data-show-wrapper class="ckit-composer-files-wrapper">' 
        [code removed for brevity] 
        +'</div>', 
     }, 


}; 
})();

所以，如果我想的HTML顯示錯誤，我會打電話給system.errorTemplate(); 如果我想從服務器取代一些價值，我會：

它是動態地將html附加到DOM的有效方法嗎？還有其他更好的方法嗎？

來源

2016-10-07 112233

您嘗試這種方式看起來不錯。在性能方面，有一些問題可以讓你自己去優化。

如果內容保持靜態，意味着同一個dom會一遍又一遍地重複添加，最好是創建可以clone()並追加的文檔片段，這樣解析只需要完成一次。

另一種方法是使用新的hmtl5 <template>link元素，這種方式瀏覽器將爲您創建DOM對象，這些DOM對象將被解析爲加載時間。

要呈現動態數據，這些方法類似，字符串解析發生得越少，速度就越快，但是除了clone()之外，還需要一些代碼將內容注入到新節點中。

最後但並非最不重要的，還有框架，如Handlebars或Moustache，它首先編譯每個模板的功能，期望一個數據對象進行渲染。

未來計算得越多，速度越快，但這可能需要更多的代碼，而不是簡單的搜索和替換。

最後，經驗法則：修改dom元素»離線«，並將它們附加到DOM，Document Fragments真的可以幫助你做到這一點。

來源

2016-10-07 10:49:15 philipp

是否有效的創建html模板添加到DOM模塊？

回答

相關問題