基于 DOM 树的 JavaScript 模板引擎

Question

我正在寻找一个新的 Javascript 模板引擎来替换旧的 jQuery 模板以满足我的客户端模板需求。

我更喜欢模板引擎处理 DOM 树而不是文本字符串，然后将熟字符串的内容转储到 innerHTML 的方法。这是更好的性能，我发现 DOM 操作更适合构建更多 DOM 树。

对于直接创建 DOM 树而不是基于文本的引擎的 Javascript 模板引擎，我有哪些选择？我喜欢 Mustache.js 的无逻辑方法，但它似乎只对字符串进行操作。原生 jQuery 集成也是一个不错的功能。

Answer 1

透明度：

https://github.com/leonidas/transparency/

纯：

http://beebole.com/pure/documentation/

盘子

https://github.com/flatiron/plates

为什么会这样：

http://blog.nodejitsu.com/micro-templates-are-dead

Answer 2

远端

http://code.google.com/p/distal

Answer 3

soma-template 是一个新的。

纯 DOM 操作，许多特性，自然语法，可与其他库完全扩展，例如 underscore.string，带参数的函数调用，帮助程序，观察程序。能够在需要时仅更新某些节点，DOM 本身内的模板。

http://soundstep.github.com/soma-template/

Answer 4

这是关于 7 个著名的 JS 模板引擎的很好的比较：http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

Answer 5

我最近创建了受 PURE 和透明度启发的 DOM 模板引擎。

它支持循环、条件等等。

查看文档：http://code.meta-platform.com/metajs/components/template/

别害怕 MetaJS 是大库，模板库可以独立使用。

简短示例：

HTML：

<div id="tpl">
    <ul id="tasks">
        <li>
            <span class="task"></span>
            <span class="due-date"></span>
        </li>
    </ul>
</div>

定义模板：

var tpl = Meta.Template(document.getElementById('tpl'), {
    "ul#tasks li": $__repeat("tasks", {
        ".task":        "task",
        ".due-date":    $__date("d. m. Y", "due_date"),
        "@":            $__attrIf("completed", "complete")
    })
});

渲染模板：

tpl({
    tasks: [
        {
            task: "Write concept",
            due_date: new Date(2015, 3, 22, 0, 0, 0, 0),
            complete: true
        }, {
            task: "Consult with customer",
            due_date: new Date(2015, 3, 25, 0, 0, 0, 0),
            complete: false
        }
    ]
});

结果：

<div id="tpl">

    <ul id="tasks">
        <li>
            <span class="task" completed>Write concept</span>
            <span class="due-date">22. 3. 2015</span>
        </li>
        <li>
            <span class="task">Consult with customer</span>
            <span class="due-date">25. 3. 2015</span>
        </li>
    </ul>

</div>

Answer 6

看看Monkberry DOM template engine。

它真的很小（压缩后只有 1.5kB）、无依赖库、服务器编译、单向数据绑定，而且速度非常快！

这里是模板和生成代码的例子：

<div>
  <h1>{{ title }}</h1>
  <p>
    {{ text }}
  </p>
</div>

将生成：

var div = document.createElement('div');
var h1 = document.createElement('h1');
var p = document.createElement('p');

div.appendChild(h1);
div.appendChild(p);

   ...

view.update = function (data) {
  h1.textContent = data.title;
  p.textContent = data.text;
};

Monkberry 支持if、for 和自定义标签。并且有很多渲染优化。 可以使用webpack、browserify 或cli 在服务器上呈现模板。

• monkberry.js.org

Answer 7

dna.js 是一个模板引擎，可以克隆 DOM 元素 (https://dnajs.org)。

一本书的示例模板：

<h1>Featured Books</h1>
<div id=book class=dna-template>
   <div>Title:  <span>{{title}}</span></div>
   <div>Author: <cite>{{author}}</cite></div>
</div>

调用以将模板的副本插入 DOM：

dna.clone('book', { title: 'The DOM', author: 'Jan' });

生成的 HTML：

<h1>Featured Books</h1>
<div class=book>
   <div>Title:  <span>The DOM</span></div>
   <div>Author: <cite>Jan</cite></div>
</div>

摆弄一个示例“待办事项应用程序”：
https://jsfiddle.net/uLrc7kmp

dna.js 的创建正是为了避免构建和传递字符串模板（我是 project 维护者）。

Answer 8

具有超能力的免费 MIT 许可 jQuery DNA Template（您可以将更改的数据重新应用到相同的 HTML 结构中，以便在任何数据更改时更新 UI...）

https://github.com/webdevelopers-eu/jquery-dna-template/

Answer 9

您要寻找哪种糖？原始 DOM api 对我来说总是很好用。如果您真的接受模板引擎在性能方面不好的想法，如果您想有效地构建 DOM 树，请不要使用 innerHTML。我倾向于做的只是使用 document.createElement 手动创建元素。我的模板是通过编写帮助函数创建的，这些函数创建节点集合并通过设置 .innerText 属性用数据填充它们。然后我可以缓存对我希望经常引用的节点的引用，这样我就不必遍历 DOM 树来再次找到这些节点。