Question

我需要动态地将HTML附加到我的网络应用中。我不确定这是最好的资源有效方式。而不是每次手动追加，如：

$('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(); 如果我想从服务器替换一些值，我会：

for (var i = 0; i < data.length; i++) {

var clonedHtml = $(system.errorTemplate).clone();
clonedHttml.find('[data-find-this]').html('replace with this);

}

是否有效地将html动态添加到DOM中？还有其他更好的方法吗？

Answer 1

你尝试这种方式看起来不错。在性能方面，您可以问自己要优化的一些问题。

如果内容保持静态，意味着一遍又一遍地添加相同的dom，最好创建可以clone()并附加的文档片段，这样解析只需要进行一次

另一种方法是使用新的hmtl5 <template> link元素，这样浏览器就会为你创建DOM对象，解析加载时间。

为了呈现动态数据，方法类似，字符串解析越少，越快，但除了clone()之外，还需要一些代码将内容注入新节点。

最后但并非最不重要的是，还有像Handlebars或Moustache这样的框架，它们首先将每个模板编译为函数，期望数据对象呈现。

前面计算的越多，它就越快，但这可能需要更多的代码，而不是简单的搜索和替换。

最后，经验法则：修改dom元素»离线«，然后将它们附加到DOM，Document Fragments可以真正帮助你做到这一点。

创建模板以便将html模板附加到DOM中是否有效？

1 个答案: