/*** Creado por el administrador el 15-1-19. */function functionUtil () {} functionUtil = {// ¿Un nodo DOM tiene un cierto atributo Hasattr: function (el, name) {var att = el.getTtributeNode && el.getTtributeNode (name); ¿RETURN ATTR? attr.specified: false}, // Obtener el elemento de acuerdo con la clase GetByClass: function (sclass, oparent) {oparent = oparent || documento; 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; }, // Agregar dinámicamente Stylesheet addsheetFile: function (path) {var fileF = document.createElement ("enlace") fileRef.rel = "Stylesheet"; FileRef.Type = "Text/CSS"; fileRef.href = ruta; fileRef.media = "pantalla"; var headobj = document.getElementsByTagName ('Head') [0]; Headobj.AppendChild (FileRef); }, // Bind Data JSON de acuerdo con el formato especificado, como $ {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; } para (var d en ojson) {oparent.children [d] .innerhtml = oparent.children [d] .innerhtml.replace (// $/{(/w+)/}/g, function (str, $ 1) {return ojson [d] [$ 1]? ojson [d] [$ 1]: ''; }} else {oparent.innerhtml = oparent.innerhtml.replace (// $/{/w+)/}/g, función (str, $ 1) {return ojson [$ 1]? ojson [$ 1]: '';}); }}, // Bind JSON Data de acuerdo con el formato especificado, como <%...%> TemplateEngine: function (html, options) {html = html.replace (/(>) | (<)/g, function (str, $ 1, $ 2) {strike (str) {case $ 1: return '>'; case $ 2: return '<';}); var re =/<%([^%>]+)?%>/g, reexp =/(^()? (if | for | else | switch | case | break | {|})) (.*)?/g, code = 'var r = [];/n', cursor = 0; var add = function (línea, js) {js? (código + = line.match (reexp)? Line + '/n': 'r.push (' + line + ');/n'): (code + = line! = '' '?' r.push ("' + line.replace (/"/g,' // ") + '");/n': ''); devolver agregar; } 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)); código += 'return r.Join ("");'; devolver nueva función (code.replace (/[/r/t/n]/g, '')). Aplicar (opciones); }}1. El primer método: $ {clave}
functionUtil.loadjSondata (elemento, datos);
Código "HTML":
<div id = "data"> <div> name: $ {name} <br/> edad: $ {edad} <br/> ocupación: $ {trabajo} <br/> <br/> </div> </div>Código JavaScript:
var data = [{nombre: 'Xu lei', edad: 24, trabajo: 'it'}, {nombre: 'li lei', edad: 23, trabajo: 'traducción'}]; functionUtil.loadjSondata ('data', data);Resultados de la ejecución:
2. El segundo método < % código %>
functionUtil.templateEngine (string, object);
Código "HTML":
<div id = "test3"> <%if (this.isshow) {for (var i en this.data) {%> <p href = "#"> nombre: <%this.data [i] .name%> </p> <p href = "#"> edad: <%.data [i] .age%> </p> <p href = "#"> trabajo: <%this.data [i] .job%> </p> <br/> <%}}%> </div>Código JavaScript:
var persona = {datos: [{nombre: 'Xu lei', edad: 24, trabajo: 'it'}, {name: 'li lei', edad: 23, trabajo: 'traducción'}], isshow: true} document.getElementById ("test3"). innerhtml = functionUtil.templateEngine (document.getgetElementById ("test3"). innerhtml = FunctionIl.templateEngine (document.getEngetElementById ("test3"). Innerhtml = FunctionIl.resultado:
Lo anterior es todo el contenido de este artículo. ¿Ha obtenido una nueva comprensión de las plantillas de JavaScript después de leerlo? Espero que te pueda gustar.