Originalmente, eu queria compartilhar o lançamento da análise anterior do código -fonte do ArtTemplate, mas depois de um ano não consegui encontrá -lo, então tive que experimentar o princípio do mecanismo do modelo de análise na época.
O mecanismo de modelo de escrita compartilhou com você, deixando um memorial, lembrando que havia vários motores de modelo na época.
O mecanismo de modelo JS mencionado aqui usa a sintaxe JavaScript nativa, por isso é semelhante ao mecanismo de modelo nativo do PHP.
O papel do mecanismo de modelo frontal?
1. Pode facilitar o desenvolvimento da frente. ou um arquivo de modelo único
2. É fácil manter e reduzir o acoplamento.
3. Você pode cache. Quando se trata do arquivo .TPL, você não pode fazer apenas cache, você também pode ser um carregador de módulo
Use .tpl como um módulo, você pode carregar arquivos sob demanda.
4. Espere
O princípio do mecanismo de modelo frontal?
O princípio é muito simples que o objeto (dados) + modelo (incluindo variáveis) -> string (html)
Como alcançar o mecanismo de modelo frontal?
Ao analisar o modelo, de acordo com o método da palavra, o modelo é convertido em uma função e, em seguida, a função é chamada e o objeto (dados) é passado, e a sequência de saída (html)
(Claro, os específicos depende do código)
É assim:
Copie o código do código da seguinte forma:
Var tpl = 'eu sou <%= nome%>, <%= idade => anos';
var obj = {
Nome: 'Lovesueee',
Idade: 24
};
var fn = motor.compile (tpl);
var str = fn (obj);
exemplo:
Copie o código do código da seguinte forma:
<!
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> demonstração de gelo </title>
<script src = "/javascripts/jquery/jquery-1.7.2.js"> </script>
<script src = "/javascripts/ice/ice.js"> </script>
<Body>
<div id = "content"> </div>
</body>
<script type = "text/html" id = "tpl">
<div> Aqui está o resultado da renderização: </div>
<% = this.title ();%>
<borda da tabela = 1>
< % para (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "feminino") {
%>
<tr>
<TD> < %= tr.name;;
</tr>
< %} %>
< %} %>
</tabela>
<img src = "< %= this.href %>">
< %= this.include ('tpl2', isso);
</script>
<script type = "text/html" id = "tpl2">
<div> Aqui está o resultado da renderização: </div>
<% = this.print ('WelCom to Ice Modelo');%>
<borda da tabela = 1>
< % para (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "masculino") {
%>
<tr>
<TD> < %= tr.name;;
</tr>
< %} %>
< %} %>
</tabela>
<img src = "< %= this.href %>">
</script>
<Cript>
var teste = [
{nome: "assassino invisível", idade: 29, sexo: "masculino"},
{nome: "sora", idade: 22, sexo: "homens"},
{nome: "fesyo", idade: 23, sexo: "feminino"},
{Nome: "Love bo", idade: 18, sexo: "masculino"},
{nome: "izaki", idade: 25, sexo: "homens"},
{nome: "Você não entende", idade: 30, sexo: "mulheres"}
]
// var html = gelo ("tpl", {
// TRS: TRS,
// href: "http://images.vevb.com/type4.jpg"
//}, {
// título: function () {{
// retorna "<p> Esta é uma saída de peça de código usando o auxiliar de exibição </p>" "
//}
//});
var elem = document.getElementById ('TPL');
var tpl = elem.innerhtml;
var html = gelo (tpl, {
TRS: TRS,
href: "http://images.vevb.com/type4.jpg"
}, {
Título: function () {
Retorne "<p> Este é o código que usa o código fora do auxiliar </p>" ""
}
});
console.log (html);
$ ("#Content").
</script>
</html>
Implementação simples:
Copie o código do código da seguinte forma:
(Function (win) {
// Função de roteamento do motor de modelo
var ICE = function (id, conteúdo) {
Retornar gelo [
Typeof content === 'objeto'?
] .Apply (gelo, argumentos);
};
gelo.version = '1.0.0';
// Configuração do modelo
var iconfig = {
OPENTAG: '<%',
ClosetAg: '%>'
};
var isnewEngine = !! string.prototype.trim;
// cache do modelo
var iCache = Ice.cache = {};
// Função auxiliar
var ihelper = {
Incluir: function (id, dados) {
Return inder (id, dados);
},
Print: function (str) {
Retornar str;
}
};
// Herança de protótipo
var iextend = object.create || função (objeto) {{
Função fn () {};
Fn.prototype = objeto;
Devolver novo fn;
};
// Compilação de modelos
var icompile = gelo.compile = function (id, tpl, opções) {
var cache = nulo;
id && (cache = icache [id]);
if (cache) {
Retornar cache;
}
// [id |.
if (typeof tpl! == 'string') {
var elem = document.getElementById (id);
opções = tpl;
if (elem) {
// [id, opções]
opções = tpl;
Tpl = elem.value || elem.innerhtml;
} Outro {
// [TPL, opções]
Tpl = id;
id = null;
}
}
Opções = opções || {};
var render = iparse (tpl, opções);
id && (icache [id] = render);
Renderização de retorno;
};
// renderização de modelos
var irender = gelo.rener = function (id, dados, opções) {
Retornar icompile (id, opções) (dados);
};
var iforeach = array.prototype.foreach?
Função (arr, fn) {
Arr.ForEach (FN)
}:
Função (arr, fn) {
for (var i = 0; i <arn.length; i ++) {
fn (arr [i], i, arr)
}
};
// Análise de modelos
var iparse = function (tpl, opções) {
var html = [];
var js = [];
vargingag = options.opentag || iconfig ['opentag'];
var closetAg = options.closetag || iconfig ['closetAg'];
// Dependendo da adoção de diferentes estratégias de string de splicing do navegador
var substitui = isneweenGine
?
: ["var out = [], linha = 1;", "out.push (", ""); Juntar (''); "];;
// Corpo de função
var corpo = substitui [0];
iforeach (tpl.split (opentag), function (val, i) {{
se (! val)
Retornar;
}
Var partes = valor (closetag);
var cabeça = partes [0];
var pés = peças [1];
var len = peças.Length;
// html
if (len === 1) {
Corpo + = substitui [3] + html.length + substitui [4];
html.push (cabeça);
} Outro {
if (cabeça) {
// código
// Remova o espaço
Cabeça = cabeça
.Place (/^/s+|/s+$/g, '')
.place (/[/n/r]+/s*/, '')
// Declaração de saída
ifad.indexof ('=') === 0) {{
cabeça = head.substring (1) .ruplace (/^[/s]+| [/s;]+$/g, '');
Corpo + = substitui [1] + cabeça + substitui [2];
} Outro {
corpo += cabeça;
}
corpo += 'linha += 1;';
js.push (cabeça);
}
// html
if (pé) {
_foot = Foot.replace (/^[/n/r]+/s*/g, '');
if (! _foot) {
Retornar;
}
Corpo + = substitui [3] + html.length + substitui [4];
html.push (pé);
}
}
});
Body = "var render = function (dados) {gelo.mix (this, dados); tente {" "
+ Corpo
+ Substitui [5]
+ "} Catch (e) {Ice.log ('Erro de rend:', linha, 'linha'); ic.log ('declaração inválida:', js [linha-1]);
+ "Var proto = render.prototype = iextend (ihelper);"
+ "gelo.mix (proto, opções);"
+ "Função de retorno (dados) {retorna nova renderização (dados) .Result;};" ;;;;;;;;;
var render = nova função ('html', 'js', 'iextend', 'ihelper', 'opções', corpo);
Render renderização (html, js, iextend, ihelper, opções);
};
gelo.log = function () {{
if (typeof console === 'subfinado') {{
Retornar;
}
var args = array.prototype.slice.call (argumentos);
console.log.apply && console.log.apply (console, args);
};
// Mesclar objeto
gelo.mix = function (alvo, fonte) {
para (tecla var na fonte) {
if (fonte.hasownProperty (key)) {
Target [key] = fonte [chave];
}
}
};
// Função de registro
gelo.on = function (nome, fn) {
Ihelper [nome] = fn;
};
// Limpe o cache
gelo.clearcache = function () {
icache = {};
};
// Alterar a configuração
gelo.set = function (nome, valor) {
iconfig [nome] = value;
};
// interface de exposição
módulo IFOF!
module.exports = modelo;
} Outro {
win.ice = gelo;
}
}) (Janela);