Javascript字符串模版

模板干的是拼接字符串的體力活。模板引擎就是利用正則表達(dá)式識(shí)別模板標(biāo)識(shí)，并利用數(shù)據(jù)替換其中的標(biāo)識(shí)符。

字符串: '<a href={href}>{text}</a>'

對(duì)象字面量:{href:'blog.hackerwen.tech' ,text:'我的博客'}

結(jié)果: <a href="blog.hackerwen.tech">我的博客</a>

在之前，筆者只會(huì)ajax的時(shí)候，服務(wù)器返回一堆數(shù)據(jù)，需要將數(shù)據(jù)展示在網(wǎng)頁上，而我選擇了最蠢也是最原始的辦法：手動(dòng)去創(chuàng)建dom節(jié)點(diǎn)，抑或是手動(dòng)拼接html，將數(shù)據(jù)填入其內(nèi)，最后更新dom。當(dāng)數(shù)據(jù)量大一點(diǎn)的時(shí)候，異步請(qǐng)求內(nèi)部的回調(diào)函數(shù)則混亂不堪，大部分都是創(chuàng)建dom，或是拼接字符串，幾乎不可以維護(hù)。

舉個(gè)栗子，這是我原來寫的一個(gè)小demo，向服務(wù)器發(fā)送一個(gè)請(qǐng)求，會(huì)返回一個(gè)json，

1. 請(qǐng)求代碼如下:

    $.ajax({
      url:'colorPick.php',
      dataType:'json',
      data:{"index":index},
      type:'get',
      success:function(data){ //回調(diào)函數(shù)
          dosomethingwith(data);
      }
    });
   

2. json如下,返回了五個(gè)顏色對(duì)象組成的數(shù)組:

    [
      {"traditional":"一斤染","japan":"Ikkonzome","r":"240","g":"143","b":"144","code":"#F08F90"},
      {"traditional":"桃色","japan":"Momo-iro","r":"244","g":"121","b":"131","code":"#F47983"},
      {"traditional":"紅梅色","japan":"Kōbai-iro","r":"219","g":"90","b":"107","code":"#DB5A6B"},
      {"traditional":"中紅","japan":"Nakabeni","r":"201","g":"55","b":"86","code":"#C93756"},
      {"traditional":"櫻色","japan":"Sakura-iro","r":"252","g":"201","b":"185","code":"#FCC9B9"}
    ]
   

如果你不知道字符串模版，你可能是將數(shù)據(jù)循環(huán)處理，將每一個(gè)對(duì)象取出來然后創(chuàng)建html片段，將對(duì)象的屬性值拼接至片段中，最后將html片段append，刷新dom，此處不做演示。

有了模版引擎后你可以這樣做：

1. 首先引入模版引擎：

   <script type="text/javascript" src='js/template-native.js'></script>
   

2. 定義模版:

    <script type="text/template" id='template'>
    <%for(var i=0;i<items.length;i++){%>
         <div class="color" style="background-color:<%=items[i].code%>;">
             <div class="code">
                <p><%=items[i].code%></p>
                <p>R:<%=items[i].r%></p>
                <p>G:<%=items[i].g%></p>
                <p>B:<%=items[i].b%></p>
             </div>
             <div class="name">
                <p class="traditional"><%=items[i].traditional%></p>
             </div>
             <p class="japan"><%=items[i].japan%></p>
         </div>
     <%}%>
    </script>
   

3. 發(fā)送請(qǐng)求：

    $.ajax({
      url:'colorPick.php',
      dataType:'json',
      data:{"index":index},
      type:'get',
      success:function(data){
          var obj = {//定義模版引擎所需對(duì)象，包含一個(gè)items屬性，值為data
              items:data
          }
          var resultStr=template("template",obj);//使用模版引擎，得到拼接好的字符串
          $(".colorBox").append(resultStr);//更新dom
      }
    });
   

沒錯(cuò)，這里的模版引擎就是幫你做了拼接字符串的工作，而且一般的模版引擎都支持邏輯判斷、循環(huán)等操作，其本質(zhì)是將模板文件和數(shù)據(jù)通過模板引擎生成最終的HTML代碼。比自己拼接字符串不知道高到那里去了，而且自己拼接經(jīng)常會(huì)出問題。
vue中集成的v-for我個(gè)人感覺也是一種模版引擎，當(dāng)然，vue實(shí)現(xiàn)的功能更多。

下一篇博文，如何簡(jiǎn)單的實(shí)現(xiàn)一個(gè)字符串模版。