js模板引擎实例一

 ??<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;