Javascript字符串模版

Javascript字符串模版

模板干的是拼接字符串的体力活。模板引擎就是利用正则表达式识别模板标识，并利用数据替换其中的标识符。

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

对象字面量:{href:'blog.hackerwen.tech' ,text:'我的博客'}

结果: <a href="blog.hackerwen.tech">我的博客</a>

在之前，笔者只会ajax的时候，服务器返回一堆数据，需要将数据展示在网页上，而我选择了最蠢也是最原始的办法：手动去创建dom节点，抑或是手动拼接html，将数据填入其内，最后更新dom。当数据量大一点的时候，异步请求内部的回调函数则混乱不堪，大部分都是创建dom，或是拼接字符串，几乎不可以维护。

举个栗子，这是我原来写的一个小demo，向服务器发送一个请求，会返回一个json，

1. 请求代码如下:

    $.ajax({
      url:'colorPick.php',
      dataType:'json',
      data:{"index":index},
      type:'get',
      success:function(data){ //回调函数
          dosomethingwith(data);
      }
    });
   

2. json如下,返回了五个颜色对象组成的数组:

    [
      {"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"}
    ]
   

如果你不知道字符串模版，你可能是将数据循环处理，将每一个对象取出来然后创建html片段，将对象的属性值拼接至片段中，最后将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. 发送请求：

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

没错，这里的模版引擎就是帮你做了拼接字符串的工作，而且一般的模版引擎都支持逻辑判断、循环等操作，其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。比自己拼接字符串不知道高到那里去了，而且自己拼接经常会出问题。
vue中集成的v-for我个人感觉也是一种模版引擎，当然，vue实现的功能更多。

下一篇博文，如何简单的实现一个字符串模版。