最近要做一个小项目，不管是使用angularjs还是reactjs，都觉得大材小用了。其实我可能只需要引入一个jquery，但想到jquery对dom的操作，对于早已习惯了双向绑定模式的我，何尝不是一种痛苦。
一、概述 artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。
二、我的痛点 我们先来看一段代码，当我用ajax从后台拿到一堆json数据，要填充进页面的时候，可能会这么做：
1 2 3 4 5 6 7 8 9 10 11 12 $.ajax({ type: 'GET' , url: '/server/list.json' , success: function (data ) var lists = '' ; for (var i=0 ;i<data.content.rows.length;i++){ lists += '<li><div class="lititle">' +data.content.rows[i].leaveRuleName+'（共计 ' +data.content.rows[i].durationStr+'）</div><div class="timer"><span>开始时间：' +data.content.rows[i].startTime+'</span><span>结束时间：' +data.content.rows[i].endTime+'</span></div><div class="btns"><p><a href="#" class="button button-round blue">' +data.content.rows[i].customApprovalStatus+'</a></p></div><div class="info">刚刚申请</div></li>' ; } $('#myList' ).append(lists); }, error: function (xhr, type ) })
html代码：
1 <ul class ="list-container" id ="myList" > </ul >
这段代码，功能上可能并没有什么问题。但是我们来看lists变量，这里面的信息已经爆炸了，html结构以及data填充，写完我就不想维护了。
正应了那句话：“此时我写的代码，只有我和天知道。半个月后，恐怕只有天知道了！”
三、处理痛点 这岂止是一场噩梦，简直就是在挖坑埋雷??。好了，不再矫情了，我们换artTemplate来试试，代码可能是这样：
1 2 3 4 5 6 7 8 $.ajax({ type: 'GET' , url: '/server/list.json' , success: function (data ) $('#myList' ).append(template('myListTpl' , { lists : data.content.rows})); }, error: function (xhr, type ) })
html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type ="text/html" id ="myListTpl" > {{each lists}} <li data-id ="{{$value.id}}" > <div class "lititle" >{{$value.overtimeRuleName}}（共计 {{$value.durationStr}}）</div> <div class "timer" > <span > 开始时间：{{$value.startTime}}</span > <span > 结束时间：{{$value.endTime}}</span > </div > <div class "btns" > <p > <a href ="#" class ="button button-round {{!$value.isEnsure?'blue':($value.isEffective?'green':'red')}}" > {{!$value.isEnsure?'待确认':($value.isEffective?'已确认':'已失效')}}</a > </p > </div > <div class "info" >{{$value.applyTime | timeFormat}}申请</div> </li > {{/each}} </script > <ul class ="list-container" id ="myList" > </ul >
注意：script中的type=”text/html”
这段代码很清晰，我们建立了myListTpl作为模板，里面的html结构清晰，变量包在了双大括号中。那么lists中的值是怎么来的，细心的你可能看到了这个：
1 $('#myList' ).append(template('myListTpl' , { lists : data.content.rows}));
对，我们用template去预编译模板，同时将数据塞进了lists中。就这样，js中不需要很复杂的逻辑，html也保存了原有的结构。
～嗡～嗡，嗯，整个世界都清静了！
四、用法示例 artTemplate用起来很简单，我们来逐一举例说明：
1.template(id,data)，向id模板传入数据。
1 2 3 4 5 6 7 8 <script id ="test" type ="text/html" > <h1 > {{title}}</h1 > <ul > {{each list as value i}} <li > 索引 {{i + 1}} ：{{value}}</li > {{/each}} </ul > </script >
js代码：
1 2 3 4 5 6 var data = { title: '标签' , list: ['文艺' , '博客' , '摄影' , '电影' , '民谣' , '旅行' , '吉他' ] }; var html = template('test' , data);document .getElementById('content' ).innerHTML = html;
2.template.compile(source,options)，预编译模板数据。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> var source = '<ul>' + '{{each list as value i}}' + '<li>索引 {{i + 1}} ：{{value}}</li>' + '{{/each}}' + '</ul>' ; var render = template.compile(source);var html = render({ list: ['摄影' , '电影' , '民谣' , '旅行' , '吉他' ] }); document .getElementById('content' ).innerHTML = html;</script>
上面两种方式，属于简单的数据渲染，实际应用中我们可能会碰到比较复杂的操作，下面细说。
3.template.helper(name,callback)，在模板中使用自定义方法。
1 2 3 <script id ="test" type ="text/html" > 大专栏 掌握js模板引擎 class="undefined">{{time | timeFormat}} </script >
1 2 3 4 template.helper('timeFormat' ,function (date ) var result = Common.formateTime(date); return result; });
如上所示，我们调用了template.helper方法，将自定义方法放在回调函数中，那么数据是不是可以进行处理了呢。这里我的场景是对时间数据做了格式化处理，我希望他显示成“1小时前，刚刚”之类的文案。
4.template.config(name,value)，更改引擎的默认配置。
5.include可嵌套子模板。
1 2 3 4 5 6 7 8 9 10 11 12 <div id ="content" > </div > <script id ="test" type ="text/html" > <h1 > {{title}}</h1 > {{include 'list' }} </script > <script id ="list" type ="text/html" > <ul > {{each list as value i}} <li > 索引 {{i + 1}} ：{{value}}</li > {{/each}} </ul > </script >
js代码：
1 2 3 4 5 6 var data = { title: '嵌入子模板' , list: ['文艺' , '博客' , '摄影' , '电影' , '民谣' , '旅行' , '吉他' ] }; var html = template('test' , data);document .getElementById('content' ).innerHTML = html;
重点在于：
将id为list的模板包含进来，很简单，这里就不细说了。
6.转义
1 2 3 4 5 <div id ="content" > </div > <script id ="test" type ="text/html" > <p > 不转义：{{#value}}</p > <p > 默认转义： {{value}}</p > </script >
js代码：
1 2 3 4 5 var data = { value: '<span style="color:#F00">hello world!</span>' }; var html = template('test' , data);document .getElementById('content' ).innerHTML = html;
7.在页面上打印你的数据。
1 2 3 <script id ="test" type ="text/html" > {{print a b c}} </script >
js代码：
1 2 3 4 5 6 7 8 var html = '' ;var data = { a: 'hello' , b: '--world' , c: '--!!!' }; html = template('test' , data); document .write(html);
基本用法就这些了，是不是觉得很简单呢，那就赶快试试吧！
五、原理剖析 当然，我们并不会只停留在会用的层次上面，模板引擎又是如何工作的呢？
artTemplate 模板编译器会根据一些简单的规则提取好所有模板变量，声明在渲染函数头部，这个函数类似：
1 2 3 4 5 6 7 8 9 10 var render = function ($data ) var content = $data.content, $out = '' ; $out += '<h3>' ; if (typeof content === 'string' ){ $out += content; } $out += '</h3>' ; return $out; };
这个自动生成的函数就如同一个手工编写的 javascript 函数一样，同等的执行次数下无论 CPU 还是内存占用都有显著减少，性能近乎极限。
值得一提的是：artTemplate 很多特性都基于预编译实现，如沙箱规范与自定义语法等。
虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。
嗯，点到为止吧。如果想深入了解，去下载个template.js，看看源码吧。
六、负荷测试与调试
1 2 3 4 5 6 7 8 <script id ="test" type ="text/html" > <ul > {{each list}} {{/each}} {{window .alert=null }} </ul > </script >
js代码：
1 2 3 var html = '' ;html = template('test' , {}); document .write(html);
list变量并没有赋值，模板引擎会将错误抛出，方便定位与查错。
七、意外收获 原本我以为artTemplate会是最快的，结果又发现了doT，很好，你已经成功引起了我的注意。
八、总结 按照学习思路，从上到下有了这篇文章。之所以想要详细的去写一篇关于模板引擎的文章，主要是想弥补心里的内疚。其实早在2014年我就有听说过artTemplate，但却只止步于听过的程度。
当地球人都在用的时候，我还没有开始，当大家已经去追逐天边的云彩，我才反应过来。
血淋淋的教训，谨以此献给和我有同样遭遇以及感受的人们，任何时间请不要停下学习的脚步，哪怕晚了，但至少你努力过。
九、参考文章 1.官方文档：https://github.com/aui/artTemplate https://github.com/aui/artTemplate http://cdc.tencent.com/2012/06/15/高性能javascript模板引擎原理解析/ https://github.com/aui/artTemplate/tree/master/demo
