最近要做一个小项目，不管是使用angularjs还是reactjs，都觉得大材小用了。其实我可能只需要引入一个jquery，但想到jquery对dom的操作，对于早已习惯了双向绑定模式的我，何尝不是一种痛苦。
听过这样一句话：“技术没有缺席，只有姗姗来迟”，很多技术自己不知道，并非没有。今天我想介绍的就是一个简单的js模板引擎artTemplate，让我们扬帆起航吧～
一、概述
artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。
二、我的痛点
我们先来看一段代码，当我用ajax从后台拿到一堆json数据，要填充进页面的时候，可能会这么做：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$.ajax({
type: 'GET',
url: '/server/list.json',
success: function(data) {
var lists = '';
for(var i=0;i<data.content.rows.length;i++){
lists += '<li><div class="lititle">'+data.content.rows[i].leaveRuleName+'（共计 '+data.content.rows[i].durationStr+'）</div><div class="timer"><span>开始时间：'+data.content.rows[i].startTime+'</span><span>结束时间：'+data.content.rows[i].endTime+'</span></div><div class="btns"><p><a href="#" class="button button-round blue">'+data.content.rows[i].customApprovalStatus+'</a></p></div><div class="info">刚刚申请</div></li>';
}
$('#myList').append(lists);
},
error: function(xhr, type) {//此处省略}
})
|
html代码：
|
1
|
<ul class="list-container" id="myList"></ul>
|
这段代码，功能上可能并没有什么问题。但是我们来看lists变量，这里面的信息已经爆炸了，html结构以及data填充，写完我就不想维护了。
正应了那句话：“此时我写的代码，只有我和天知道。半个月后，恐怕只有天知道了！”
三、处理痛点
这岂止是一场噩梦，简直就是在挖坑埋雷