/*** Erstellt vom Administrator am 15.11.19. */function FunctionUtil () {} functionUtil = {// hat ein DOM -Knoten ein bestimmtes Attribut hasAttr: function (el, name) {var attr = el.getAttributenode && el.getAttributenode (Name); Rückkehrat? attr.specified: false}, // das Element gemäß der Klasse GetByClass: Funktion (sclass, oparent) {oparent = oparent || dokumentieren; 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] | $)'); für (var i = 0; i <aele.length; i ++) {if (reg.test (aele [i] .ClassName)) {arr.push (aELe [i]); }} return arr; }, // dynamisch Stylesheet AddsheetFile: Funktion (Pfad) {var fileRef = document.createelement ("link") fileRef.rel = "Stylesheet"; fileRef.type = "text/css"; fileRef.href = path; fileRef.Media = "screen"; var headObj = document.getElementsByTagName ('Kopf') [0]; Headobj.AppendChild (fileRef); }, // JSON -Daten gemäß dem angegebenen Format wie $ {name} loadjsondata: function (sparent, ojson) {var oparent = document.getElementById (sparent); if (Ojson -Instanz von Array) {var str = oparent.innerhtml; für (var i = 0; i <ojson.length - 1; i ++) {oparent.innerhtml+= str; } für (var d in ojson) {oparent.Children [d] .innerhtml = oparent.Children [d] .innerhtml.Replace (// $/{(/w+)/}/g, function (str, $ 1) {{{$ ojson [d] [$ 1]? }} else {oparent.innerHtml = oparent.innerhtml.replace (// $/{(/w+)/}/g, function (str, $ 1) {return ojson [$ 1]? Ojson [$ 1]: ';}); }}. var re =/<%([^%>]+)?%>/g, reexp =/(^()? (Wenn | für | sonst | switch | case | break | {|}) (.*)?/g, code = 'var r = [];/n', Cursor = 0; var add = function (line, js) {js? (code + = line.match (reexp)? Zeile + '/n': 'r.push (' + line + ');/n'): (code + = line! = ''? 'r.push ("' + line Rückgabe hinzufügen; } 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 ("");'; Neue Funktion zurückgeben (Code.Replace (/[/r/t/n]/g, ''). anwenden (Optionen); }}1. Die erste Methode: $ {key}
functionUtil.loadjsondata (Element, Daten);
"HTML" -Code:
<div id = "data"> <div> Name: $ {name} <br/> Alter: $ {Alter} <br/> Beruf: $ {Job} <br/> <br/> </div> </div>JavaScript -Code:
var data = [{name: 'xu Lei', Alter: 24, Job: 'it'}, {name: 'li lei', Alter: 23, Job: 'Übersetzung'};Ausführungsergebnisse:
2. Die zweite Methode < % Code %>
functionUtil.templateEngine (String, Objekt);
"HTML" -Code:
<div id = "test3"> <%if (this.isshow) {für (var i in this.data) {%> <p href = "#"> name: <%that.data [i] .Name%> </p> <p href = "#"> Alter: <%this <%this.data [i] .job%> </p> <br/> <%}}%> </div>JavaScript -Code:
var person = {data: [{name: 'xu lei', Alter: 24, Job: 'it'}, {name: 'li lei', Alter: 23, Job: 'Übersetzung'}], isShow: true} document.getElementById ("test3"). InnerHtml = FunktionUtil.Ergebnis:
Das obige ist der gesamte Inhalt dieses Artikels. Haben Sie nach dem Lesen ein neues Verständnis der JavaScript -Vorlagen erhalten? Ich hoffe es kann dir gefallen.