[HTML] 模板的用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" >
        <meta name="description" content="" >
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
        <script type="text/template" id="app_tpl"><!--     描述：建立模板 -->
                                                  
            <div class="product">
                <div class="imageContainer">
                    <img src="{#img#}" /><!--｛##｝     自己定义匹配  -->
                    <div class="layer">
                        <p>找同款</p>
                        <p>找相似</p>
                    </div>
                </div>
            </div>
            <div class="content">
                <p class="price">
                    <span class="price-text">￥{#price#}</span>
                    <span class="sum">{#sales#}人付款</span>
                </p>
                <p class="title">{#title#}</p>
                <p class="store">
                    <span class="store-title">{#store#}</span>
                    <span class="adress">{#address#}</span>
                </p>
            </div>
        </script>
    </head>
    <body>
        <div id="app" class="ppa"></div>
    </body>
</html>
<script type="text/javascript">
    document.write(footerTpl);
</script>
<script type="text/javascript">
    //命名空间：封装工具方法
    var Util = {
        //封装选择元素的方法
        id:function(id){
            return document.getElementById(id);
        },
            
        //封装ajax请求数据方法
        ajax:function(url,callback){
            
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //订阅事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        //var data = xhr.responseText;
                        var data = JSON.parse(xhr.responseText);
                        //console.log(xhr.responseText);
                        //处理数据  
                        callback&&callback(data);
                    }
                    
                }
            }
            //open方法
            xhr.open('get',url,true);
            //send方法
            xhr.send(null);
        }
        
    }
    //console.log(Util.id('app_tpl').innerHTML);
    //封装格式化模板方法
    function formDataString(str,data){
        return    str.replace(/\{#(\w+)#\}/g,function(match,$1){
            //console.log(this);//this作用域
            //console.log(arguments);
            console.log('match:'+match);//match实参集合
            console.log($1);
            return data[$1] === undefined?'':data[$1];
        });//w+ 任意多个字符
    }
    var html = '';
    var str = Util.id('app_tpl').innerHTML; 
    Util.ajax('data/list.json',function(data){  
        //console.log(data);
        //console.log(data.list.length);
        for(var i=0,len=data.list.length;i<len;i++){  
            
            var list = data.list[i];
            
            html += formDataString(str,list);  
        }
        Util.id('app').innerHTML = html;  
    });
</script>
posted on 2017-06-27 11:33 晏过留痕阅读(409) 评论(0) 编辑收藏举报