目標(biāo)：
用模板和數(shù)據(jù)綁定的方式輸出文章信息列表
查看本文源碼
方法1：可以用AJAX和綁定ID(index.html)
優(yōu)點(diǎn)：簡(jiǎn)單
缺點(diǎn)：每個(gè)都需要ID秧骑，ID重復(fù)
jQuery.getJSON(*url*,*data*,*success(data,status,xhr)*)
代碼
<script type="text/javascript">
$(function(){
$.getJSON("index.js",function(result){
var data=result; //返回的是一個(gè)由json對(duì)象組成的數(shù)組
$.each(data,function(i,ele){
//console.log(ele.title); //測(cè)試：可以正常輸出所有的文章標(biāo)題
var item=$("#article").clone(); //復(fù)制節(jié)點(diǎn)
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);//把當(dāng)前item的id修改
item.appendTo("#wrap");
});
$("#article").remove(); //把最開(kāi)始的模板刪除
});
})
</script>
參考文章
http://www.jb51.net/article/90139.htm
http://www.jb51.net/article/92556.htm
方法2：用AJAX和拼接字符串
index2.html(+)和index3.html(ES6)
優(yōu)點(diǎn)：不需要模板
缺點(diǎn)：html結(jié)構(gòu)和JS文檔綁定，不靈活，麻煩
$(function(){
$.getJSON("index.js",function(result){
var htmlList=""; //聲明一個(gè)空的html變量
var data=result; //返回的是一個(gè)由json對(duì)象組成的數(shù)組
$.each(data,function(i,ele){
//console.log(ele.title); //測(cè)試：可以正常輸出所有的文章標(biāo)題
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'>評(píng)論 <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：簡(jiǎn)單的模板（方法+模板+數(shù)據(jù)）(index4.html)
優(yōu)點(diǎn)：簡(jiǎn)單私痹，好用
缺點(diǎn)：不支持對(duì)象中嵌套對(duì)象，不支持if語(yǔ)句
<script type="text/javascript">
$(function(){
//一個(gè)基于字符串原型的擴(kuò)展方法
/*
* 實(shí)現(xiàn)簡(jiǎn)單模板渲染功能 不支持對(duì)象嵌套
* 不支持if等語(yǔ)句
*/
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; //返回的是一個(gè)由json對(duì)象組成的數(shù)組
var htmlTemp = $("textarea.js-tmp").val(); //讀取模板內(nèi)容
$.each(data,function(i,ele){
htmlList+=htmlTemp.temp(ele); //模板渲染并生成最終內(nèi)容
});
$("#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/
擴(kuò)展：
- replace方法
replace()方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串恒水。stringObject.replace(*regexp/substr*,*replacement*)
返回值：一個(gè)新的字符串捂人，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的捣鲸。
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>
//替換1個(gè)疾嗅，結(jié)果：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>
//全局替換次泽，結(jié)果：Welcome to W3School! We are proud to announce that W3School
has one of the largest Web Developers sites in the world.
- 正則表達(dá)式
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};
其中//是把要查找和替換的內(nèi)容包含在內(nèi)紫谷；
g和i分別表示全局查找和不區(qū)分大小寫；
\$的斜杠是特殊字符的表示方法握恳，這里表示以$開(kāi)頭和結(jié)尾瞒窒；
\w表示所有的大小寫字母、數(shù)字和下劃線乡洼；
+表示至少一個(gè)崇裁；
function(matchs)表示與正則表達(dá)式匹配的字符串，matchs可以用任意單詞替代束昵；
returns = obj[matchs.replace(/\$/g, "")];表示把匹配的字符串中前后$去掉拔稳；
return (returns + "") == "undefined"? "": returns;這句感覺(jué)不是非常理解，直接return returns感覺(jué)也沒(méi)有錯(cuò)扒鲁巴比？
所以綜上：這個(gè)原型方法就是把字符串中的$abc$替換為ele.abc，然后輸出HTML，這個(gè)方法還是不錯(cuò)的轻绞。
正則表達(dá)式參考文章：
http://www.reibang.com/p/4fb6354708e6
http://www.reibang.com/p/ac2596be9606
- 字符串原型方法
String.prototype.temp這個(gè)方法是自己定義的腰耙，這樣下面的字符串就可以用這個(gè)方法了。
方法4：模板引擎laytpl(index5.html)
優(yōu)點(diǎn)：簡(jiǎn)單好用
缺點(diǎn)：暫時(shí)未知
官網(wǎng)：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">評(píng)論 <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; //返回的是一個(gè)由json對(duì)象組成的數(shù)組
var htmlTemp = $("textarea.js-tmp").val(); //讀取模板內(nèi)容
$.each(data,function(i,ele){
htmlList += laytpl(htmlTemp).render(ele); //把HTML模板中的模板字符替換為實(shí)際數(shù)據(jù)铲球，拼接為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/
