js 模板引擎 - 超级强大

时间:2022-02-17 04:40:59

本来没想写这篇文章,但是网上误导大众的文章太多了,所以今天就抽出半小时时间谈一下我对前端模板引擎的感受吧。

前端模板引擎相信大家都再熟悉不过了,市面上非常多的号称最好、最快、最牛逼的,随便就能找到一大把,但是真的深层次的对比才能发现其中的优劣,经过这段时间对各个模板引擎的使用分析,最终选定一款,也是目前我见过的最为强大的模板引擎:nodetpl

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

这篇博客是本人的使用心得,不同意见的可以留言一起讨论。

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

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

考察了市面上多款模板引擎,包括国外用的比较多的模板引擎,几乎都无法完美地支持模板级CSS和JS,这给平时开发带来许多不便。

模板应当是一个独立的模块,不管应用到任何一个页面,他都不应当由外部定义样式或者绑定事件,nodetpl 这一点做的比较好,下面是一个简单的例子:

模板代码:

<style>
h1 {
color: #f00;
}
</style>
<div id="$ROOT">
<h1>Hello <?=@name?></h1>
</div>

调用:

nodetpl.render(html, {
name: 'zhangsan'
}, function(d) {
console.log(d);
});

最终编译后的结果是这样的:

<style>#nodetpl_g_002501583635846283 h1 {  color: #f00;}</style>
<div id="nodetpl_g_002501583635846283">
<h1>Hello zhangsan</h1>
</div>

非常神奇,nodetpl 自动解析成一个 ID 为 nodetpl_g_002501583635846283 的DOM,样式能够完美地运行在当前模板中,而且不会影响到外部页面!

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

同样,书写模板的 js 代码也和上面 CSS 一样做了强大的隔离:

模板代码:

<style>
...
</style>
<div id="$ROOT">
<h1>Hello <?=@name?></h1>
</div>
<script>
ROOT.style.border = '1px solid #00f';
</script>

在 js 里面直接操作 “ROOT” 就可以了。

可以认为一个模板就是一个完完全全独立的盒子,该盒子可以运行在任何页面中,而不会对任何环境引发冲突。

用过其他的模板,平时使用不感觉有问题,但是时间久了,就会引发这样那样的问题,原因就是模板没有很好地做好样式和JS的隔离,比如:调用了 a 模板,然后又调用了 b 模板,由于 a 模板 和 b 模板里面都定义了一个同名的 css,最终造成两个模板的样式乱掉,js也同样存在冲突的问题,这个问题将会非常被动。

3. 支持 AMD / CMD,甚至 ES6

由于公司涉及到前端项目、后端项目(node.js),同时由于历史原因,前端代码有用 seajs 的,有的是页面直接调用的,发现 nodetpl 能够兼容各种开发模式:

页面直接引用、seajs引用、node.js 服务端引用,perfect!

目前 ES6 公司还没用到,不过看似蛮吊的。

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

当初公司选型的时候,对比过几款,不过最终因为学习成本较高而放弃,毕竟是团队开发,让一个团队的同事学习一门新的语法,执行起来还是不容易的。

nodetpl 做的不错,支持所有原生js语法,比如:

<?
var a=1;
if(a === 1) {
?>
<h1>Hello, <?=a?></h1>
<?} else {?>
<h1>Welcome</h1>
<?}?>
<ul>
<?for(var i=0; i<@users.length; i++) {?>
<li><?=@users[i]?></li>
<?}?>
</ul>

<??> 里面是纯 js,所有人都会写。

5. 支持复杂的多模板

若一个模板逻辑比较复杂,还可以将模板分割成多个小模板,通过下面的方式:

<template name="main">
// template code 1
</template>
<template name="othertemplate">
// template code 2
</template>

模板之间项目调用直接通过 include('othertemplate') 就包过来了,很方便。

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

遇到过一次,公司项目需要实现 amd 和 get 共用,nodetpl 当时未能支持,通过QQ与作者协商,作者说评估一下合理性,然后当晚就给回复,说更新一下新版本吧,你的需求已经支持到了。

7. 性能超级牛叉

别信网上别的一些模板吹嘘的什么性能对比结果什么的,有的直接做个缓存然后拿来跟别的不缓存的比,当然牛逼了,通过分析 nodetpl 的原理发现,nodetpl 几乎不占性能!

官网也给了说明,在有的模式下,直接都不需要引用 nodetpl 类库,就直接能跑起来!

8. 支持几乎所有浏览器,包括变态的IE6,还支持运行在 node 服务端

目前我司node项目已经在用,框架是express.js,模板引擎是nodetpl

上面只是我几个月来的感受,还有好多实用功能,就不写了,感兴趣的看官网上的文档吧。

好多年没写博客了,今天一口气写这么多,今天算是力推这款模板吧,不知nodetpl的作者看到会不会请我喝茶,哈哈。。。