master

分支 (1)

管理

管理

master

javascript-html-json-template
/
test.html

<!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="images/$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 type="text/javascript">
    //js判断设备类型
    function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        document.writeln("您的浏览设备为：");
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            document.writeln("phone");
        } else {
            document.writeln("pc");
        }
    }

    browserRedirect();
</script>

<script>

    //数据
    var JSON = {
        url: "ajax.php?author=www.zhangxinxu.com",
        data: [{
            couponid: "111",
            imgsrc: "1.jpg",
            resname: "俏江南 仙乐斯广场",
            traffic: "肇嘉浜路沿线",
            buynum: 180,
            cost: 100,
            discount: 8.5,
            price: 85
        }, {
            couponid: "222222",
            imgsrc: "2.jpg",
            resname: "申城五月天",
            traffic: "静安寺",
            buynum: 0,
            cost: 100,
            discount: 8.0,
            price: 80
        }, {
            couponid: "3",
            imgsrc: "3.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>