js模板引擎实例一

Posted 2020-10-11 魔都叛徒

   <div class="header"></div>
<!--    模板-->
    <script type="template" id="template">
        <h2>
            <a href="{{href}}">{{Title}}</a>
        </h2>
        <img src="{{imgSrc}}" width="300">
    </script>

//        数据
        var data = [{
            Title: "百度一下",
            href: "http://www.baidu.com",
            imgSrc: "1.jpg"
        }];

var template = document.querySelector(‘#template‘).innerhtml,
            header = document.querySelector(‘.header‘),
            fragment = ‘‘;
        for (var i = 0, len = data.length; i < len; i++) {
            fragment += template
                .replace(/\{\{Title\}\}/, data[i].Title)
                .replace(/\{\{href\}\}/, data[i].href)
                .replace(/\{\{imgSrc\}\}/, data[i].imgSrc)
        }
        header.innerHTML=fragment;