js 模板引擎 - 超级强大

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

前端模板引擎相信大家都再熟悉不过了，市面上非常多的号称最好、最快、最牛逼的，随便就能找到一大把，但是真的深层次的对比才能发现其中的优劣，经过这段时间对各个模板引擎的使用分析，最终选定一款，也是目前我见过的最为强大的模板引擎：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的作者看到会不会请我喝茶，哈哈。。。