أردت في الأصل مشاركة إصدار التحليل السابق لرمز المصدر ArtTemplate ، لكن بعد عام ، لم أتمكن من العثور عليه ، لذلك اضطررت إلى تجربة مبدأ محرك قالب التحليل في ذلك الوقت.
مشترك محرك قالب الكتابة معك ، تاركًا نصبًا تذكاريًا ، متذكرًا أن هناك العديد من محركات القالب في ذلك الوقت.
يستخدم محرك قالب JS المذكور هنا بناء جملة JavaScript الأصلي ، لذلك يشبه محرك القالب الأصلي لـ PHP.
دور محرك القالب الأمامي؟
1. يمكن أن يجعل تطوير الأمامي أسهل. أو ملف قالب واحد
2. من السهل الحفاظ على الاقتران وتقليله.
3. يمكنك التخزين المؤقت. عندما يتعلق الأمر بملف .tpl ، لا يمكنك فقط ذاكرة التخزين المؤقت ، يمكنك أيضًا أن تكون محملًا للوحدة
استخدم. tpl كوحدة ، ثم يمكنك تحميل الملفات عند الطلب.
4. انتظر
مبدأ محرك القالب الأمامي؟
المبدأ بسيط للغاية أن الكائن (البيانات) + قالب (بما في ذلك المتغيرات) -> السلسلة (HTML)
كيفية تحقيق محرك القالب الأمامي؟
عن طريق تحليل القالب ، وفقًا لطريقة Word ، يتم تحويل القالب إلى دالة ، ثم يتم استدعاء الوظيفة ، ويتم تمرير الكائن (البيانات) ، وسلسلة الإخراج (HTML)
(بالطبع ، تعتمد تلك المحددة على الكود)
إنه مثل هذا:
نسخ رمز رمز على النحو التالي:
var tpl = 'I am <٪ = name ٪> ، <٪ = العمر => سنوات' ؛
var obj = {
الاسم: "Lovesuee" ،
العمر: 24
} ؛
var fn = engine.compile (tpl) ؛
var str = fn (OBJ) ؛
مثال:
نسخ رمز رمز على النحو التالي:
<doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<title> Demo Ice </itlem>
<script src = "/javascripts/jquery/jquery-1.7.2.js"> </script>
<script src = "/javaScripts/ice/ice.js"> </script>
<body>
<div id = "content"> </viv>
</body>
<script type = "text/html" id = "tpl">
<div> هنا هي نتيجة العرض: </div>
<٪ = this.title () ؛ ٪>
<جدول الحدود = 1>
<٪ لـ (var i = 0 ، tl = this.trs.length ، tr ؛ i <tl ؛ i ++) {٪>
<٪
tr = this.trs [i] ؛
if (tr.sex === "أنثى") {
٪>
<tr>
<td> <٪ = tr.name ؛؛
</r>
<٪} ٪>
<٪} ٪>
</table>
<img src = "<٪ = this.href ٪>">
<٪ = this.include ('tpl2' ، هذا) ؛
</script>
<script type = "text/html" id = "tpl2">
<div> هنا هي نتيجة العرض: </div>
<٪ = this.print ('Welcom to Ice Template') ؛ ٪>
<جدول الحدود = 1>
<٪ لـ (var i = 0 ، tl = this.trs.length ، tr ؛ i <tl ؛ i ++) {٪>
<٪
tr = this.trs [i] ؛
if (tr.sex === "ذكر") {
٪>
<tr>
<td> <٪ = tr.name ؛؛
</r>
<٪} ٪>
<٪} ٪>
</table>
<img src = "<٪ = this.href ٪>">
</script>
<script>
اختبار var = [
{الاسم: "قاتل غير مرئي" ، العمر: 29 ، الجنس: "ذكر"} ،
{الاسم: "سورا" ، العمر: 22 ، الجنس: "الرجال"} ،
{الاسم: "Fesyo" ، العمر: 23 ، الجنس: "أنثى"} ،
{الاسم: "Love Bo" ، العمر: 18 ، الجنس: "ذكر"} ،
{الاسم: "Izaki" ، العمر: 25 ، الجنس: "الرجال"} ،
{الاسم: "أنت لا تفهم" ، العمر: 30 ، الجنس: "النساء"}
]
// var html = ice ("tpl" ، {
// TRS: TRS ،
// HREF: "http://images.vevb.com/type4.jpg"
//} ، {
// العنوان: function () {{
// إرجاع "<p> هذا هو إخراج قطعة رمز باستخدام المساعد العرض </p>" ""
//}
//}) ؛
var elem = document.getElementById ('tpl') ؛
var tpl = elem.innerhtml ؛
var html = ice (tpl ، {
TRS: TRS ،
HREF: "http://images.vevb.com/type4.jpg"
} ، {
العنوان: وظيفة () {
إرجاع "<p> هذا هو الرمز الذي يستخدم الرمز من المساعد العرض </p>" "" "
}
}) ؛
console.log (html) ؛
$ ("#content").
</script>
</html>
تطبيق بسيط:
نسخ رمز رمز على النحو التالي:
(وظيفة (فوز) {
// وظيفة توجيه محرك القالب
var ice = function (id ، content) {
إرجاع الجليد [
محتوى typeof == "كائن"؟
] .apply (الجليد ، الحجج) ؛
} ؛
ICE.Version = '1.0.0' ؛
// تكوين قالب
var iconfig = {
Opentag: '<٪' ،
Closetag: "٪>"
} ؛
var isNewEngine = !!
// قالب ذاكرة التخزين المؤقت
var icache = ice.cache = {} ؛
// وظيفة المساعدة
var ihelper = {
تضمين: الدالة (المعرف ، البيانات) {
إرجاع Irender (ID ، Data) ؛
} ،
طباعة: وظيفة (str) {
إرجاع شارع
}
} ؛
// النموذج الأولي الميراث
var iextend = object.create ||
دالة fn () {} ؛
fn.prototype = كائن ؛
إرجاع FN الجديد ؛
} ؛
// تجميع القالب
var icompile = ice.compile = function (id ، tpl ، Options) {
var cache = null ؛
id && (cache = icache [id]) ؛
إذا (ذاكرة التخزين المؤقت) {
إرجاع ذاكرة التخزين المؤقت.
}
// [id |.
if (typeof tpl! == 'string') {
var elem = document.getElementById (id) ؛
الخيارات = TPL ؛
إذا (elem) {
// [id ، الخيارات]
الخيارات = TPL ؛
tpl = elem.value || elem.innerhtml ؛
} آخر {
// [TPL ، الخيارات]
TPL = معرف ؛
id = null ؛
}
}
خيارات = خيارات || {} ؛
var render = iParse (TPL ، الخيارات) ؛
id && (icache [id] = render) ؛
إرجاع عرض.
} ؛
// عرض القالب
var irender = ice.rener = function (id ، data ، الخيارات) {
إرجاع icompile (معرف ، خيارات) (بيانات) ؛
} ؛
var iforeach = array.prototype.foreach؟
وظيفة (arr ، fn) {
arr.foreach (FN)
}:
وظيفة (arr ، fn) {
لـ (var i = 0 ؛ i <arr.length ؛ i ++) {
fn (arr [i] ، i ، arr)
}
} ؛
// تحليل قالب
var iparse = function (TPL ، Options) {
var html = [] ؛
var JS = [] ؛
vargingag = Options.Opentag || iconfig ['opentag'] ؛
var closetag = Options.closetag || iconfig ['closetag'] ؛
// اعتمادًا على المتصفح ، يعتمد استراتيجيات سلسلة الربط المختلفة
var استبدال = isNeweengine
؟
: ينضم ('')؛ "]؛؛
// وظيفة الجسم
var body = استبدال [0] ؛
iforeach (tpl.split (opentag) ، الدالة (val ، i) {{
إذا (! فال)
يعود؛
}
var parts = value (closetag) ؛
var head = parts [0] ؛
var foot = parts [1] ؛
var len = parts.length ؛
// HTML
if (len === 1) {
body + = places [3] + html.length + place [4] ؛
html.push (الرأس) ؛
} آخر {
إذا (الرأس) {
// شفرة
// قم بإزالة المساحة
الرأس = الرأس
.replace (/^/s+|/s+$/g ، '')
.replace (/[/n/r]+/s*/، '')
// بيان الإخراج
ifad.indexof ('=') === 0) {{
head = head.substring (1) .ruplace (/^[/s]+| [/s ؛]+$/g ، '') ؛
الجسم + = استبدال [1] + رأس + استبدال [2] ؛
} آخر {
الجسم += الرأس ؛
}
body += 'line += 1 ؛' ؛
JS.Push (الرأس) ؛
}
// HTML
إذا (القدم) {
_foot = foot.replace (/^[/n/r]+/s*/g ، '') ؛
if (! _foot) {
يعود؛
}
body + = places [3] + html.length + place [4] ؛
html.push (القدم) ؛
}
}
}) ؛
body = "var render = function (data) {ice.mix (this ، data) ؛ Try {" "
+ الجسم
+ يستبدل [5]
+ "} catch (e) {iCe.log ('rend error:' ، line ، 'line') ؛ ic.log ('invalid state:' ، JS [line-1]) ؛
+ "var proto = render.prototype = iextend (iHelper) ؛"
+ "ICE.MIX (Proto ، Options) ؛"
+ "وظيفة الإرجاع (البيانات) {return new Render (data) .result ؛} ؛" ؛؛؛؛؛؛؛؛؛؛
var render = new function ('html' ، 'js' ، 'iextend' ، 'ihelper' ، 'Options' ، Body) ؛
إرجاع عرض (HTML ، JS ، iextend ، ihelper ، الخيارات) ؛
} ؛
Ice.log = function () {{
if (typeof console === 'Underfed') {{
يعود؛
}
var args = array.prototype.slice.call (وسيطات) ؛
console.log.apply && console.log.apply (وحدة التحكم ، args) ؛
} ؛
// دمج كائن
ICE.MIX = دالة (الهدف ، المصدر) {
لـ (مفتاح var في المصدر) {
if (source.hasownproperty (key)) {
الهدف [المفتاح] = المصدر [المفتاح] ؛
}
}
} ؛
// وظيفة التسجيل
ICE.ON = function (name ، fn) {
ihelper [name] = fn ؛
} ؛
// مسح ذاكرة التخزين المؤقت
Ice.clearcache = function () {
icache = {} ؛
} ؛
// تغيير التكوين
ICE.Set = function (الاسم ، القيمة) {
iconfig [name] = value ؛
} ؛
// واجهة التعرض
وحدة IFOF!
module.exports = قالب ؛
} آخر {
win.ice = ICE ؛
}
}) (نافذة) ؛