掌握js模板引擎

最近要做一个小项目，不管是使用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填充，写完我就不想维护了。

正应了那句话：“此时我写的代码，只有我和天知道。半个月后，恐怕只有天知道了！”

三、处理痛点

这岂止是一场噩梦，简直就是在挖坑埋雷