Saya awalnya ingin berbagi rilis analisis kode sumber arttemplate yang sebelumnya, tetapi setelah satu tahun, saya tidak dapat menemukannya, jadi saya harus mencoba prinsip mesin Template Analisis pada saat itu.
Mesin Template Writing berbagi dengan Anda, meninggalkan peringatan, mengingat bahwa ada beberapa mesin templat pada saat itu.
Mesin Template JS yang disebutkan di sini menggunakan sintaks JavaScript asli, sehingga mirip dengan mesin template asli PHP.
Peran mesin template front -end?
1. Ini dapat membuat pengembangan depan lebih mudah. atau file satu template
2. Sangat mudah untuk mempertahankan dan mengurangi kopling.
3. Anda dapat cache. Ketika datang ke file .tpl, Anda tidak bisa hanya cache, Anda juga bisa menjadi pemuat modul
Gunakan .TPL sebagai modul, maka Anda dapat memuat file sesuai permintaan.
4. Tunggu
Prinsip mesin template depan -end?
Prinsipnya sangat sederhana bahwa objek (data) + templat (termasuk variabel) -> string (html)
Bagaimana cara mencapai mesin template depan -end?
Dengan mem -parsing templat, sesuai dengan metode kata, templat diubah menjadi fungsi, dan kemudian fungsi dipanggil, dan objek (data) dilewatkan, dan string output (html)
(Tentu saja, yang spesifik tergantung pada kode)
Ini seperti ini:
Salin kode kode sebagai berikut:
Var tpl = 'Saya <%= nama%>, <%= usia => tahun';
var obj = {
Nama: 'Lovesueee',
Umur: 24
};
var fn = engine.
var str = fn (obj); // string rendering
contoh:
Salin kode kode sebagai berikut:
<!
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8">
<title> Demo es </iteme>
<Script src = "/JavAscripts/jQuery/jquery-1.7.2.js"> </script>
<skrip src = "/javaScripts/ice/ice.js"> </cript>
<body>
<Div id = "Content"> </div>
</body>
<type skrip = "teks/html" id = "tpl">
<div> Berikut adalah hasil render: </div>
<% = this.title ();%>
<tabel perbatasan = 1>
< % untuk (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "betina") {
%>
<tr>
<td> < %= tr.name ;;
</tr>
< %} %>
< %} %>
</boable>
<img src = "< %= this.href %>">
< %= this.include ('tpl2', ini);
</script>
<type skrip = "text/html" id = "tpl2">
<div> Berikut adalah hasil render: </div>
<% = this.print ('Welcom to Ice Template');%>
<tabel perbatasan = 1>
< % untuk (var i = 0, tl = this.trs.length, tr; i <tl; i ++) { %>
<%
tr = this.trs [i];
if (tr.sex === "jantan") {
%>
<tr>
<td> < %= tr.name ;;
</tr>
< %} %>
< %} %>
</boable>
<img src = "< %= this.href %>">
</script>
<script>
var test = [
{name: "Invisible Killer", usia: 29, seks: "pria"},
{name: "sora", usia: 22, seks: "pria"},
{name: "fesyo", usia: 23, seks: "wanita"},
{name: "Love Bo", usia: 18, seks: "pria"},
{name: "izaki", usia: 25, seks: "pria"},
{name: "You Don't Loing", usia: 30, seks: "wanita"}
]
// var html = ice ("tpl", {
// TRS: TRS,
// href: "http://images.vevb.com/type4.jpg"
//}, {
// title: function () {{
// return "<p> Ini adalah output potongan kode menggunakan Helper View </p>" "
//}
//});
var elem = document.geteLementById ('tpl');
var tpl = elem.innerhtml;
var html = es (tpl, {
TRS: TRS,
href: "http://images.vevb.com/type4.jpg"
}, {
Judul: function () {
Kembalikan "<p> Ini adalah kode yang menggunakan kode keluar dari penampil tampilan </p>" ""
}
});
Console.log (html);
$ ("#Content").
</script>
</html>
Implementasi sederhana:
Salin kode kode sebagai berikut:
(Function (win) {
// fungsi perutean mesin template
var es = fungsi (id, konten) {
Membalas es [
Tipe konten === 'objek'?
] .Apply (es, argumen);
};
es.version = '1.0.0';
// Konfigurasi template
var iconfig = {
OpenTag: '<%',
Closetag: '%>'
};
var isNewEngine = !!
// Template Cache
var icache = ice.cache = {};
// fungsi tambahan
var ihelper = {
Termasuk: fungsi (id, data) {
Return irender (id, data);
},
Print: function (str) {
Mengembalikan str;
}
};
// prototipe warisan
var iextend = Object.Create ||
Function fn () {};
Fn.prototype = objek;
Mengembalikan FN baru;
};
// Kompilasi template
var icompile = ice.compile = function (id, tpl, opsi) {
var cache = null;
id && (cache = icache [id]);
if (cache) {
Mengembalikan cache;
}
// [ID |.
if (typeof tpl! == 'string') {
var elem = document.geteLementById (id);
opsi = tpl;
if (elem) {
// [id, opsi]
opsi = tpl;
Tpl = elem.value || elem.innerhtml;
} Kalau tidak {
// [tpl, opsi]
Tpl = id;
id = null;
}
}
opsi = opsi || {};
var render = iparse (tpl, opsi);
id && (icache [id] = render);
Render render;
};
// rendering template
var irender = ice.rener = fungsi (id, data, opsi) {
Mengembalikan icompile (id, opsi) (data);
};
var iforeach = array.prototype.foreach?
Function (arr, fn) {
Arr.foreach (fn)
}:
Function (arr, fn) {
untuk (var i = 0; i <arr.length; i ++) {
fn (arr [i], i, arr)
}
};
// analisis template
var iparse = function (tpl, opsi) {
var html = [];
var js = [];
VARGINGAG = Options.Opentag ||
var closetag = options.closetag ||
// tergantung pada browser yang mengadopsi strategi string splicing yang berbeda
var menggantikan = isNeweengine
["Var out = '', line = 1;", "out+=", ";";
: "var out = [], baris = 1;", "out.push (", ","); Bergabung (''); "];;
// Tubuh fungsi
var body = menggantikan [0];
iforeach (tpl.split (opentag), function (val, i) {{{{{{{{
if (! val)
Kembali;
}
var bagian = nilai (closetag);
var head = bagian [0];
var kaki = bagian [1];
var len = parts.length;
// html
if (len === 1) {
Body + = mengganti [3] + html.length + menggantikan [4];
html.push (kepala);
} Kalau tidak {
if (head) {
// Kode
// Lepaskan ruang
Kepala = kepala
.replace (/^/s+|/s+$/g, '')
.replace (/[/n/r]+/s*/, '')
// Pernyataan keluaran
ifad.indexof ('=') === 0) {{
head = head.substring (1) .ruplace (/^[/s]+| [/s;]+$/g, '');
Body + = menggantikan [1] + head + menggantikan [2];
} Kalau tidak {
tubuh += kepala;
}
body += 'line += 1;';
js.push (kepala);
}
// html
if (kaki) {
_foot = foot.replace (/^[/n/r]+/s*/g, '');
if (! _foot) {
Kembali;
}
Body + = mengganti [3] + html.length + menggantikan [4];
html.push (kaki);
}
}
});
Body = "var render = function (data) {ICE.MIX (ini, data); coba {" "
+ Tubuh
+ Menggantikan [5]
+ "} catch (e) {ice.log ('rend error:', line, 'line'); ic.log ('pernyataan tidak valid:', js [line-1]);
+ "Var proto = render.prototype = iextend (ihelper);"
+ "ICE.MIX (Proto, Opsi);"
+ "Return function (data) {return render baru (data) .result;};" ;;;;;;;;;
var render = fungsi baru ('html', 'js', 'iextend', 'ihelper', 'opsi', body);
Return render (html, js, iextend, ihelper, opsi);
};
ice.log = function () {{
if (typeof console === 'underfined') {{
Kembali;
}
var args = array.prototype.slice.call (argumen);
console.log.apply && console.log.Apply (konsol, args);
};
// Gabungkan Objek
ICE.MIX = fungsi (target, sumber) {
untuk (tombol var di sumber) {
if (source.hasownproperty (key)) {
target [key] = sumber [key];
}
}
};
// Daftar fungsi
ice.on = function (name, fn) {
Ihelper [name] = fn;
};
// Bersihkan cache
ICE.ClearCache = function () {
icache = {};
};
// ubah konfigurasi
es.set = function (name, value) {
iconfig [name] = value;
};
// Antarmuka Eksposur
Ifof Module! == 'Undefined' && Module.Exports) {
module.Exports = template;
} Kalau tidak {
win.ice = es;
}
}) (Jendela);