JS数据绑定与模板引擎

目标：

用模板和数据绑定的方式输出文章信息列表
查看本文源码

方法1：可以用AJAX和绑定ID(index.html)

优点：简单
缺点：每个都需要ID，ID重复

jQuery.getJSON(*url*,*data*,*success(data,status,xhr)*)

代码

参考文章
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+=`
${ele.author}${ele.date}
${ele.title}
阅读 ${ele.read}评论 ${ele.comment}喜欢 ${ele.like}
`; //输出所有的文章HTML并拼接在一起
            });
            $("#wrap").empty().append(htmlList);
        })
    })

参考文章：
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499203693072018f8878842a9b0011e3ff4e38b6b000
http://www.cnblogs.com/52fhy/p/5393673.html

方法3：简单的模板（方法+模板+数据）(index4.html)

优点：简单，好用
缺点：不支持对象中嵌套对象，不支持if语句

参考文章：
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/

扩展：

1. replace方法
   replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。stringObject.replace(*regexp/substr*,*replacement*)
   返回值：一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

//替换1个，结果：Visit W3School!

//全局替换，结果：Welcome to W3School! We are proud to announce that W3School
has one of the largest Web Developers sites in the world.

2. 正则表达式

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

3. 字符串原型方法
   String.prototype.temp这个方法是自己定义的，这样下面的字符串就可以用这个方法了。

方法4：模板引擎laytpl(index5.html)

优点：简单好用
缺点：暂时未知
官网：http://laytpl.layui.com/
模板

    
文章列表
    
            <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>
    

JS

参考文章：
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/