js 模板引擎 - 超级强大

Posted 2020-07-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 模板引擎 - 超级强大相关的知识，希望对你有一定的参考价值。

前端模板引擎相信已经到达泛滥的地步了，随便就能找到一大把，但是真的深层次的对比才能发现其中的优劣，经过这段时间对各个模板引擎的使用分析，最终选定一款，也是目前我见过的最为强大的模板引擎：nodetpl

nodetpl 相比其它几款模板，有非常独特的地方：

1. 支持模板级样式，有效解决样式冲突问题，别的模板几乎都没能做到

2. 支持模板级js，同样，别的模板也不具备这功能

3. 支持 AMD / CMD，甚至 ES6

4. 支持所有js语法，上手容易，是团队开发不错的选型

5. 支持复杂的多模板

6. 强大的技术支持（作者特勤快，当天反馈问题几乎当天就能发布新版）

7. 性能超级牛叉，别信网上别的一些模板吹嘘的什么性能对比结果什么的，有的直接做个缓存然后拿来跟别的不缓存的比，当然牛逼了，通过分析 nodetpl 的原理发现，nodetpl 几乎不占性能！官网也给了说明，在有的模式下，直接都不需要引用 nodetpl 类库，就直接能跑起来！

8. 支持几乎所有浏览器，包括变态的IE6，还支持运行在 node 服务端（目前我司node项目已经在用，框架是express.js，模板引擎是nodetpl）

。。。。。。华丽分隔，不再多说，下面是拷自官网的部分内容。。。。。。

nodetpl 能运行在哪些平台？: PC浏览器端（包括 IE6+、Chrome、Safari、Firefox、Opera 等）、手机端浏览器、服务端 node.js，理论上讲，只要是支持 js 的地方，都能非常完美地运行起来。

nodetpl 的性能如何？: 经常听到有些人对模板引擎性能的担忧，由于 nodetpl 处理模板的机制做了非常细致的优化，经历过客户端及服务端高并发的考验，未编译的文件也能够非常高效地通过浏览器解析，编译后的模板文件更是性能超群，几乎不耗浏览器或服务端资源。

nodetpl 与业界其他模板引擎相比的优势是什么？: 学习成本、性能、多模板、模块化、ES6、node.js、样式沙箱、js 沙箱、预编译等等。

模板为什么要进行预编译？: 浏览器加载并解析模板是需要耗费一定资源的，而预编译是将模板代码直接编译成原生的 js 文件，从而浏览器可以直接识别，大大提高模板的执行性能。另外，预编译后的文件可以完美运行在 AMD/CMD、Node 等项目中。

如何通过 nodetpl.get 方法跨域获取远程模板文件？: tpl 或 html 模板文件是不允许跨域获取的，但是 js 文件可以，因此我们若希望在跨域的情况下使用 nodetpl，需要将模板文件进行预编译，然后再通过 nodetpl.get 或 require 等方法进行引用。

对于 AMD/CMD/CommonJs/ES6，nodetpl 能够给予非常完美的支持，作者推荐对模板进行预编译，这样能大大提高模板执行的效率。

引入模板非常方便，直接使用 “require” 引入对应的模板编译文件即可。假如模板文件为 ./tpls/myfavor.tpl，编译后的 js 文件为：./tpls/myfavor.js：

var tpl = require(‘./tpls/myfavor‘); // 同步引入模块：./tpls/myfavor.js
var html = tpl.render({
  title: ‘个人爱好‘
});
// html

不是必须的。

nodetpl 针对 AMD/CMD/CommonJs/ES6 进行了优化，编译后的文件可以直接使用，而不再依赖 nodetpl 库，所以你可以直接 require 对应的可执行文件即可，不需引用 nodetpl 核心模块。

若该模式下仍然希望异步调用模板，则仍然需要引入 nodetpl 核心文件，并通过 nodetpl.get 的方式调用：

var nodetpl = require(‘nodetpl‘);
nodetpl.get(‘./tpls/myfavor‘, { // 异步引入模块：./tpls/myfavor.js
  title: ‘个人爱好‘
}, function(d) {
  // d
});

对于 v3.x 版本，nodetpl 是支持直接使用属性名来对数据进行引用的，但是考虑到未来 ECMAScript 规范对语法严谨性的要求，nodetpl 从 v4.0 版本开始，默认不再推荐这种写法。

假如传入的数据为：

{
  title: ‘个人爱好‘
}

在 v3.x 版本，可以用下面的语法对数据进行引用：

<h2><?=title?></h2>

从 v4.0 版本开始，需要在属性名前面添加 “@” 才能引到对应数据：

<h2><[email protected]?></h2>

若希望 v4.0 仍然支持这种引用方式，需要指定 nodetpl 的 strict 属性为 “false”：

nodetpl.config({
  strict: false
});

或者在预编译环节，传递 --no-strict 参数，但是作者并不推荐这么做：

nodetpl ./tpls/ --no-strict

以上是关于js 模板引擎 - 超级强大的主要内容，如果未能解决你的问题，请参考以下文章