当前位置：文江博客话题详情

基于 DOM 树的 JavaScript 模板引擎

发布于 2025-01-05 06:59:49 字数 294 浏览 2 评论 0 原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赤濁 2025-01-12 06:59:49

透明度：

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

纯粹：

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

板

https://github.com /flatiron/plates

为什么全部这个：

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

回复收藏 0 原文

小红帽 2025-01-12 06:59:49

远端

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

回复收藏 0 原文

め七分饶幸 2025-01-12 06:59:49

soma-template 是一个新模板。

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

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

回复收藏 0 原文

挥剑断情 2025-01-12 06:59:49

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

回复收藏 0 原文

染年凉城似染瑾 2025-01-12 06:59:49

我最近受 PURE 和 Transparency 的启发创建了 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>

I've recently created DOM templating engine inspired by PURE and Transparency.

It supports loops, conditions and much more.

Take a look at doc: http://code.meta-platform.com/metajs/components/template/

Don't be affraid that MetaJS is big library, templating lib can be used standalone.

Short example:

HTML:

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

Define template:

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")
    })
});

Render template:

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
        }
    ]
});

Result:

<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>

回复收藏 0 原文

蹲墙角沉默 2025-01-12 06:59:49

查看 Monkberry DOM 模板引擎。

它非常小（压缩后只有 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

Take a look at Monkberry DOM template engine.

It is really small (just 1,5kB gzipped), dependency free library, server compiling, one-way data binding, and it's dramatically fast!

Here example of template and generated code:

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

Will generate:

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 supports if, for and custom tags. And has a lot of rendering optimizations.
Templates can be rendered on server with webpack, browserify or cli.

monkberry.js.org

回复收藏 0 原文

空气里的味道 2025-01-12 06:59:49

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

todo

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

dna.js is a templating engine that clones DOM elements (https://dnajs.org).

Example template for a book:

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

Call to insert a copy of the template into the DOM:

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

Resulting HTML:

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

Fiddle with a sample "To-Do Application":
https://jsfiddle.net/uLrc7kmp

todo

dna.js was created precisely to avoid constructing and passing around string templates (I'm the project maintainer).

回复收藏 0 原文

还给你自由 2025-01-12 06:59:49

具有超能力的免费 MIT 许可 jQuery DNA 模板（您可以重新申请将更改后的数据更改为相同的 HTML 结构，以在任何数据更改时更新 UI...)

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

回复收藏 0 原文

没有伤那来痛 2025-01-12 06:59:49

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