<html><head> ???<title>text/html demo</title></head><style type="text/css">.template{ ???border-bottom: 1px solid black;}</style><body> ???<div id="container"></div><!-- 模板 --><script type="text/html" id="template"> ???<div class="template">名字：{{name}}</div> ???????<div class="template">年龄：{{age}}</div> ???</script><script type="text/javascript">var Person = function(name, age){ ???this.name = name; ???this.age = age;}var persons = [new Person(‘lay‘, 23), new Person(‘marry‘, 24)]var render = function(html, data){ ???if (data instanceof Array) { ???????var tpl = html; ???????html = ""; ???????for (var i = 0; i < data.length; i++) { ???????????var item = data[i]; ???????????var template = tpl; ???????????var newHtml = getHtml(template, item); ???????????html ?+= newHtml; ???????}; ???} else if (typeof(data) == ‘object‘ ) { ???????html = getHtml(html, data); ???}; ???????return html;}var getHtml = function(html, data){ ???????var arr = html.match(/{{[a-zA-Z0-9]+}}/g); ???????for (var i = 0; i < arr.length; i++) { ???????????var item = arr[i]; ???????????var fieldName = item.replace(/{{/g, ‘‘).replace(/}}/g, ‘‘); ???????????var value = data[fieldName]; ???????????html = html.replace(item,value) ???????}; ???return html;}var template = document.getElementById("template");var container = document.getElementById("container");container.innerHTML = render(template.innerHTML, persons);</script></body></html>script简单html模板实现
原文地址：https://www.cnblogs.com/lay2017/p/8440102.html