في الآونة الأخيرة ، يقترب محتوى عملي تدريجياً بشكل مثالي (الواجهة الأمامية على شبكة الإنترنت) ، لذلك أولي المزيد من الاهتمام للأداء الأمامي! قدم زميل في الخلفية استخدام محرك قالب AJAX لتحسين سرعة العرض!
فيما يلي بعض محركات قوالب JavaScript
1. الشارب
محرك قالب يعتمد على جافا سكريبت ، على غرار المكون الإضافي لقالب jQuery من Microsoft ، ولكنه أبسط وأسهل في الاستخدام!
2. dot.js
يحتوي dot.js على محرك قالب JavaScript للمتصفحات و Node.js.
3. JSmart
JSmart هو نسخة محفوظة JavaScript من محرك قالب PHP الشهير Smarty.
4. DOM.JS
DOM.JS هو محرك قالب JavaScript يمكن استخدامه على كل من العميل وجانب الخادم.
5. اليشم
Jade هو محرك قالب عالي الأداء للعقد التي تتأثر بهامل في جافا سكريبت.
6. Hogan.JS
محرك قالب JavaScript من Twitter.
7. المقود
المقاود هي مكتبة قالب صفحة JavaScript
8. ArtTemplate
ArtTemplate هو جيل جديد من محرك قالب JavaScript. يمكن أن تكون كفاءة التقديم في V8 قريبة من الحد الأقصى لأداء JavaScript. في اختبار كفاءة التقديم تحت Chrome ، يبلغ 25 و 32 مرة من شارب المحركات المعروفة و TMPL الصغيرة على التوالي. المحرك يدعم تصحيح الأخطاء. إذا تمت مواجهة خطأ أثناء تقديمه ، يمكن لمصحح الأخطاء تحديد موقع بيان القالب الذي ينتج استثناءً ، حيث يصعب تصحيح المشكلة التي يصعب تصحيحها للمشكلة.
يمكن أن تقوم أداة تجميع القالب الفريدة بتجميع القوالب الأمامية في ملفات JS التي لا تعتمد على محرك القالب لتشغيلها ، مما يتيح للقوالب الأمامية اختراق قيود المتصفح وإدراك تنظيم الملفات والأدلة بنفس الطريقة مثل القوالب الخلفية ، والتحميل عند الطلب ، وتشمل التعشيش ، وما إلى ذلك.
ربما تعتقد أن اسم هذا البرنامج المساعد يبدو مألوفًا ، هذا صحيح! هذا هو أيضا مؤلف كتاب Artdialog.
عنوان المدونة: http://www.planeart.cn/
اقتباس المحرك
نسخة الكود كما يلي:
<script src = "js/template.js"> </script>
اكتب قالبًا
نسخة الكود كما يلي:
<script id = "test" type = "text/html">
// استخدم علامة نصية مع type = "text/html" لتخزين القالب:
<h1> <٪ = title ٪> </h1>
<ul>
<٪
لـ (i = 0 ؛ i <list.length ؛ i ++) {٪>
<li> iteml <٪ = i+1 ٪>: <٪ = list [i] ٪> </li>
<٪} ٪>
</ul>
// رموز التعريف لبداية ونهاية بناء جملة المنطق هي <٪ و ٪>. إذا تم اتباع <٪ من العلامة = علامة ، فسيتم إخراج المحتوى المتغير.
</script>
قالب تقديم
نسخة الكود كما يلي:
بيانات var = {
العنوان: 'علامة' ،
القائمة: ["الأدبي" ، "المدونة" ، "التصوير الفوتوغرافي" ، "فيلم" ، "فولك" ، "السفر" ، "الجيتار"]
} ؛
var html = template.render ("test" ، data) ؛
document.getElementById ('content'). innerhtml = html ؛