富贵资源网 Design By www.hznty.com
/** * Created by Administrator on 15-1-19. */ function functionUtil() { } functionUtil = { //某个DOM节点是否有某个属性 hasAttr: function (el, name) { var attr = el.getAttributeNode && el.getAttributeNode(name); return attr "link") fileref.rel = "stylesheet"; fileref.type = "text/css"; fileref.href = path; fileref.media = "screen"; var headobj = document.getElementsByTagName('head')[0]; headobj.appendChild(fileref); }, //根据指定格式如 ${name} 绑定json数据 LoadJsonData: function (sParent, oJson) { var oParent = document.getElementById(sParent); if (oJson instanceof Array) { var str = oParent.innerHTML; for (var i = 0; i < oJson.length - 1; i++) { oParent.innerHTML += str; } for (var d in oJson) { oParent.children[d].innerHTML = oParent.children[d].innerHTML.replace(/\$\{(\w+)\}/g, function (str, $1) { return oJson[d][$1] "' + line.replace(/"/g, '\\"') + '");\n' : ''); return add; } while (match = re.exec(html)) { add(html.slice(cursor, match.index))(match[1], true); cursor = match.index + match[0].length; } add(html.substr(cursor, html.length - cursor)); code += 'return r.join("");'; return new Function(code.replace(/[\r\t\n]/g, '')).apply(options); } }
1、第一种方式:${key}
functionUtil.LoadJsonData(element, data);
”html“代码:
<div id="data"> <div class="item"> 姓名:${name}<br/> 年龄:${age}<br/> 职业:${job}<br/><br/> </div> </div>
javascript代码:
var data = [ { name: '徐磊', age: 24, job: 'IT' }, { name: '李磊', age: 23, job: '翻译' } ]; functionUtil.LoadJsonData('data', data);
执行结果:
2、第二种方式<% 代码 %>
functionUtil.TemplateEngine(string,Object);
"html"代码:
<div id="test3"> <%if(this.isShow){ for(var i in this.data){%> <p href="#">姓名:<%this.data[i].name%></p> <p href="#">年龄:<%this.data[i].age%></p> <p href="#">工作:<%this.data[i].job%></p> <br/> <%}}%> </div>
javascript代码:
var person = { data: [ { name: '徐磊', age: 24, job: 'IT' }, { name: '李磊', age: 23, job: '翻译' } ], isShow: true } document.getElementById("test3").innerHTML = functionUtil.TemplateEngine(document.getElementById("test3").innerHTML, person);
结果:
以上就是本文的全部内容了,小伙伴们看完是否对javascript模板有了新的认识了呢,希望大家能够喜欢。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...