關(guān)于模板解析的經(jīng)典實(shí)踐

崔曉明發(fā)布于2019-08-23 13:54 / 1911人閱讀

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

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

分析代碼內(nèi)容




    


 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(/[
	
]/g, " ")  // 將回車(chē)，換行，制表符 替換成空格，將代碼拍平
  .split("<--").join("	")     //將替換部分的開(kāi)始符替換成	，不要糾結(jié)，下面會(huì)解釋為什么這么做
  .replace(new RegExp("((^|-->)[^	]*)"", "g"), "$1
")  //不以	開(kāi)頭的字符(可以沒(méi)有)+"或者--> +	以外的字符(可以沒(méi)有)+" ，如果滿(mǎn)足條件，$1
里的$1為前面()的部分，相當(dāng)于將"替換為
  .replace(new RegExp("	=(.*?)-->", "g"), "",$1,"")  // 	 為前面的<--,匹配下面模板中的 ，替換內(nèi)容",$1," 即()內(nèi)匹配到的users[i].name 加上前綴",和后綴,"
  .split("	").join("");")  //不符合上面規(guī)則的	即<--替換為");
  .split("-->").join("p.push("") //不符合上面規(guī)則的-->替換為p.push(");
  .split("
").join(""");   //第三行將"替換為"，此處再替換回"


//模板部分
   
        

      //<-- 變?yōu)榱?); --> 變?yōu)閜.push("
     Name:""  //此處的"變?yōu)榱? 被規(guī)則匹配為",users[i].name,"的單詞分隔符
        

         //<-- 變?yōu)榱?); --> 變?yōu)閜.push("

所以有兩種用法，一種是承前啟后 <-- 變?yōu)榱?); --> 變?yōu)閜.push("一種是分隔字符 ",$1,"

文例子出處：JavaScript Micro-Templating