任何返回 DOM 片段的 JavaScript 模板库/系统/引擎/技术？

Question

我必须制作一个高速 Web 应用程序，并且需要一个 JavaScript 模板库/系统/引擎/技术来返回 DOM 片段而不是包含 HTML 的字符串。

当然，它应该有一些类似的语言 Resig 的微模板

我期待类似的东西编译后：

function myTemplate(dataToRender){
    var fragment = document.createDocumentFragment();
    fragment = fragment.appendChild(document.createElement('h1'));
    fragment.appendChild(document.createTextNode(dataToRender.title));
    fragment = fragment.parentNode;
    fragment = fragment.appendChild(document.createElement('h2'));
    fragment.appendChild(document.createTextNode(dataToRender.subTitle));
    fragment = fragment.parentNode;
    return fragment;
}

有什么选择吗？

编辑：模板函数不应连接 HTML 字符串。它会降低速度。 JQuery 模板在内部使用字符串。所以 Resig 的微模板。

Edit2：我刚刚在 jsPerf 上做了一个基准测试。这是我在 JavaScript 中做的第一个基准测试，所以有人检查一下（我不确定它是否正确）。

Answer 1

查看 jquery 模板。 http://api.jquery.com/category/plugins/templates/

让我们您可以使用“if”、“each”等关键字和未声明的变量创建 html 片段。然后，您可以使用一些值在 JavaScript 的片段上调用“tmpl”，并返回一个 DOM 元素。

Answer 2

我在 这个 jsFiddle 中尝试过这个。使用 DOM 方法时，替换一大块内容是最快的，但设置 innerHTML 并不会慢很多，如果您的模板不是很复杂并且不会在字符串中浪费太多时间，则可能是可以接受的操纵。 （这并不奇怪，“快速处理损坏的 HTML”是浏览器应该做的事情，而 innerHTML 是一个古老而流行的属性，可能对其进行了大量优化。）在innerHTML 方法中添加另一个join() 步骤也并没有真正减慢速度。

相反，在 Mac 上的 Chrome 中使用 jQuery.tmpl() 和 DOM 片段方法要慢几个数量级。要么我在 dom_tmpl 函数中做错了什么，要么深度克隆 DOM 节点本质上很慢。

我注释掉了附加测试，因为当您运行整个套件时，它们会冻结选项卡进程 - 数千个到数万个节点被推入文档中可能会以某种方式使 Chrome 感到困惑。单独使用innerHTML 进行附加最终会非常慢，因为字符串最终会变得非常大。

结论似乎是：除非愚蠢地完成或在非常大的字符串上完成，否则在模板库中连接字符串可能不会使其变慢，同时尝试巧妙地克隆块DOM 会的。另外，jQuery.tmpl() 在我的计算机上每秒处理 2000 次左右的操作，在我的 iPhone 4 上每秒处理 500 次左右的操作，如果您针对这些平台，这可能“足够快”。它也与 DOM 片段函数处于相同的范围，这使得后者基本上毫无意义。

如果您主要需要替换现有节点的内容并且您的模板不是很大，请使用 Underscore.js 的模板和 innerHTML。 Underscore.js 似乎对整个字符串进行了十次传递，因此如果您的模板/很大/这可能是一个问题。

如果需要附加到现有节点，可以通过创建包装器元素，设置其 innerHTML，然后将包装器元素附加到目标节点，从而避免序列化和重新解析现有内容。

如果您确实想要速度或者您的模板非常大，您可能需要执行一些操作，例如让服务器端脚本将模板预编译为 Javascript，以创建相应的节点。

（免责声明：我并不声称自己擅长构建测试用例和基准测试，并且仅在 WebKit 中对此进行了测试，您应该根据您的用例进行定制并获取一组更相关的数字。）

更新： 我更新了我的 jsFiddle 基准测试，不使用任何 jQuery 功能，以防其存在（用户数据节点等）是 DOM 节点克隆缓慢的原因。没有多大帮助。

Answer 3

我不知道这是否是您要寻找的内容，但是 Underscore.js 有一个模板实用程序< /a>.

另外，jquery 可以返回匹配元素的 DOM。

Answer 4

您可以创建代表页面区域的单个对象，甚至可以深入到单个元素级别，并且无需诉诸 DOM 脚本即可完成所有这些操作，因为 DOM 脚本会非常慢。例如：

function buttonFrag(data) {
    this.data = data;
}
buttonFrag.prototype = (function() {
    return {
        _html : function(h) {
            h.push("<h1>",data.title,"</h1>");
            h.push("<h2>",data.subTitle,"</h2>");
        },
        render : function(id) {
            var html = [];
            this._html(html);
            document.getElementById.innerHTML = html.join("");
        }
    }
})();

要实现这一点，您只需创建一个新对象，然后对页面上的 id 调用其渲染方法：

var titleFragObj = new titleFrag({title: "My Title",subTitle: "My Subtitle");
titleFragObj.render("someId");

当然，您可以对渲染方法更有创意，并使用 jQuery 之类的东西写入选择器，然后使用 .html 或 .append 方法，如下所示：

render : function(selectorString, bAppend) {
    var html = [];
    this._html(html);
    var htmlString = html.join("");
    var destContainer = $(selectorString);
    if (bAppend) {
        destContainer.append(htmlString);
    } else {
        destContainer.html(htmlString);
    }
}

在这种情况下，您只需提供一个选择器字符串以及是否要附加到容器的末尾，或完全替换其内容：

        titleFragObj.render("#someId",true);

您甚至可以这样做至于创建一个基础对象，您的所有片段源自，那么您要做的就是重写 _html 方法：

function baseFragement(data) {
        this.data = data;
    }
baseFragment.prototype = (function() {
    return {
        _html : function() {
            //stub
        },
        render : function(selectorString, bAppend) {
            var html = [];
            this._html(html);
            var htmlString = html.join("");
            var destContainer = $(selectorString);
            if (bAppend) {
                destContainer.append(htmlString);
            } else {
                destContainer.html(htmlString);
            }
        }
    };
})();

那么所有后代将看起来像这样：

function titleFrag(data) {
    baseFragment.call(this,data);
}
titleFrag.prototype = new baseFragment();
titleFrag.prototype._html = function() {
    h.push("<h1>",data.title,"</h1>");
    h.push("<h2>",data.subTitle,"</h2>");
}

您可以创建一个完整的小片段生成器库，这些片段生成器源自该公共基类。