JavaScript模板引擎原理，几行代码的事儿
2013-12-03 16:35 by BarretLee, 765 阅读, 8 评论, 收藏, 编辑
一、前言
什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定。比如：
var tpl = 'Hei, my name is <%name%>, and I'm <%age%> years old.';
通过模板引擎函数把数据塞进去，
var data = {
"name": "Barret Lee",
"age": "20"
};
var result = tplEngine(tpl, data);
//Hei, my name is Barret Lee, and I'm 20 years old.
那这玩意儿有什么作用呢？其实他就是一个预处理器（preprocessor），搞php开发的童鞋对Smarty必然是十分熟悉，Smarty是一个php模板引擎，tpl中待处理的字符通过数据匹配然后输出相应的html代码，加之比较给力的缓存技术，其速度和易用性是非常给力的！JS Template也是一样的，我们的数据库里保存着数以千万计的数据，而每一条数据都是通过同一种方式输入，就拿上面的例子来说，我们不可能在数据库里存几千条"Hei, my name..."，而是只保存对应的name和age，通过模板输出结果。
JS模板引擎应该做哪些事情？看看下面一串代码：
var tpl = '<% for(var i = 0; i < this.posts.length; i++) {' +
'var post = posts[i]; %>' +
'<% if(!post.expert){ %>' +
'post is null' +
'<% } else { %>' +
'
的模板，通常的情况下，模板代码是放在script标签或者textarea中，所以首先是要获取到这里头的东西，然后再来做解析。
var barretTpl = function(str, data) {
//获取元素
var element = document.getElementById(str);
if (element) {
//textarea或input则取value，其它情况取innerHTML
var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;
return tplEngine(html, data);
} else {
//是模板字符串，则生成一个函数
//如果直接传入字符串作为模板，则可能变化过多，因此不考虑缓存
return tplEngine(str, data);
}
var tplEngine = function(tpl, data) {
// content above
};
};
这样一来就更加简单了，使用方式就是 barretTpl(str, data)， 这里的str可以是模板代码，也可以是一个DOM元素的id~ 可以看看这两段代码：https://gist.github.com/barretlee/7765698, https://gist.github.com/barretlee/7765587
也可以直接戳这个demo。
四、优化以及功能拓展
总共就三四十行代码，完成的东西肯定是一个简洁版的，不过对于一个简单的页面而言，这几行代码已经足够使用了，如果还想对他做优化，可以从这几个方面考虑：
优化获取的模板代码，比如去掉行尾空格等
符号转义，如果我们想输出hehe类似这样的源代码，在push之前必须进行转义
代码缓存，如果一个模板会经常使用，可以将它用一个数组缓存在barretTpl闭包内
用户自己设置分隔符
