À l'origine, je voulais partager la publication de l'analyse précédemment du code source Artimplate, mais après un an, je n'ai pas pu le trouver, j'ai donc dû essayer le principe du moteur du modèle d'analyse à l'époque.
Le moteur de modèle d'écriture a partagé avec vous, laissant un mémorial, se souvenant qu'il y avait plusieurs moteurs de modèle à l'époque.
Le moteur de modèle JS mentionné ici utilise la syntaxe JavaScript native, il est donc similaire au moteur de modèle natif de PHP.
Le rôle du moteur de modèle avant?
1. Il peut faciliter le développement du front-end. ou un fichier de modèle
2. Il est facile de maintenir et de réduire le couplage.
3. Vous pouvez être caché. En ce qui concerne le fichier .tpl, vous ne pouvez pas simplement cache, vous pouvez également être un chargeur de module
Utilisez .tpl comme module, vous pouvez alors charger des fichiers à la demande.
4. Attendez
Le principe du moteur de modèle avant?
Le principe est très simple que l'objet (données) + modèle (y compris les variables) -> String (html)
Comment réaliser le moteur de modèle avant?
En analysant le modèle, selon le mot méthode, le modèle est converti en une fonction, puis la fonction est appelée, et l'objet (données) est passé, et la chaîne de sortie (HTML)
(Bien sûr, ceux spécifiques dépend du code)
C'est comme ça:
Copier le code du code comme suit:
Var tpl = 'je suis <% = name%>, <% = Âge => ans';
var obj = {
Nom: «LoveSueee»,
Âge: 24
};
var fn = moteur.compile (TPL);
var str = fn (obj);
exemple:
Copier le code du code comme suit:
<!
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Demo Ice </Title>
<script src = "/javascripts/jquery/jquery-1.7.2.js"> </ script>
<script src = "/javascripts/ice/ice.js"> </ script>
<body>
<div id = "Content"> </div>
</docy>
<script type = "text / html" id = "tpl">
<div> Voici le résultat du rendu: </div>
<% = this.title ();%>
<Table Border = 1>
<% pour (var i = 0, tl = this.ts.length, tr; i <tl; i ++) {%>
<%
tr = this.trs [i];
if (tr.sex === "femelle") {
%>
<tr>
<td> <% = tr.name ;;
</tr>
<%}%>
<%}%>
</ table>
<img src = "<% = this.href%>">
<% = this.include ('tpl2', this);
</cript>
<script type = "text / html" id = "tpl2">
<div> Voici le résultat du rendu: </div>
<% = this.print ('welcom to ice modèle');%>
<Table Border = 1>
<% pour (var i = 0, tl = this.ts.length, tr; i <tl; i ++) {%>
<%
tr = this.trs [i];
if (tr.sex === "mâle") {
%>
<tr>
<td> <% = tr.name ;;
</tr>
<%}%>
<%}%>
</ table>
<img src = "<% = this.href%>">
</cript>
<cript>
var test = [
{nom: "Killer invisible", âge: 29 ans, sexe: "masculin"},
{nom: "Sora", âge: 22, sexe: "hommes"},
{nom: "fesyo", âge: 23 ans, sexe: "femme"},
{Nom: "Love Bo", âge: 18, sexe: "masculin"},
{nom: "Izaki", âge: 25, sexe: "hommes"},
{Nom: "Vous ne comprenez pas", âge: 30, sexe: "femmes"}
]]
// var html = glace ("tpl", {
// TRS: TRS,
// href: "http://images.vevb.com/type4.jpg"
//}, {
// title: function () {{
// Renvoie "<p> Il s'agit d'une sortie de pièce de code à l'aide de l'assistant de vue </p>" "
//}
//});
var elem = document.getElementById ('tpl');
var tpl = elem.innerhtml;
var html = glace (tpl, {
TRS: TRS,
href: "http://images.vevb.com/type4.jpg"
}, {
Titre: function () {
Return "<p> c'est le code qui utilise le code à partir de l'assistant de vue </p>" ""
}
});
console.log (html);
$ ("#Content").
</cript>
</html>
Implémentation simple:
Copier le code du code comme suit:
(Fonction (win) {
// Fonction de routage du moteur de modèle
var ice = fonction (id, contenu) {
Retourner la glace [
Typeof Content === 'Object'?
] .Apply (glace, arguments);
};
ice.version = '1.0.0';
// Configuration du modèle
var iconfig = {
OpenTag: «<%»,
placard: '%>'
};
var isnewEngine = !! string.prototype.trim;
// Cache de modèle
var icache = ice.cache = {};
// fonction auxiliaire
var ihelper = {
Inclure: fonction (id, données) {
Return irender (id, data);
},
Print: fonction (str) {
Retour STR;
}
};
// Héritage prototype
var iextend = object.create ||
Fonction fn () {};
Fn.prototype = objet;
Retourner le nouveau FN;
};
// Compilation de modèle
var icompile = ice.compile = fonction (id, tpl, options) {
var cache = null;
id && (cache = icache [id]);
if (cache) {
Cache de retour;
}
// [id |
if (typeof tpl! == 'String') {
var elem = document.getElementById (id);
Options = TPL;
if (elem) {
// [id, options]
Options = TPL;
Tpl = elem.value || elem.innerhtml;
} Autre {
// [TPL, Options]
Tpl = id;
id = null;
}
}
Options = Options || {};
var render = iParse (tpl, options);
id && (icache [id] = render);
Rendu de retour;
};
// Rendu du modèle
var irender = ice.rener = fonction (id, données, options) {
Return iCompile (id, options) (données);
};
var iforEach = array.prototype.ForEach?
Fonction (arr, fn) {
Arr.ForEach (FN)
}:
Fonction (arr, fn) {
pour (var i = 0; i <arr.length; i ++) {
fn (arr [i], i, arr)
}
};
// Analyse du modèle
var iParse = fonction (tpl, options) {
var html = [];
var js = [];
vargingAg = options.opentag || iconfig ['opentag'];
var ralatetag = options.closetag || iconfig ['rosetag'];
// En fonction du navigateur, adoptez différentes stratégies de chaîne d'épissage
var remplace = isneweengine
? ["var out = '', ligne = 1;", "out +", ";";
: ["var out = [], line = 1;", "out.push (", ","); "out.push (html [", "); Rejoindre (''); "];;
// Corps de fonction
var corps = remplace [0];
iforEach (tpl.split (opentag), fonction (val, i) {{
si (! Val)
Retour;
}
var parties = valeur (placard);
var head = pièces [0];
Var Foot = pièces [1];
var len = part.length;
// html
if (len === 1) {
Body + = remplace [3] + html.length + remplace [4];
html.push (tête);
} Autre {
if (tête) {
// code
// Retirez l'espace
Tête = tête
.replace (/ ^ / s + | / s + $ / g, '')
.replace (/ [/ n / r] + / s * /, '')
// Instruction de sortie
ifad.indexof ('=') === 0) {{
head = head.substring (1) .ruplace (/ ^ [/ s] + | [/ s;] + $ / g, '');
Corps + = remplace [1] + la tête + remplace [2];
} Autre {
corps + = tête;
}
corps + = 'ligne + = 1;';
JS.Push (tête);
}
// html
if (pied) {
_foot = foot.replace (/ ^ [/ n / r] + / s * / g, '');
if (! _foot) {
Retour;
}
Body + = remplace [3] + html.length + remplace [4];
html.push (pied);
}
}
});
Body = "var render = function (data) {ice.mix (this, data); try {" "
+ Corps
+ Remplace [5]
+ "} catch (e) {ice.log ('Rend Error:', line, 'line'); ic.log ('instruction invalide:', js [line-1]);
+ "Var proto = render.prototype = iextend (iHelper);"
+ "ice.mix (proto, options);"
+ "Fonction de retour (données) {return new render (data) .result;};" ;;;;;;;;;
var render = nouvelle fonction ('html', 'js', 'iextend', 'ihelper', 'options', body);
Return render (html, js, iextend, ihelper, options);
};
ice.log = function () {{
if (typeof console === 'Underfined') {{
Retour;
}
var args = array.prototype.slice.call (arguments);
console.log.apply && console.log.apply (console, args);
};
// fusionner l'objet
ice.mix = fonction (cible, source) {
pour (clé var dans la source) {
if (source.hasownproperty (key)) {
Target [key] = source [key];
}
}
};
// Enregistrer la fonction
ice.on = fonction (nom, fn) {
IHelper [name] = fn;
};
// effacer le cache
ice.clearcache = function () {
icache = {};
};
// modifie la configuration
ice.set = fonction (nom, valeur) {
iconfig [name] = valeur;
};
// Interface d'exposition
Module ifof! == 'Undefined' && module.exports) {
module.exports = modèle;
} Autre {
win.ice = glace;
}
}) (Fenêtre);