首页 > 代码库 > js模板引擎原理,附自己写的简洁模板引擎

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

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 =http://www.mamicode.com/[
   {
          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

 

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