你的位置:首页 > Java教程

[Java教程]js 模板引擎


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

 

官网地址:http://www.nodetpl.com/cn/

 

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+ChromeSafariFirefoxOpera 等)、手机端浏览器、服务端 node.js,理论上讲,只要是支持 js 的地方,都能非常完美地运行起来。
nodetpl 的性能如何?
经常听到有些人对模板引擎性能的担忧,由于 nodetpl 处理模板的机制做了非常细致的优化,经历过客户端及服务端高并发的考验,未编译的文件也能够非常高效地通过浏览器解析,编译后的模板文件更是性能超群,几乎不耗浏览器或服务端资源。
nodetpl 与业界其他模板引擎相比的优势是什么?
学习成本、性能、多模板、模块化、ES6node.js、样式沙箱、js 沙箱、预编译等等。
模板为什么要进行预编译?
浏览器加载并解析模板是需要耗费一定资源的,而预编译是将模板代码直接编译成原生的 js 文件,从而浏览器可以直接识别,大大提高模板的执行性能。另外,预编译后的文件可以完美运行在 AMD/CMDNode 等项目中。
如何通过 nodetpl.get 方法跨域获取远程模板文件?
tpl 或 html 模板文件是不允许跨域获取的,但是 js 文件可以,因此我们若希望在跨域的情况下使用 nodetpl,需要将模板文件进行预编译,然后再通过 nodetpl.get 或 require 等方法进行引用。
使用 AMD/CMD/CommonJs/ES6 规范进行前端开发,如何同步引入 nodetpl 模板?

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

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

var tpl = require('./tpls/myfavor'); // 同步引入模块:./tpls/myfavor.jsvar html = tpl.render({ title: '个人爱好'});// html
AMD/CMD/CommonJs/ES6 项目需要引入 nodetpl.js 文件吗?

不是必须的。

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

使用 AMD/CMD/CommonJs/ES6 规范进行前端开发,如何异步引入 nodetpl 模板?

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

var nodetpl = require('nodetpl');nodetpl.get('./tpls/myfavor', { // 异步引入模块:./tpls/myfavor.js title: '个人爱好'}, function(d) { // d});
业界有的模板引擎可以直接使用数据对象的属性名称进行引用,nodetpl 可以吗?

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

假如传入的数据为:

{ title: '个人爱好'}

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

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

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

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

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

nodetpl.config({ strict: false});

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

nodetpl ./tpls/ --no-strict