js模板引擎原理，附自己写的简洁模板引擎

Posted 2020-08-20

js处理DOM交互非常普遍，但DOM结构单纯用js字符串拼接简直难以维护，不方便理解和扩展。

下面展现了js模板引擎的实现原理：

• html中的模板

<script id="mytpl">
    <div>
    我的名字是：$name$  <br/>
    今年$age$了！
    </div>
</script>    

因为script不会被浏览器解析和渲染，最大限度节省了浏览器资源，textarea标签同样可以达到效果。Template标签就是这样的目的，只是支持不够良好。

 

• js模板引擎

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代码（包括变量）时打散，再拼接时就自动执行了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