من خلال تطوير الويب ، أصبحت التطبيقات الأمامية أكثر تعقيدًا ، وقد بدأت JavaScript القائمة على الواجهة الخلفية (Node.js) في الظهور. في هذا الوقت ، تم وضع JavaScript بتوقعات أكبر. في الوقت نفسه ، أصبحت أفكار JavaScript MVC شائعة أيضًا. باعتباره الجزء الأكثر أهمية في فصل البيانات والواجهات ، اجتذب محرك قالب JavaScript المزيد والمزيد من الاهتمام من المطورين. في العام الماضي ، ازدهرت في مجتمع المصادر المفتوحة. يمكن رؤيتها على مواقع الويب الكبيرة مثل Twitter و Taobao و Sina Weibo و Tencent QQ Space و Tencent Weibo.
ستستخدم هذه المقالة أبسط رمز مثال لوصف مبادئ محرك قالب JavaScript الحالي ، بما في ذلك مبادئ تنفيذ الخصائص للجيل الجديد من محرك قالب JavaScript ArtTemplate. مرحبا بكم لمناقشتها معا.
ArtTemplate مقدمة
ArtTemplate هو جيل جديد من محرك قالب JavaScript. يستخدم Premompilation لجعل قفزة نوعية في الأداء ويستفيد بالكامل من ميزات محرك JavaScript ، مما يجعل أدائها متميزًا للغاية في الواجهة الأمامية والخلفية. في اختبار كفاءة التقديم تحت Chrome ، يبلغ 25 و 32 مرة من شارب المحركات المعروفة و TMPL Micro.
بالإضافة إلى مزايا الأداء ، تجدر الإشارة إلى وظائف التصحيح. يمكن لتصحيح الأخطاء في القالب تحديد موقع القالب الذي يثير أخطاء تقديم الأخطاء ، وحل آلام تصحيح الأخطاء غير المقصودة أثناء كتابة القوالب ، وجعل التطوير فعالًا ، وتجنب تحطم التطبيق بالكامل بسبب الأخطاء في قالب واحد.
يتم تطبيق كل هذا في 1.7 كيلو بايت (GZIP)!
أساسيات محرك قالب JavaScript
على الرغم من أن كل محرك لديه طرق تنفيذ مختلفة من بناء جملة القالب ، وحلية بناء الجملة ، والتعيين المتغير ، وربط السلسلة ، لا يزال مبدأ عرض المفتاح هو تنفيذ سلاسل JavaScript ديناميكيًا.
فيما يتعلق بالتنفيذ الديناميكي لسلاسل JavaScript ، تستخدم هذه المقالة جزءًا من رمز القالب كمثال:
هذا هو كتابة قالب بسيط للغاية ، حيث "" هو closetag (العبارة المنطقية المغلقة العلامة). إذا تم اتباع Opentag بـ "=" ، فسيتم إخراج محتوى المتغير.
يتم إخراج عبارات HTML وبيانات الإخراج المتغيرة مباشرة ، والأوتار المحلية متشابهة:
بعد اكتمال تحليل بناء الجملة ، سيتم إرجاع طريقة التقديم بشكل عام:
اختبار التقديم:
في طريقة العرض أعلاه ، يستخدم تعيين متغير القالب في العبارة ، ويستخدم الربط السلسلة طريقة الدفع للمصفوفات لتحسين الأداء في IE6 و 7. محرك القالب الصغير TMPL الذي تم تطويره بواسطة مؤلف jQuery John هو ممثل نموذجي لهذه الطريقة ، انظر:
يمكن ملاحظة من التنفيذ الرئيسي أن مشكلتين يتم حلهما يتم تركهما في محرك قالب JavaScript التقليدي:
1. الأداء: عند تقديم محرك القالب ، فإنه يعتمد على مُنشئ الوظائف لتنفيذه. مثل Eval و SetTimeOut و SetInterval ، توفر الوظيفة طريقة للوصول إلى محرك تحليل JavaScript باستخدام النص ، ولكن أداء تنفيذ JavaScript بهذه الطريقة منخفض للغاية.
2. تصحيح الأخطاء: نظرًا لأنها سلسلة تنفيذ ديناميكية ، إذا واجه مصحح الأخطاء خطأ ، فإن مصحح الأخطاء لا يمكنه التقاط مصدر الخطأ ، مما تسبب في أن يصبح تصحيح أخطاء القالب مؤلمًا للغاية. في المحرك الذي لا يؤدي التسامح مع الأخطاء ، إذا كانت القوالب المحلية قد تتسبب في تعطل التطبيق بأكمله بسبب استثناءات البيانات ، فستزداد تكلفة الصيانة بشكل كبير مع زيادة عدد القوالب.
ArtTemplate سر فعالة
1
في مبدأ تنفيذ محرك القالب المذكور أعلاه ، نظرًا لأنه يتم تعيين متغير القالب ، يتطلب كل عرض تجميع ديناميكي لسلاسل JavaScript لإكمال المهمة المتغيرة. ومع ذلك ، يتم الانتهاء من عملية التجميع والتعيين من ArtTemplate قبل تقديم ، والتي تسمى "precompilation". سيقوم برنامج التحويل البرمجي ArtTemplate باستخراج جميع متغيرات القالب وفقًا لبعض القواعد البسيطة ويعلنها على رأس وظيفة التقديم. هذه الوظيفة تشبه:
تشبه هذه الوظيفة التي تم إنشاؤها تلقائيًا وظيفة JavaScript المكتوبة يدويًا. مع نفس العدد من عمليات الإعدام ، تم تقليل استخدام كل من وحدة المعالجة المركزية واستخدام الذاكرة بشكل كبير ، والأداء تقريبًا في الحد الأقصى.
تجدر الإشارة إلى أن العديد من ميزات ArtTemplate تستند إلى تطبيقات مسبقة ، مثل مواصفات Sandbox وبناء الجملة المخصصة.
2. طريقة إضافة سلسلة أسرع
يعتقد الكثير من الناس عن طريق الخطأ أن طريقة دفع المصفوفة ستقابل سلاسل أسرع من +=. يجب أن تعلم أن هذا فقط في متصفح IE6-8. تُظهر القياسات الفعلية أن المتصفحات الحديثة تستخدم += لاستخدام طريقة دفع الصفيف ، بينما في محرك V8 ، يكون استخدام += طريقة 4 مرات من الربط الصفيف. لذلك ، يتبنى ArtTemplate طريقتين مختلفتين للربط وفقًا لخصائص محرك JavaScript.
مبدأ وضع Debug ArtTemplate
لا يشبه محرك القالب الأمامي مثل محرك القالب الخلفي. إنه تحليل ديناميكي ، لذلك لا يمكن لمصادق الأخطاء تحديد موقع رقم الخط الخاطئ. يسمح ArtTemplate بذكاء لتصحيح الأخطاء في القالب بتحديد موقع القالب بدقة التي ترمي أخطاء عرض ، على سبيل المثال:
يدعم ArtTemplate نوعين من التقاط الأخطاء ، أحدهما هو تقديم خطأ (خطأ عرض) وتجميع الخطأ (خطأ بناء الجملة).
1. عرض خطأ
تحدث أخطاء تقديم بشكل عام عن أخطاء بيانات القالب أو الأخطاء المتغيرة. عند التقديم ، سوف يدخلون وضع التصحيح لإعادة ترجمة القالب دون التأثير على كفاءة تنفيذ القالب العادي. سجلات خطات برنامج التحويل البرمجي القالب استنادًا إلى كسر خط القالب ، وتتكون الوظيفة المترجمة:
عند حدوث خطأ أثناء عملية التنفيذ ، يتم إلقاء رقم السطر المقابل لقالب الاستثناء على الفور ، ثم يقوم تصحيح الأخطاء القالب بالتحقق من العبارات المقابلة للقالب وفقًا لرقم السطر وطباعته على وحدة التحكم.
2. أخطاء التجميع
أخطاء التجميع هي عمومًا أخطاء بناء جملة القالب ، مثل التعشيش غير المؤهل ، بناء الجملة غير المعروف ، وما إلى ذلك. نظرًا لأن ArtTemplate لا يجري تحليلًا معجميًا كاملًا ، فمن المستحيل تحديد موقع مصدر الخطأ ، ويمكنه فقط إخراج معلومات الخطأ ورمز المصدر للمطورين الأصليين للحكم.