關於模板解析的經典實踐

概要：摘錄的jquery的模板的部分代碼，整理一下解析模板的思路。重點在正則的用法的掌握。

分析代碼內容

<script>
(function(){
  var cache = {};
  var tag_start='<!--';
  var tag_end='-->';

  this.tmpl = function tmpl(str, data){
  var strTemp = str.replace(/[\r\t\n]/g, " ")
          .split(tag_start).join("\t")
          .replace(new RegExp("((^|"+tag_end+")[^\\t]*)'", "g"), "$1\r")
          .replace(new RegExp("\\t=(.*?)"+tag_end, "g"), "',$1,'")
          .split("\t").join("');")
          .split(tag_end).join("p.push('")
          .split("\r").join("\\'");

    var fn = !/\W/.test(str) ? cache[str] = cache[str] ||
      tmpl(document.getElementById(str).innerHTML) :
      new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +
        "with(obj){p.push('" + strTemp  + "');}return p.join('');");
    if (data)
       {document.getElementById(str).innerHTML=fn( data )
       }
    else
        {return fn;
        }
  };
})();
</script>

<div id="tpl">
    <br>
<!--for (i=0;i<users.length;++i){-->
 Name:'<!--=users[i].name-->'
    <br>
<!--}-->
</div>

<script>
var data={users:[{name:'name1'},
                 {name:'name2'}
                ]
         };
   tmpl("tpl", data);
</script>

解析後代碼：

(function anonymous(obj) {
    var p = []
      , print = function() {
        p.push.apply(p, arguments);
    };
    with (obj) {
        p.push('  <br> ');
        for (i = 0; i < users.length; ++i) {
            p.push(' Name:\'', users[i].name, '  \'<br> ');
        }
        p.push(' ');
    }
    return p.join('');
}
)

解析部分

//匹配部分
str.replace(/[\r\t\n]/g, " ")  // 將回車，換行，製表符 替換成空格，將代碼拍平
  .split("<--").join("\t")     //將替換部分的開始符替換成\t，不要糾結，下面會解釋爲何這麼作
  .replace(new RegExp("((^|-->)[^\\t]*)'", "g"), "$1\r")  //不以\t開頭的字符(能夠沒有)+'或者--> +\t之外的字符(能夠沒有)+' ，若是知足條件，$1\r裏的$1爲前面()的部分，至關於將'替換爲\r
  .replace(new RegExp("\\t=(.*?)-->", "g"), "',$1,'")  // \t 爲前面的<--,匹配下面模板中的<!--=users[i].name--> ，替換內容',$1,' 即()內匹配到的users[i].name 加上前綴',和後綴,'
  .split("\t").join("');")  //不符合上面規則的\t即<--替換爲');
  .split("-->").join("p.push('") //不符合上面規則的-->替換爲p.push(');
  .split("\r").join("\\'");   //第三行將'替換爲'，此處再替換回'


//模板部分
   <div id="tpl">
        <br>
    <!--for (i=0;i<users.length;++i){-->  //<-- 變爲了'); --> 變爲p.push('
     Name:'<!--=users[i].name-->'  //此處的'變爲了\' <!---->被規則匹配爲',users[i].name,'的單詞分隔符
        <br>
    <!--}-->     //<-- 變爲了'); --> 變爲p.push('
    </div>

<!-- --> 因此有兩種用法，一種是承前啓後 <-- 變爲了'); --> 變爲p.push('一種是分隔字符 ',$1,'

文例子出處：JavaScript Micro-Templating