Originalmente quería compartir el lanzamiento del análisis previamente del código fuente de ArtTemplate, pero después de un año, no pude encontrarlo, así que tuve que probar el principio de la plantilla de análisis en ese momento.
El motor de plantilla de escritura compartió con usted, dejando un monumento, recordando que había varios motores de plantilla en ese momento.
El motor de plantilla JS mencionado aquí usa la sintaxis nativa de JavaScript, por lo que es similar al motor de plantilla nativo de PHP.
¿El papel del motor de plantilla delantera?
1. Puede facilitar el desarrollo del frente. o un archivo de una plantilla
2. Es fácil mantener y reducir el acoplamiento.
3. Puede almacenar en caché. Cuando se trata del archivo .tpl, puede no solo caché, también puede ser un cargador de módulos
Use .TPL como módulo, luego puede cargar archivos a pedido.
4. Espera
¿El principio del motor de plantilla delantera?
El principio es muy simple que el objeto (datos) + plantilla (incluidas las variables) -> cadena (html)
¿Cómo lograr el motor de plantilla delantero?
Al analizar la plantilla, de acuerdo con el método de la palabra, la plantilla se convierte en una función, y luego se llama la función, y se pasa el objeto (datos), y la cadena de salida (html)
(Por supuesto, los específicos dependen del código)
Es así:
Copiar código del código de la siguiente manera:
Var tpl = 'I Am <%= Name%>, <%= Age => años antiguo';
var obj = {
Nombre: 'lovesueee',
Edad: 24
};
var fn = motor.compile (tpl);
var str = fn (obj);
ejemplo:
Copiar código del código de la siguiente manera:
<!
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Demo de hielo </title>
<script src = "/javascripts/jquery/jquery-1.7.2.js"> </script>
<script src = "/javascripts/ice/ice.js"> </script>
<Body>
<div id = "contenido"> </div>
</body>
<script type = "text/html" id = "tpl">
<Div> Aquí está el resultado de renderizado: </div>
<% = this.title ();%>
<border de tabla = 1>
< % para (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "femenino") {
%>
<tr>
<TD> < %= tr.name ;;
</tr>
< %} %>
< %} %>
</table>
<img src = "< %= this.href %>">
< %= this.include ('tpl2', this);
</script>
<script type = "text/html" id = "tpl2">
<Div> Aquí está el resultado de renderizado: </div>
<% = this.print ('Welcom to Ice Plantilla');%>
<border de tabla = 1>
< % para (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "macho") {
%>
<tr>
<TD> < %= tr.name ;;
</tr>
< %} %>
< %} %>
</table>
<img src = "< %= this.href %>">
</script>
<script>
prueba var = [
{nombre: "asesino invisible", edad: 29, sexo: "masculino"},
{Nombre: "Sora", edad: 22, sexo: "hombres"},
{nombre: "Fesyo", edad: 23, sexo: "mujer"},
{Nombre: "Love Bo", Edad: 18, Sexo: "Hombre"},
{nombre: "Izaki", edad: 25, sexo: "hombres"},
{Nombre: "No entiendes", edad: 30, sexo: "mujeres"}
]
// var html = Ice ("tpl", {
// TRS: TRS,
// href: "http://images.vevb.com/type4.jpg"
//}, {
// título: function () {{
// return "<p> Esta es una salida de pieza de código utilizando el View Helper </p>" "
//}
//});
var elem = document.getElementById ('tpl');
var tpl = elem.innerhtml;
var html = Ice (tpl, {
TRS: TRS,
href: "http://images.vevb.com/type4.jpg"
}, {
Título: function () {
Return "<p> Este es el código que usa el código de vista auxiliar de vista </p>" "" "
}
});
console.log (html);
$ ("#Content").
</script>
</html>
Implementación simple:
Copiar código del código de la siguiente manera:
(Función (win) {
// Función de enrutamiento del motor de plantilla
var Ice = function (id, content) {
Regresar hielo [
TypeoF Content === 'Object'?
] .Apply (hielo, argumentos);
};
Ice.version = '1.0.0';
// Configuración de plantilla
var iconfig = {
Opentag: '<%',
Closetag: '%>'
};
var isnewengine = !!
// Cache de plantilla
var icache = Ice.cache = {};
// función auxiliar
var ihelper = {
Incluir: función (id, datos) {
Return Irender (ID, datos);
},
Print: function (str) {
Regresar str;
}
};
// herencia prototipo
var iextend = object.create ||
Función fn () {};
Fn.prototype = objeto;
Devolver nuevo FN;
};
// compilación de plantillas
var icompile = Ice.compile = function (id, tpl, opciones) {
var cacheo = nulo;
id && (cache = icache [id]);
if (cache) {
Return Cache;
}
// [ID |
if (typeof tpl! == 'string') {
var elem = document.getElementById (id);
opciones = tpl;
if (elem) {
// [id, opciones]
opciones = tpl;
Tpl = elem.value || elem.innerhtml;
} Demás {
// [tpl, opciones]
Tpl = id;
id = nulo;
}
}
opciones = opciones ||
var render = iParse (tpl, opciones);
id && (icache [id] = render);
Render de regreso;
};
// Representación de plantillas
var irender = ice.rener = function (id, datos, opciones) {
Return icompile (id, opciones) (datos);
};
var iforeach = array.prototype.forEach?
Función (arr, fn) {
Arr.foreach (fn)
}:
Función (arr, fn) {
para (var i = 0; i <arr.length; i ++) {
fn (arr [i], i, arr)
}
};
// Análisis de plantillas
var iParse = function (tpl, options) {
var html = [];
var js = [];
vargingag = options.opentag ||
var closetag = options.CloSetag ||
// Dependiendo de las diferentes estrategias de cadena de empalme del navegador
Var reemplaza = isNeweengine
? ["var out = '', línea = 1;", "out+=", ";";
: ["var out = [], línea = 1;", "out.push (", ","); Unirse (''); "];;
// Funcionar cuerpo
VAR BODY = reemplaza [0];
iforeach (tpl.split (opentag), function (val, i) {{
if (! val)
Devolver;
}
VAR Parts = Value (closetag);
Var head = partes [0];
Var Foot = Parts [1];
var len = parts.length;
// html
if (len === 1) {
Cuerpo + = reemplaza [3] + html.length + reemplaza [4];
html.push (cabeza);
} Demás {
if (head) {
// código
// Retire el espacio
Cabeza = cabeza
Replace (/^/s+|/s+$/g, '')
.replace (/[/n/r]+/s*/, '')
// Declaración de salida
ifad.indexof ('=') === 0) {{
head = head.substring (1) .ruplace (/^[/s]+| [/s;]+$/g, '');
Cuerpo + = reemplaza [1] + cabeza + reemplaza [2];
} Demás {
cuerpo += cabeza;
}
cuerpo += 'línea += 1;';
js.push (cabeza);
}
// html
if (foot) {
_foot = foot.replace (/^[/n/r]+/s*/g, '');
if (! _foot) {
Devolver;
}
Cuerpo + = reemplaza [3] + html.length + reemplaza [4];
html.push (pie);
}
}
});
Body = "var render = function (data) {Ice.mix (this, data); try {" "
+ Cuerpo
+ Reemplaza [5]
+ "} catch (e) {ice.log ('Rend Error:', Line, 'Line'); ic.log ('Declaración inválida:', js [línea-1]);
+ "Var proto = render.prototype = iextend (ihelper);"
+ "Ice.mix (proto, opciones);"
+ "Función de retorno (datos) {return new render (datos) .result;};" ;;;;;;;;;
var render = nueva función ('html', 'js', 'iExtend', 'ihelper', 'opciones', cuerpo);
Return render (html, js, iextend, ihelper, opciones);
};
Ice.log = function () {{
if (typeof console === 'subfined') {{
Devolver;
}
var args = array.prototype.slice.call (argumentos);
console.log.apply && console.log.apply (console, args);
};
// Fusionar objeto
Ice.mix = function (target, fuente) {
for (clave var en la fuente) {
if (fuente.hasownproperty (key)) {
objetivo [clave] = fuente [clave];
}
}
};
// Función de registro
Ice.on = function (nombre, fn) {
Ihelper [nombre] = fn;
};
// borrar el caché
ICE.CLEARCACHE = function () {
icache = {};
};
// Cambiar la configuración
Ice.set = function (nombre, valor) {
iconfig [nombre] = valor;
};
// interfaz de exposición
IFOF MODULE!
MODULE.EXPORTS = TEMPLATE;
} Demás {
win.ice = hielo;
}
}) (Ventana);