接到一个奇怪的要求，就是简单的一个动态页面，可以用php，jsp,asp 一类的轻松渲染的页面，但是后端懒，不愿意渲染，硬是开发了一个接口，然前端ajax请求之后js去渲染。。。
领导安排的任务，不解释————做！！！
没办法，后端是领导，他说了算，让咱做，咱就做。分析一下就是先载入一个空白页面，然后进行ajax请求，在拿到数据后，渲染出来。
模板，更多的模板
话说，拿到这要求，第一反应，php！！！对了，现在是前端，不能这么干，所以去找前端渲染模板——
- baiduTemplate: http://baidufe.github.io/BaiduTemplate/
- artTemplate: https://github.com/aui/artTemplate
- juicer: http://juicer.name/或https://github.com/PaulGuo/Juicer/zipball/master#download
- doT：doT source:https://github.com/olado/doT Docs:http://olado.github.com/doT/
- tmpl：https://github.com/BorisMoore/jquery-tmpl
- handlebars:http://handlebarsjs.com/或https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js
- easyTemplate：https://github.com/qitupstudios/easyTemplate
- underscoretemplate: http://documentcloud.github.io/underscore/
- mustache:https://github.com/janl/mustache.js
- kissytemplate:https://github.com/ktmud/kissy
laytpl登场
其实上面的我也就是说说而已，懒的用，这里推荐的是laytpl,不图别的，就为了它短小精悍，才区区2k不到的大小
laytpl操作简介
<!-- 第一步：编写模版。你可以使用一个script标签存放模板，如： -->
<script id="demo" type="text/html">
<h1> {{ d.title }} </h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<li>
<span>姓名：{{ d.list[i].name }}</span>
<span>城市：{{ d.list[i].city }}</span>
</li>
{{# } }}
</ul>
</script>
<!-- 第二步：建立视图。用于呈现渲染结果。 -->
<div id="view"></div>
//第三步：渲染模版
var data = {
title: '前端攻城师',
list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
document.getElementById('view').innerHTML = html;
});
后记
轻松完成任务！！！
日志
2016-11-17 创建