快速生成代码工具art-template

在我的一次开发中，我遇到了一个需要利用ajax接受返回数据然后动态在网页里写入一个特定格式的需求

传统模式下我们是先准备一个字符串，然后在通过选择器选择到相应节点然后添加，如下图所示

但是这种模式下我们在写这个字符串的时候往往就特别麻烦，因为内容是在js的ajax里面的，所以相应的代码高亮、对齐可能与我们直接写的html代码有出入，并且最主要的是换行涉及大量的字符串拼接，且后期维护也比较难。所以我设法找一个解决方案，于是就找到了art-template这个插件

 

首先展示一下art-template下的代码，可以发现传统方式的痛点都得以解决

具体使用方法：

1、引入art-template的js文件

2、如上图，在一个script标签下写上我们需要重复生成的代码，注意：这里并不是我们要执行的js代码，只是我们准备了一个“模板”（为什 么用script标签？注意上面的代码中我的type并不是text/JavaScript，而是自定义了一个type，因此不会被当做js代码来处理。但是因为我们写在的是script标签里面，所以浏览器在解析代码的时候并不会把他显示在页面中，即F12下不可见，可以有效的保护代码。而我们写代码时调用，只需要给这个script标签一个id即可获取内容，我们也是dom选择id来调用模板的）

3、在需要执行js的地方首先定义一个变量

如上图 var context = {comments：res}，res是ajax返回的对象。可以理解为我们把res这个返回的对象放在一个叫comments的属性上，然后最为一个新的对象放在context这个变量上面。其中comments是我们在第二步中的script标签里面需要使用的，context是我们执行最后一步需要使用的。

4、回到准备的模板当中（script标签，以后统称模板），利用{{each comments}}    以及结束语句{{/comments}}，我们就可以遍历到comments里面res的每一个元素（可以类比foreach循环）；在这对标签里面我们写我们要写的html代码即可

注意：如上图我们可以用{{$value}}获取每一次循环的当前元素，然后可以通过{{$value.属性}}的方式获取到对应的值，用{{$index}}可以获取当前元素的下标

5、准备好模板后，回到我们js代码

如上图var html = template("template"，context)。

template（）方法是插件自带的方法，第一个参数是模板对应的id，如上图我就将id命名为template（可以随意命名），第二个参数就是我们第三步的变量context，这个方法的返回值就是一个字符串，具体字符串的内容就同我们穿同方法写的内容一模一样，把这个字符串赋值给变量html

6、将字符串放入网页中

 

 

在模板的帮助下我们的可视性是不是好多了呢？并且后期维护也更加方便了。

这是我在学校实训的时候遇见的一个插件，在此分享给大家。

我只是一个大二学生，写的地方若有错误麻烦大家指出谢谢。