几种前端模板引擎

从事前端这一行业，那么不得不接触前端的模板引擎，所谓的模板引擎就是为了在前端更好的渲染后端的数据，前端有很多的模板引擎比如underscore、arttemplate等等，今天自己总结了一下自己平时是如何使用它们的。

---

javascript模板引擎实现原理

原生js模板引擎内部实现原理的实质是：利用正则表达式，替换模板当中事先定义好的标签。

<div id="content">
  <!-- 模板内容显示位置 -->
</div>
<!-- 1.创建模板 -->
<script type="text/html" id="tpl">
    <h4>my name is <%= name %></h4>
   <h5>i am <%= age %> years old</h5>
</script>
<script>
   //2.将函数进行简单封装
   function template(id,data){
      var tpl = document.getElementById(id);
  //字符串
      tpl = tpl.innerHTML;
      //通过正则表达式查换特殊标记的内容,这里正则表达式不做介绍,网上有很多,可以查
      var reg = /<%=\s*([^%>]+\S)\s*%>/;
      var match;
      //匹配不到则为null,循环则停止
      while(match = reg.exec(tpl)){//exec匹配字符串中的正则表达式
         //替换
         tpl = tpl.replace(match[0],data[match[1]]);
      }
      return tpl;//返回渲染值
   }
// 3.渲染模板
   var data = {
      name:'cici',
      age:10
   }
   //4.调用模板引擎
   var html = template('tpl',data);
   //5.输出内容
   document.getElementById('content').innerHTML = html;
</script>

result:

1.artTemplate

新一代的javascript模板引擎，他有两个版本选择，一个是简洁语法版，另一个是原生语法版。

• github地址：arttemplate

1.1 简洁语法

编写模板：

<script type="text/template" id="tpl">
   <ul>
       <!-- each list as value i -->
       {{each list}}
       <li>我的名字时{{$value.name}},我的年龄是{{$value.age}}</li>
       {{/each}}
   </ul>

渲染模板

<script src="libs/template.js"></script>
  <script>
    var data = {
    list:[
        {name:'xjj1',age:10},
        {name:'xjj2',age:12},
        {name:'xjj3',age:16},
        {name:'xjj4',age:40}
    ]
  }
  var html = template('tpl',data);
  document.querySelector('.box').innerHTML = html;
  </script>

result:

1.2原生语法

编写模板

<script type="text/template" id="tpl">
     <ul>
        <% for(var i = 0 ; i < list.length ; i ++){%>
        <li>我的名字是：<b><%=list[i].name%></b>我的年龄是：<b><%=list[i].age%></b>。</li>
        <%};%>
    </ul>
  </script>

渲染模板

<script src="libs/template-native.js"></script>
  <script>
   var data = {
        list:[
            {name:'xjj1',age:10},
            {name:'xjj2',age:12},
            {name:'xjj3',age:16},
            {name:'xjj4',age:40}
        ]
    }
    //解析数据成html字符串
    var html = template('tpl',data);
    //添加到html页面中
    document.querySelector('.box').innerHTML = html;
  </script>

result:
注意：因为原生的js模板不能使用全局的变量，所以要自己引入全局变量
假如要使用jquery中的方法时，要引入jquery包
编写模板：

<script type="text/template" id="tpl">
    <% var $ = getJquery();%>
    <%$.each(model,function(i,v){%>
        <%=v.name%>今年<%=v.age%><br>
    <%});%>
  </script>

渲染模板：

<script src="libs/template-native.js"></script>
  <script src="libs/jquery.min.js"></script>
  <script>
   var list = [
            {name:'xjj1',age:10},
            {name:'xjj2',age:12},
            {name:'xjj3',age:16},
            {name:'xjj4',age:40}
        ];
    // 把全局变量传进模板引擎
    // 第一个参数是：name
    // 第二个参数是：callback
    template.helper('getJquery',function(){
      return $;
    })
    var html = template('tpl',{model:list});
    document.querySelector('.box').innerHTML = html;

  </script>

result:

2.underscore

• 官网：(underscore)(http://www.css88.com/doc/underscore/)
• Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

编写模板：

<script type="text/template" id="tpl">
   <% _.each(datamodel,function(v, k){ %>
     <tr>
       <td><%=v.name%></td>
       <td><%=v.age%></td>
     </tr>
  <% })%>
 </script>

渲染模板：

<script src="libs/underscore/underscore.js"></script>
  <script>
    var data = [
    {name:'张三',age:20},
    {name:'李四',age:22},
    {name:'王五',age:23},
    ];
    // 获得模板内容的字符串
    var templateStr = document.querySelector('#tpl').innerHTML;
    // 转化成模板方法
    var templateFun = _.template(templateStr);
    //解析成html结构
    var html = templateFun({datamodel:data});
    //添加到html结构中去
    document.querySelector('tbody').innerHTML = html;
  </script>

result: