/ ** * Créé par l'administrateur le 15-1-19. * / fonction functionUtil () {} functionUtil = {// Un nœud DOM a-t-il un certain attribut HasAttr: function (el, name) {var attR = el.getAttributeNode && el.getAttributeNode (name); return att? attR.specified: false}, // Obtenez l'élément en fonction de la classe GetByClass: fonction (sclass, oparent) {oparent = oparent || document; 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; }, // Ajouter dynamiquement Stylesheet AddSheetFile: fonction (path) {var fileref = document.createElement ("link") fileref.rel = "Stylesheet"; fileref.type = "text / css"; fileref.href = path; fileref.media = "écran"; var headobj = document.getElementsByTagName ('Head') [0]; Headobj.ApendChild (FileRef); }, // lier les données JSON en fonction du format spécifié tel que $ {name} LoadJSondata: function (sparent, ojson) {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; } pour (var d dans ojson) {oparent.children [d] .innerhtml = oparent.children [d] .innerhtml.replace (// $ / {(/ w +) /} / g, fonction (str, 1 1) {return ojson [d] [1]? ojson [d] [1 1]: '';}); }} else {oparent.innerhtml = oparent.innerhtml.replace (// $ / {(/ w +) /} / g, fonction (str, 1) {return ojson [$ 1]? ojson [1 1]: '';}); }}, // lier les données JSON en fonction du format spécifié tel que <% ...%> templateEngine: function (html, options) {html = html.replace (/ (>) | (<) / g, function (str, 1 1, 2) {switch (str) {case 1: return '>'; case 2: return '<'; var re = / <% ([^%>] +)?%> / g, reexp = / (^ ()? (si | pour | else | switch | case | Break | {|})) (. *)? / g, code = 'var r = []; / n', cursor = 0; var add = fonction (ligne, js) {js? (code + = line.match (reexp)? line + '/ n': 'r.push (' + line + '); / n'): (code + = line! = ''? 'r.push ("' + 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 (curseur, html.length - curseur)); code + = 'return r.join ("");'; return nouvelle fonction (code.replace (/ [/ r / t / n] / g, '')). Appliquer (options); }}1. La première méthode: $ {key}
functionUtil.loadjSondata (élément, données);
Code "html":
<div id = "data"> <div> name: $ {name} <br/> Âge: $ {age} <br/> Occupation: $ {job} <br/> <br/> </div> </div>Code javascript:
var data = [{name: 'xu lei', Âge: 24, travail: 'it'}, {name: 'li lei', âge: 23, travail: 'traduction'}]; functionutil.loadjsondata ('data', données);Résultats de l'exécution:
2. La deuxième méthode <% Code%>
functionUtil.TemplateEngine (String, Object);
Code "html":
<div id = "test3"> <% if (this.isshow) {for (var i in this.data) {%> <p href = "#"> name: <% this.data [i] .name%> </p> <p href = "#"> Âge: <% this.data [i] .age %> </p> <p href = "#> work: <% this.data [i] .job%> </p> <br/> <%}}%> </div>Code javascript:
var person = {data: [{nom: 'xu lei', Âge: 24, travail: 'it'}, {name: 'li lei', Âge: 23, travail: 'traduction'}], iSShow: true} document.getElementByid ("test3").résultat:
Ce qui précède est l'intégralité du contenu de cet article. Avez-vous acquis une nouvelle compréhension des modèles JavaScript après l'avoir lu? J'espère que vous pouvez l'aimer.