标签：array 开源 模板 key ejs 拼接 语法 string 生成
js处理DOM交互非常普遍，但DOM结构单纯用js字符串拼接简直难以维护，不方便理解和扩展。
下面展现了js模板引擎的实现原理：
<script id="mytpl"> <div> 我的名字是：$name$ <br/> 今年$age$了！ </div> </script>
因为script不会被浏览器解析和渲染，最大限度节省了浏览器资源，textarea标签同样可以达到效果。Template标签就是这样的目的，只是支持不够良好。
String.prototype.simpleTemplate = function(data){ var html = ‘‘; if(Array.isArray(data)){ var self = this; data.forEach(function(item){ var pattern, str = self; Object.keys(item).forEach(function(key){ pattern = new RegExp(‘\\$‘+key+‘\\$‘, ‘g‘); str = str.replace(pattern, item[key]); }); html += str; }); } return html; }
为String对象增加引擎方法，这里可以支持变量替换和模板循环生成。
基于这样的思想，可以很方便地扩展成模板内部循环，只要在simpleTemplate内部判断item是否数组类型，将标记的循环部分递归调用simpleTmplate(item)即可。
var htmlTemplate = $(‘textarea‘).val(); var data =[ { name: ‘小明‘, age: 21, }, { name: ‘小红‘, age: 20 } ] $(‘body‘).append($(htmlTemplate.simpleTemplate(data)));
如果想使模板支持所有的js语法，需要从头换一种思路。
基本思想是字符串模板在遇到js代码（包括变量）时打散，再拼接时就自动执行了js语法。如template
<p>性别： if(v){ 男 }else { 女 } </p>
会转换成类似这样：
var html = ‘<p>性别：’ ; if(a){html.push(‘男‘);}else{html.push(‘女‘)}
开源第三方js模板引擎
早期的Mustache、Hanldebars，流行过的Jade、EJS，easyTemplate等。
当然还有bat各家的：
腾讯的artTemplate 性能优
阿里的jucer 性能优
百度的baiduTemplate
标签：array 开源 模板 key ejs 拼接 语法 string 生成
原文地址：http://www.cnblogs.com/feitan/p/6098447.html
