JS数据绑定与模板引擎
目标：
用模板和数据绑定的方式输出文章信息列表
查看本文源码
方法1：可以用AJAX和绑定ID(index.html)
优点：简单
缺点：每个都需要ID，ID重复
jQuery.getJSON(*url*,*data*,*success(data,status,xhr)*)
代码
<script type="text/javascript">
$(function(){
$.getJSON("index.js",function(result){
var data=result; //返回的是一个由json对象组成的数组
$.each(data,function(i,ele){
//console.log(ele.title); //测试：可以正常输出所有的文章标题
var item=$("#article").clone(); //复制节点
item.find("#author").text(ele.author);
item.find("#date").text(ele.date);
item.find("#title").text(ele.title);
item.find("#read").text(ele.read);
item.find("#comment").text(ele.comment);
item.find("#like").text(ele.like);
item.find("#pic").attr("src",ele.img);
item.attr("id","article"+i);//把当前item的id修改
item.appendTo("#wrap");
});
$("#article").remove(); //把最开始的模板删除
});
})
</script>
参考文章
http://www.jb51.net/article/90139.htm
http://www.jb51.net/article/92556.htm
方法2：用AJAX和拼接字符串
index2.html(+)和index3.html(ES6)
优点：不需要模板
缺点：html结构和JS文档绑定，不灵活，麻烦
$(function(){
$.getJSON("index.js",function(result){
var htmlList=""; //声明一个空的html变量
var data=result; //返回的是一个由json对象组成的数组
$.each(data,function(i,ele){
//console.log(ele.title); //测试：可以正常输出所有的文章标题
htmlList+=`<div class='article clearfix'><div class='info'><div class='top'><a href='#' class='author'>${ele.author}</a><span class='date'>${ele.date}</span></div><h3 class='title'>${ele.title}</h3><div class='bottom'><span class='read'>阅读 <em>${ele.read}</em></span><span class='comment'>评论 <em></em>${ele.comment}</span><span class='like'>喜欢 <em>${ele.like}</em></span></div></div><img id='pic' class='pic' src='${ele.img}' alt=''></div>`; //输出所有的文章HTML并拼接在一起
});
$("#wrap").empty().append(htmlList);
})
})
</script>
参考文章：
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499203693072018f8878842a9b0011e3ff4e38b6b000
http://www.cnblogs.com/52fhy/p/5393673.html
方法3：简单的模板（方法+模板+数据）(index4.html)
优点：简单，好用
缺点：不支持对象中嵌套对象，不支持if语句
<script type="text/javascript">
$(function(){
//一个基于字符串原型的扩展方法
/*
* 实现简单模板渲染功能 不支持对象嵌套
* 不支持if等语句
*/
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};
$.getJSON("index.js",function(result){
var htmlList="";
var data=result; //返回的是一个由json对象组成的数组
var htmlTemp = $("textarea.js-tmp").val(); //读取模板内容
$.each(data,function(i,ele){
htmlList+=htmlTemp.temp(ele); //模板渲染并生成最终内容
});
$("#wrap").empty().append(htmlList);
})
})
</script>
参考文章：
http://www.cnblogs.com/52fhy/p/5358957.html
http://www.cnblogs.com/52fhy/p/5393673.html
http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/
扩展：
- replace方法
replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。stringObject.replace(*regexp/substr*,*replacement*)
返回值：一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>
//替换1个，结果：Visit W3School!
<script type="text/javascript">
var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."
document.write(str.replace(/Microsoft/g, "W3School"))
</script>
//全局替换，结果：Welcome to W3School! We are proud to announce that W3School
has one of the largest Web Developers sites in the world.
- 正则表达式
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};
其中//是把要查找和替换的内容包含在内；
g和i分别表示全局查找和不区分大小写；
\$的斜杠是特殊字符的表示方法，这里表示以$开头和结尾；
\w表示所有的大小写字母、数字和下划线；
+表示至少一个；
function(matchs)表示与正则表达式匹配的字符串，matchs可以用任意单词替代；
returns = obj[matchs.replace(/\$/g, "")];表示把匹配的字符串中前后$去掉；
return (returns + "") == "undefined"? "": returns;这句感觉不是非常理解，直接return returns感觉也没有错啊？
所以综上：这个原型方法就是把字符串中的$abc$替换为ele.abc，然后输出HTML，这个方法还是不错的。
正则表达式参考文章：
http://www.jianshu.com/p/4fb6354708e6
http://www.jianshu.com/p/ac2596be9606
- 字符串原型方法
String.prototype.temp这个方法是自己定义的，这样下面的字符串就可以用这个方法了。
方法4：模板引擎laytpl(index5.html)
优点：简单好用
缺点：暂时未知
官网：http://laytpl.layui.com/
模板
<div class="wrap" id="wrap">
<h2>文章列表</h2>
<!-- 用textarea装模板 -->
<textarea class="js-tmp" style="display:none;">
<div class="article clearfix" id="article">
<div class="info">
<div class="top">
<a href="#" class="author">{{d.author}}</a>
<span class="date">{{d.date}}</span>
</div>
<h3 class="title">{{d.title}}</h3>
<div class="bottom">
<span class="read">阅读 <em>{{d.read}}</em></span>
<span class="comment">评论 <em>{{d.comment}}</em></span>
<span class="like">喜欢 <em>{{d.like}}</em></span>
</div>
</div>
<img id="pic" class="pic" src="{{d.img}}" alt="">
</div>
</textarea>
</div>
JS
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="laytpl.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON("index.js",function(result){
var htmlList="";
var data=result; //返回的是一个由json对象组成的数组
var htmlTemp = $("textarea.js-tmp").val(); //读取模板内容
$.each(data,function(i,ele){
htmlList += laytpl(htmlTemp).render(ele); //把HTML模板中的模板字符替换为实际数据，拼接为HTML
});
$("#wrap").empty().append(htmlList);//把所有模板输出
})
})
</script>
参考文章：
http://www.cnblogs.com/52fhy/p/5358957.html
http://www.cnblogs.com/52fhy/p/5393673.html
http://jartto.wang/2016/09/15/grasp-a-js-template-engine/
