/*** 15-1-19に管理者によって作成されました。 */function functionutil（）{} functionutil = {// domノードには特定の属性を持っていますか？タートアット？ attr.specified：false}、// class getbyclass：function（sclass、ofarent）{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（ '（^| [// x20 // t // r/n // f]）' + sclass + '（[// x20 // t // r // n // f] | $）'）; for（var i = 0; i <aele.length; i ++）{if（reg.test（aele [i] .classname））{arr.push（aele [i]）; }} return arr; }、// styleSheet addsheetfile：function（path）{var fileref = document.createelement（ "link"）fileref.rel = "styleSheet"; fileref.type = "text/css"; fileref.href = path; fileref.media = "screen"; var headobj = document.getElementsByTagname（ 'head'）[0]; headobj.appendChild（fileref）; }、// $ {name} loadjsondata：function（sparent、ojson）などの指定された形式に従ってjsonデータをバインドします{var oparent = document.getelementbyid（sparent）; if（ojson instance of array）{var str = oparent.innerhtml; for（var i = 0; i <ojson.length -1; i ++）{oparent.innerhtml+= str; } for（ojsonのvar d）{oparent.children [d] .innerhtml = oparent.children [d] .innerhtml.replace（// $/{（/w+）/}/g、function（str、$ 1）{return ojson [d]？ojson [$ 1]; }} else {oparent.innerhtml = oparent.innerhtml.replace（// $/{（/w+）/}/g、function（str、$ 1）{return ojson [$ 1]？ojson [$ 1]： '';}）; }}、// <％...％> templateEngine：function（html、options）{html = html.Replace（/（>）|（<）/g、function（str、$ 1、$ 2）{stlide（str）{switch（str）{case $ 1：return '; case $ 2： 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 '：' '）; 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（ ""）;';新しい関数（code.replace（/[/r/t/n]/g、 ''））を返します。適用（オプション）; }}1。最初の方法：$ {key}
functionutil.loadjsondata（要素、データ）;
「HTML」コード：
<div id = "data"> <div> name：$ {name} <br/> age：$ {age} <br/> courdocion：$ {job} <br/> <br/> </div> </div>JavaScriptコード：
var data = [{name： 'xu lei'、age：24、job： 'it'}、{name： 'li lei'、age：23、job： 'translation'}]; functionutil.loadjsondata（ 'data'、data）;実行結果：
2。2番目の方法<％コード％>
functionutil.templateEngine（string、object）;
「HTML」コード：
<div id = "test3"> <％if（this.isshow）{for（var i in this.data）{％> <p href = "＃"> name：<％this.data [i] .name％> </p> <p href = "＃"> age：<％this.data [i]。 <％this.data [i] .job％> </p> <br/> <％}}％> </div>JavaScriptコード：
var person = {data：[{name： 'xu lei'、age：age：job： 'it'}、{name： 'li lei'、age：23、job： 'translation'}]、isshow：true} document.getElementbyid（ "test3"）。結果：
上記は、この記事のコンテンツ全体です。 JavaScriptテンプレートを読んだ後、JavaScriptテンプレートの新しい理解を得ましたか？気に入っていただければ幸いです。