أفضل الممارسات لإدارة ونشر تطبيقات JavaScript الكبيرة

Question

ما هي بعض الممارسات القياسية لإدارة تطبيق JavaScript متوسط ​​الحجم؟ما يقلقني هو سرعة تنزيل المتصفح وسهولة التطوير وقابليته للصيانة.

كود JavaScript الخاص بنا عبارة عن "مساحة اسم" تقريبًا على النحو التالي:

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

في الوقت الحالي، لدينا ملف JavaScript واحد (مفكك وغير مُجرد وقابل للقراءة للغاية) للتعامل مع كل منطق الأعمال في تطبيق الويب.بالإضافة إلى ذلك، هناك jQuery والعديد من ملحقات jQuery.المشكلة التي نواجهها هي أن الأمر يتطلب للأبد للعثور على أي شيء في كود JavaScript ولا يزال المتصفح يحتوي على عشرات الملفات لتنزيلها.

هل من الشائع أن يكون لديك عدد قليل من ملفات JavaScript "المصدر" التي يتم "تجميعها" في ملف JavaScript مضغوط نهائي؟هل هناك أي تلميحات مفيدة أخرى أو أفضل الممارسات؟

Answer 1

الطريقة التي وجدتها مناسبة لي هي وجود ملفات JS منفصلة لكل فئة (تمامًا كما تفعل في Java وC# وغيرها).وبدلاً من ذلك، يمكنك تجميع JS الخاص بك في المجالات الوظيفية للتطبيق إذا كان ذلك أسهل بالنسبة لك للتنقل.

إذا قمت بوضع جميع ملفات JS الخاصة بك في دليل واحد، فيمكنك الحصول على بيئة جانب الخادم (PHP على سبيل المثال) من خلال كل ملف في هذا الدليل وإخراج ملف <script src='/path/to/js/$file.js' type='text/javascript'> في بعض ملفات الرأس المضمنة في جميع صفحات واجهة المستخدم الخاصة بك.ستجد أن هذا التحميل التلقائي مفيد بشكل خاص إذا كنت تقوم بإنشاء ملفات JS وإزالتها بانتظام.

عند النشر إلى الإنتاج، يجب أن يكون لديك برنامج نصي يجمعهم جميعًا في ملف JS واحد و"يصغره" للحفاظ على الحجم منخفضًا.

Answer 2

وأقترح عليك أيضًا استخدام Google واجهة برمجة تطبيقات مكتبات أجاكس من أجل تحميل المكتبات الخارجية.

إنها أداة مطور من Google تعمل على تجميع مكتبات JavaScript الرئيسية وتسهل نشرها وترقيتها وجعلها أخف وزنًا من خلال استخدام الإصدارات المضغوطة دائمًا.

كما أنه يجعل مشروعك أبسط وأخف وزنًا لأنك لا تحتاج إلى تنزيل ونسخ وصيانة ملفات المكتبات في مشروعك.

استخدمه بهذه الطريقة:

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

Answer 3

هناك مقال ممتاز عن فيتامين بقلم Cal Henderson من Flickr حول كيفية تحسين توصيل CSS وJavaScript: http://www.iamcal.com/serving-javascript-fast/

Answer 4

مجرد عقدة جانبية - أشار ستيف بالفعل إلى أنه يجب عليك حقًا "تصغير" ملفات JS الخاصة بك.في JS، المسافات البيضاء مهمة بالفعل.إذا كان لديك ألف سطر من JS وقمت بإزالة الأسطر الجديدة غير المطلوبة فقط، فقد قمت بالفعل بحفظ حوالي ألف سطر.أعتقد أنك تفهم ما أعنيه.

هناك أدوات لهذه المهمة.ويجب ألا تقوم أبدًا بتعديل JS "المصغر"/المجرد/المبهم يدويًا!أبداً!

Answer 5

في تطبيقات جافا سكريبت الكبيرة لدينا، نكتب جميع التعليمات البرمجية الخاصة بنا في ملفات صغيرة منفصلة - ملف واحد لكل "فئة" أو مجموعة وظيفية، باستخدام بنية مساحة الاسم/الدليل المشابهة لـ Java.لدينا بعد ذلك:

• خطوة في وقت الترجمة تأخذ كل التعليمات البرمجية لدينا وتصغرها (باستخدام متغير JSMin) لتقليل حجم التنزيل
• خطوة وقت الترجمة التي تأخذ الفئات المطلوبة دائمًا أو دائمًا تقريبًا وتسلسلها في حزمة كبيرة لتقليل الرحلات ذهابًا وإيابًا إلى الخادم
• "أداة تحميل الفئات" التي تقوم بتحميل الفئات المتبقية في وقت التشغيل عند الطلب.

Answer 6

من أجل كفاءة الخادم، من الأفضل دمج كل ملفات جافا سكريبت الخاصة بك في ملف واحد مصغر.

حدد الترتيب المطلوب به الكود، ثم ضع الكود المصغر بالترتيب المطلوب في ملف واحد.

المفتاح هو تقليل عدد الطلبات المطلوبة لتحميل صفحتك، ولهذا السبب يجب أن يكون لديك كل جافا سكريبت في ملف واحد للإنتاج.

أوصي بالاحتفاظ بالملفات مقسمة للتطوير ثم إنشاء برنامج نصي للإنشاء لدمج/تجميع كل شيء.

وكقاعدة عامة جيدة أيضًا، تأكد من تضمين JavaScript في نهاية صفحتك.إذا تم تضمين JavaScript في الرأس (أو في أي مكان مبكرًا في الصفحة)، فسيؤدي ذلك إلى إيقاف تنفيذ جميع الطلبات الأخرى حتى يتم تحميلها، حتى إذا تم تشغيل التدفق.إذا كان في نهاية الصفحة، فلن تواجه هذه المشكلة.

Answer 7

اقرأ كود تطبيقات جافا سكريبت (الجيدة) الأخرى وانظر كيف يتعاملون مع الأشياء.لكنني أبدأ بملف لكل فصل.ولكن بمجرد أن يصبح جاهزًا للإنتاج، سأقوم بدمج الملفات في ملف واحد كبير وتصغيره.

السبب الوحيد لعدم دمج الملفات هو أنني لم أكن بحاجة إلى جميع الملفات الموجودة في جميع الصفحات.

Answer 8

تتكون استراتيجيتي من تقنيتين رئيسيتين:وحدات AMD (لتجنب العشرات من علامات البرنامج النصي) ونمط الوحدة النمطية (لتجنب اقتران أجزاء تطبيقك بإحكام)

وحدات AMD:بشكل مستقيم جدًا، انظر هنا: http://requirejs.org/docs/api.html كما أنه قادر على تجميع جميع أجزاء تطبيقك في ملف JS مصغر واحد: http://requirejs.org/docs/optimization.html

نمط الوحدة:لقد استخدمت هذه المكتبة: https://github.com/flosse/scaleApp تسأل الآن ما هذا؟مزيد من المعلومات هنا: http://www.youtube.com/watch?v=7BGvy-S-Iag