ajax請求數據填充表格———使用art-template模板提高效率

一、為什么要用art-template模板

在實習的一次項目中，因為需求中展示表格的字段有很多個，后端返回的也是json數據，這時候如果還是使用之前的字符串拼接，這樣會開發得比較慢，而且容易出錯，而且也不具有擴展性。
因此，為了方便開發，我開始去查有沒有簡單的方法，發現了一個模板：art-template。這個模板是騰訊封裝的，而且看了語法那些都比較簡單，而且只有6kB.

二、使用art-template模板實踐

因為涉及到公司的項目，這里就不貼代碼了，我在網上看了一篇文章：https://www.jianshu.com/p/5f3b9600bbbe
這里面說了常用的art-template模板的四個方法：

• template(id,data)
• template.compile(source,options):這個將source這個模板源代碼編譯成函數，這個方法會返回一個函數，如render(data),將data數據傳入就會返回渲染結果html。
• template.render(source,data,options):這個是將source模板源代碼編譯成函數並立即執行，返回渲染結果html
• template.helper(name,callback):這個是添加輔助方法
  舉例：

//js代碼中聲明一個輔助函數
  template.helper('hi', function(name,age){
      console.log('你好! 我叫'+name);
      console.log('我今年'+age+'歲');
      //注意最后一定要返回一個結果給視圖,否則這函數就沒多大意義了
      return 'result';
  })

輔助函數聲明后模板中就可以進行調用了
原生語法如下：

<%=hi('高同學',23)%>

如果輔助函數有多個參數:：

<%=hi('高同學',23,'value1','value2'..)%>

簡潔語法如下:

{{value |hi:23}}

如果輔助函數有多個參數:

{{value | hi:'value1','value2'..)}}