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 =[
   {
          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