基于json数据交互的js模板

参考地址：http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js模板</title>
</head>
<body>
    <!--一般而言，HTML模板都是放在<textarea>标签中的，据说这样只会有一次的DOM渲染；且HTML的换行什么的可以完整保留。<textarea>标签有个克星——就是其自身，<textarea>标签无法嵌套<textarea>标签；因此，含有文本域的HTML片段不能直接放在<textarea>元素中作为模板。-->

    <!--HTML模板-->
    <textarea style="display:none;">
        <li>
            <a href="javascript:" data-id="$couponid$">
                <img src="$imgsrc$" width="240" height="180" />
                <p>$traffic$</p>
                <p>$buynum$人购买</p>
                <div>
                    <div><del class="g6 db">¥$cost$现金券</del>$discount$折</div>
                    <strong class="cr price r pr20">¥$price$</strong>
                </div>
                <h3>$resname$</h3>
            </a>
        </li>
    </textarea>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        //数据
        var JSON = {
            url: "ajax.php?author=www.zhangxinxu.com",
            data: [{
                couponid: "111",
                imgsrc: "test1.JPG",
                resname: "俏江南 仙乐斯广场",
                traffic: "肇嘉浜路沿线",
                buynum: 180,
                cost: 100,
                discount: 8.5,
                price: 85
            }, {
                couponid: "222222",
                imgsrc: "222222.jpg",
                resname: "申城五月天",
                traffic: "静安寺",
                buynum: 0,
                cost: 100,
                discount: 8.0,
                price: 80
            }, {
                couponid: "3",
                imgsrc: "go-baby.jpg",
                resname: "申城五月天",
                traffic: "静安寺",
                buynum: 0,
                cost: 100,
                discount: 8.0,
                price: 80
            }]
        };

        //一个固定的基于字符串原型的扩展方法
        String.prototype.temp = function(obj) {
            return this.replace(/$w+$/gi, function(matchs) {
                var returns = obj[matchs.replace(/$/g, "")];       
                return (returns + "") == "undefined"? "": returns;
            });
        };

        //动态添加DOM
        var htmlList = ''
             // textarea中的模板HTML
            , htmlTemp = $("textarea").val();

        JSON.data.forEach(function(object) {
            htmlList += htmlTemp.temp(object);
        });
        console.log(htmlList);
        // htmlList就是我们需要的HTML代码啦！
        $("<ul></ul>").html(htmlList).appendTo($("body"));// 插入到页面里
    </script>
</body>
</html>