关于模板解析的经典实践

概要:摘录的jquery的模板的部分代码,整理一下解析模板的思路。重点在正则的用法的掌握。

分析代码内容




Name:''

解析后代码:

(function anonymous(obj) {
    var p = []
      , print = function() {
        p.push.apply(p, arguments);
    };
    with (obj) {
        p.push('  
'); for (i = 0; i < users.length; ++i) { p.push(' Name:\'', users[i].name, ' \'
'); } 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 为前面的<--,匹配下面模板中的 ,替换内容',$1,' 即()内匹配到的users[i].name 加上前缀',和后缀,'
  .split("\t").join("');")  //不符合上面规则的\t即<--替换为');
  .split("-->").join("p.push('") //不符合上面规则的-->替换为p.push(');
  .split("\r").join("\\'");   //第三行将'替换为',此处再替换回'


//模板部分
   

//<-- 变为了'); --> 变为p.push(' Name:'' //此处的'变为了\' 被规则匹配为',users[i].name,'的单词分隔符
//<-- 变为了'); --> 变为p.push('

所以有两种用法,一种是承前启后 <-- 变为了'); --> 变为p.push('一种是分隔字符 ',$1,'

文例子出处:JavaScript Micro-Templating

你可能感兴趣的:(javascript,正则表达式,模板引擎)