前端模板引擎 -- art-template

art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

1、可以通过npm安装: npm install art-template --save
2、或者直接下载引入

demo

<!-- 模板 -->
<!-- 引入模板引擎js -->
<script src='template-web.js'></script>

<!-- 制作模板 -->
<script type="text/html" id="template">
    <ul>
        <li>姓名{{name}}</li>
        <li>年龄{{age}}</li>
        <li>电话{{phone}}</li>
    </ul>
</script>

<script>
    // 获取数据
    var data = {
        name:"Ray",
        age:"18",
        phone:"18233989613"
    };

    // 将数据放入模板中
    var htmls = template("template", data);
    //主意data的类型为对象
    console.log(htmls );

    // 将模板放入页面中
    document.body.innerHTML = htmls ;

</script>

循环

//模板块
<script type="text/html" id="eachTemplate">

     <ul>
         <li>组织: {{key}}}</li>
         <li>组员:
             {{each person $value $index}}
             //$value  代表循环的每一项，$index代表下标
               <ol> {{$index}}{{$value}} </ol>
             {{/each}}
         </li>

         <li>组员信息:
             {{each info}}
             <ol>{{$value.name}} --- {{$value.age}} </ol>
             {{/each}}
         </li>
     </ul>
</script>

<script type="text/javascript">
      var family = {
          key:"APP开饭团队",
          person:[
              "刘强",
              "黄冲",
              "熊斌"
          ],
          info:[
              {name:"刘强",age:23},
              {name:"黄冲",age:26},
              {name:"熊斌",age:22}
          ]
      };

      var result = template("eachTemplate",family);
      var eachBox = document.getElementById("eachBox");
      eachBox.innerHTML = result;
</script>

if判断

<script type="text/html" id="ifPersonTemplate">
<ul>
    {{if sex=="女"}}
    <li>姓名:{{name}} 女士
       <ol>
           <li>最新款的包包</li>
           <li>你真{{skill}}</li>
       </ol>
    </li>
    {{else if sex=="男"}}
    <li>姓名:{{name}} 先生
        <ol>
            <li>最新款的西装</li>
            <li>你真{{skill}}</li>
        </ol>
    </li>
    {{/if}}
</ul>
</script>
<script type="text/javascript">

    //定义数据
    var person1 = {
        name:"赵丽颖",
        sex:"女",
        skill:"可爱"
    };

    var person2 = {
        name:"胡歌",
        sex:"男",
        skill:"帅气"
    };

    /**
     * 利用模板引擎 引用数据填充到模板中
     *
     * 参数一：模板id
     * 参数二：数据
     */
   var result =  template("ifPersonTemplate",person1);
    var result2 =  template("ifPersonTemplate",person2);

    //将返回的模板结果添加到界面中
    var ifBox = document.getElementById("ifBox");
    ifBox.innerHTML = result + result2;
</script>