/*** 15-1-19의 관리자가 작성했습니다. */function functionUtil () {} functionUtil = {// dom 노드에 특정 속성이 있습니까? 리턴 att? attr.specified : false}, // 클래스 getByclass : function (sclass, oparent)에 따라 요소를 가져옵니다. {oparent = oparent || 문서; if (! oparent.getElementsByClassName) {return oparent.getElementsByClassName (sclass); } var arr = []; var aele = oparent.getElementsByTagName ( '*'); var reg = new regexp ( '(^| // s)' + sclass + '(// s | $)'); // var reg = new regexp ( '(^| for (var i = 0; i <aele.length; i ++) {if (reg.test (aele [i] .classname)) {arr.push (aele [i]); }} 반환 ARR; }, // 스타일 시트 AddSheetFile : function (path) {var fileref = document.createElement ( "link") fileref.rel = "스타일 시트"; fileref.type = "text/css"; fileref.href = 경로; fileref.media = "화면"; var headobj = document.getElementsByTagName ( 'head') [0]; Headobj.appendChild (Fileref); }, // $ {name} loadjsondata : function (sparent, ojson) {var oparent = document.getElementById (sparent)와 같은 지정된 형식에 따라 JSON 데이터를 바인딩합니다. if (array of array) {var str = oparent.innerhtml; for (var i = 0; i <ojson.length -1; i ++) {oparent.innerhtml+= str; } (ojson의 var d) {oparent.children [d] .innerhtml = oparent.children [d] .innerhtml.replace (// $/{(/w+)/}/g, 함수 ($ 1) {return ojson [d] [$ 1]? ojson [d] [$ 1]); }} else {oparent.innerhtml = oparent.innerhtml.replace (// $/{(/w+)/}/g, function (str, $ 1) {return ojson [$ 1]? ojson [$ 1] : '';}); }}, // <%...%> templateEngine : function (html, 옵션) {html = html = html = html.replace (/(>) | (<)/g, 함수 (str, $ 1, $ 2) {switch (str) {case $ 1 : case $ 2 : return '}); var re =/<%([^%>]+)?%>/g, reexp =/(^()? var add = function (line, js) {js? (code + = line.match (reexp)? line + '/n': 'r.push (' + line + ');/n') : (code + = line! = ''? '?'r.push ( " ' + line.replace (/"/g,'// " ');/n': ''); 반환 추가; } 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 ( "");'; 새 함수를 반환합니다 (code.replace (/[/r/t/n]/g, ''). apply (옵션); }}1. 첫 번째 방법 : $ {key}
functionutil.loadjsondata (요소, 데이터);
"html"코드 :
<div id = "data"> <div> 이름 : $ {name} <br/> age : $ {age} <br/> 직업 : $ {job} <br/> <br/> </div> </div>자바 스크립트 코드 :
var data = [{name : 'xu lei', age : 24, job : 'it'}, {name : 'li lei', age : 23, job : 'translation'}]; 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 = "#"> Age : <%this.data [i]. <%this.data [i] .job%> </p> <br/> <%}}%> </div>자바 스크립트 코드 :
var person = {data : [{name : 'xu lei', age : 24, job : 'it'}, {name : 'li lei', age : 23, job : 'translation'}], 'transshow : isshow : true} document.getElementById ( "test3"). innerhtml = functionutil.templateByid (innerhtml, personhtbeid ( "test3”).결과:
위는이 기사의 전체 내용입니다. JavaScript 템플릿을 읽은 후 새로운 이해를 얻었습니까? 나는 당신이 그것을 좋아할 수 있기를 바랍니다.