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'..)}}