/*** Dibuat oleh Administrator pada 15-1-19. */function functionUtil () {} functionUtil = {// Apakah simpul DOM memiliki atribut tertentu hasattr: function (el, name) {var attr = el.getattributeNode && el.getattributeNode (name); mengembalikan attr? attr.specified: false}, // Dapatkan elemen menurut kelas getByclass: function (sclass, oparent) {oparent = oparent || dokumen; if (! Oparent.getElementsByClassName) {return oparent.getElementsbyClassName (sclass); } var arr = []; var aele = oparent.getElementsbyTagname ('*'); var reg = regexp baru ('(^| // s)' + sclass + '(// s | $)'); // var reg = regexp baru ('(^| [// x20 // t // r/n // f])' + sclass + '([// x20 // t // r // n // f] | $)'); untuk (var i = 0; i <aele.length; i ++) {if (reg.test (aele [i] .className)) {arr.push (aele [i]); }} return arr; }, // secara dinamis menambahkan stylesheet addsheetFile: function (path) {var fileref = document.createElement ("link") fileref.rel = "stylesheet"; fileref.type = "text/css"; fileref.href = path; fileref.media = "layar"; var headobj = document.geteLementsByTagname ('head') [0]; headobj.appendchild (fileref); }, // Bind JSON Data sesuai dengan format yang ditentukan seperti $ {name} loadjsondata: function (sparent, ojson) {var oparent = document.getElementById (sparent); if (ojson instance array) {var str = oparent.innerHtml; untuk (var i = 0; i <ojson.length - 1; i ++) {oparent.innerHtml+= str; } untuk (var d di ojson) {oparent.children [d] .innerHtml = oparent.children [d] .innerHtml.replace (// $/{(/w+)/}/g, fungsi (str, $ 1) {return ojson [d] [$ 1]? }} else {oparent.innerHtml = oparent.innerhtml.replace (// $/{(/w+)/}/g, fungsi (str, $ 1) {return ojson [$ 1]? Ojson [$ 1]: '';}); }}, // Bind JSON Data sesuai dengan format yang ditentukan seperti <%...%> templatEngine: function (html, opsi) {html = html.replace (/(>) | (<)/g, fungsi (str, $ 1, $ 2) {switch (str) {case $ 1: return '>; var re =/<%([^%>]+)?%>/g, reexp =/(^()? (if | for | else | switch | case | break | {|})) (.*)?/g, kode = 'var r = [];/n', kursor = 0; var add = function (baris, js) {js? (kode + = line.match (reexp)? line + '/n': 'r.push (' + line + ');/n'): (kode + = line! = ''? 'r.push ("' + line.replace (/"/g, '// "') + ');/n': ''); Kembalikan Tambah; } while (match = re.exec (html)) {add (html.slice (kursor, match.index)) (match [1], true); kursor = match.index + match [0] .length; } add (html.substr (kursor, html.length - kursor)); kode += 'return r.join ("");'; mengembalikan fungsi baru (code.replace (/[/r/t/n]/g, '')). Terapkan (opsi); }}1. Metode pertama: $ {key}
functionutil.loadjsondata (elemen, data);
Kode "html":
<Div id = "Data"> <div> Nama: $ {name} <br/> Umur: $ {usia} <br/> pekerjaan: $ {job} <br/> <br/> </div> </div>Kode JavaScript:
var data = [{name: 'xu lei', usia: 24, pekerjaan: 'it'}, {name: 'li lei', usia: 23, pekerjaan: 'terjemahan'}]; functionutil.loadjsondata ('data', data);Hasil Eksekusi:
2. Metode kedua < % kode %>
functionutil.templateEngine (string, objek);
Kode "html":
<Div id = "test3"> <%if (this.isshow) {for (var i in this.data) {%> <p href = "#"> Nama: <%this.data [i] .name%> </p> <p href = "#"> usia: <%this.data [i]. <%this.data [i] .job%> </p> <br/> <%}}%> </div>Kode JavaScript:
var person = {data: [{name: 'xu lei', usia: 24, job: 'it'}, {name: 'li lei', usia: 23, job: 'terjemahan'}], isShow: true} document.geteLementById ("test3"). innhtml = function.templateengin ("test3").hasil:
Di atas adalah seluruh konten artikel ini. Sudahkah Anda mendapatkan pemahaman baru tentang templat JavaScript setelah membacanya? Saya harap Anda bisa menyukainya.