البرنامج التعليمي لتحميل وحدات JavaScript باستخدام مكتبة متطلبات

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

الوحدات النمطية التي يتم تحميلها بواسطة requistjs هي وحدات عمومًا تتوافق مع معايير AMD ، أي الوحدات النمطية التي تحددها مع تحديد الأساليب والمتغيرات المكشوفة وإرجاعها مع Ruturn ؛ يمكن لـ requistjs أيضًا تحميل وحدات تطير معايير AMD ، لكنها أكثر إزعاجًا ولن تشارك هذه المرة.

يتطلب تحميل JS الرئيسي الجوانب التالية:

• تعلن سمة بيانات TAG SCRIPT عن وحدة الإدخال التي تم تحميلها بواسطة requirejs ، وعلامات Async = "true" (غير IE) والتأجيل (IE) تشير إلى التحميل غير المتزامن.
• requist.config وحدة التكوين المسار المقابل
• تتطلب تبعيات إعلان

HTML DEMO

 <script src = "js/require.js" تأجيل async = "true" data-main = "js/main"> <!-أعط مسار المطلوب ، أعلن أنه تحميل غير متزامن ، حدد وحدة الإدخال كـ main.js (يمكن حذفها. js)->

main.js

 require.config ({// إعلان موقع مسارات الوحدة النمطية: {"jQuery": "libs/jQuery" "login": "libs/login"} // أو استخدم baseurl لتحديد مسار جميع الوحدات النمطية: "js/libs"}) ؛ // استخدام يتطلب تحميل الوحدة. المعلمة الأولى هي صفيف ، أي أن الوحدة النمطية التي سيتم تحميلها سيتم تحميلها بترتيب الصفيف ؛ والثاني هو وظيفة رد الاتصال ، والتي يتم تنفيذها بعد اكتمال كل التحميل. تتطلب ([jQuery "، 'login'] ، الدالة ($ ، تسجيل الدخول) {Alert (" jQuery و Login module success! ") ؛ login.do_login () ؛ // بعض else}) ؛

تعريف وحدة تسجيل الدخول تمشيا مع AMD

 // تعريف تعريف jQuery (['jQuery'] ، الدالة ($) {// بعض الدالة التعريفات do_login () {$ .post ('/sessions/create' ، {uname: $ ("#uname"). val () ، password: $ ( }) ؛ // تعريف تعريف الوحدات الأخرى (function () {// بعض التعريفات إرجاع {xx: xx} ؛}) ؛

القضبان لا تنطبق محمل JS. من ناحية ، سيقوم الإصدار الجديد من Rails Asset Pipe بتعبئة جميع ملفات JS في ملف JS واحد ، دون وجود حالة تحميل متعددة JS. من ناحية أخرى ، يستخدم Turbolink ما يسمى تقنية Pjax مع الثناء المختلط والنقد. يتم تغيير الرابط الافتراضي إلى طريقة Ajax ، ولا يحصل إلا على الجزء BOD من HTML ويظل جزء الرأس دون تغيير ، بحيث يتم إجراء تحميل JS فقط عند فتح الموقع لأول مرة.

الحالة 1: تحميل ملفات JavaScript

 <script src = "./ js/require.js"> </script> <script> require (["./ </script>

يمكن أن تسمح معلمة صفيف السلسلة في طريقة المتطلبات بقيم مختلفة. عندما تنتهي السلسلة بـ ".js" ، أو تبدأ بـ "/" ، أو هي عنوان URL ، فإن متطلبات يظن أن المستخدم يقوم بتحميل ملف JavaScript مباشرة. بخلاف ذلك ، عندما تكون السلسلة مشابهة لـ "My/Module" ، فإنها تعتقد أن هذه وحدة نمطية ، وستقوم بتحميل ملف JavaScript حيث توجد الوحدة المقابلة مع Baseurl والمسارات التي تم تكوينها من قبل المستخدم. سيتم وصف قسم التكوين بالتفصيل لاحقًا.

يجب الإشارة هنا إلى أنه بشكل افتراضي ، لا يضمن الطلب على myfunctiona و myFunctionB تنفيذ الصفحة بعد تحميل الصفحة. عندما يكون من الضروري التأكد من تنفيذ البرنامج النصي بعد تحميل الصفحة ، يوفر متطلبات requistjs وحدة مستقلة. تحتاج إلى تنزيل هذه الوحدة من موقع requirejs الرسمي ، والذي لم يتم تضمينه في requirejs. باستخدام وحدة DomReady ، يتم تعديل الكود في الحالة 1 قليلاً والاعتماد على DomReady.

الحالة 2: تنفيذ JavaScript بعد تحميل الصفحة

 <script src = "./ js/require.js"> </script> <script> require (["domready!" ، "./js/a.js" ، "./js/b.js"] ، function () {myfunctiona () ؛ myfunctionB () ؛}) ؛ </script>

بعد تنفيذ مدونة الحالة 2 ، من خلال Firebug ، يمكنك أن ترى أن المطلوبة ستقوم بإدراج علامة <script> على الصفحة الحالية حيث تعلن A.JS و B.JS على التوالي عن علامة <script> لتنزيل ملفات JavaScript بشكل غير متزامن. يتم دعم سمة ASYNC حاليًا من قبل معظم المتصفحات ، مما يشير إلى أن ملف JS في علامة <script> لن يحظر تنزيل محتوى الصفحة الآخر.

الحالة 3: <script> تم إدراجها بواسطة requistjs

 <script type = "text/javaScript" charset = "utf-8" async = "" data-requirecontext = "_" data-requiremodule = "js/a.js" src = "js/a.js

استخدم متطلبات لتحديد وحدات JavaScript

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

كما هو مذكور في مواصفات AMD لـ CommonJs ، يتم تنفيذ وحدات JavaScript من خلال طريقة تحديد.

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

الحالة 4: وحدة الطالب ، الطالب.

 define (function () {return {createStudent: function (name ، الجنس) {return {name: name ، الجنس: الجنس} ؛}} ؛}) ؛ }) ؛

الحالة 5: وحدة الفئة ، class.js

 define (function () {var allstudents = [] ؛ return {classid: "001" ، القسم: "الكمبيوتر" ، addtoclass: function (student) {allstudents.push (student) ؛} ، getClassize: function () {return allstudents.length ؛}} ؛}) ؛

الحالة 6: البرنامج الرئيسي

 تتطلب (["JS/student" ، "JS/Class"] ، الوظيفة (الطالب ، CLZ) {clz.addtoclass (student.createstudent ("jack" ، "male") ؛ clz.addtoclass (student.createstudent ("Rose" ، "female")) ؛

وحدة الطالب ووحدة الفصل كلاهما وحدات مستقلة. دعونا نحدد وحدة جديدة. تعتمد هذه الوحدة على وحدات الطالب والفصل ، بحيث يمكن أيضًا لف منطق جزء البرنامج الرئيسي.

الحالة 7: وحدة المدير التي تعتمد على وحدات الطالب والفصل ، Manager.js

 DEFINE (["JS/Student" ، "JS/Class"] ، الوظيفة (الطالب ، clz) {return {addNewStudent: function (name ، الجنس) {clz.addtoclass (student.createstudent (name ، الجنس)) ؛} ، getMyClassSize: function ()

الحالة 8: برنامج رئيسي جديد

 require (["js/manager"] ، function (manager) {manager.addnewstudent ("jack" ، "male") ؛ manager.addnewstudent ("Rose" ، "Female") ؛ console.log (manager.getMyClassSize ()) ؛ // output 2}) ؛

من خلال مثال الكود أعلاه ، لقد فهمنا بوضوح كيفية كتابة وحدة نمطية ، وكيفية استخدام هذه الوحدة ، وكيفية تحديد التبعيات بين الوحدات النمطية. لا تزال هناك بعض النصائح للاستخدام:

حاول عدم توفير معرف الوحدة النمطية. كما هو مذكور في مواصفات AMD ، هذا المعرف هو خيار. إذا تم توفيره ، فستتأثر قابلية الترحيل بالوحدة في تنفيذ requirejs ، وستتسبب تغييرات موقع الملف في تعديل المعرف يدويًا.

يحدد كل ملف JavaScript وحدة واحدة فقط. تحدد خوارزمية البحث لاسم الوحدة ومسار الملف أن هذه الطريقة مثالية. سيتم تحسين وحدات وملفات متعددة بواسطة المحسن. تجنب التبعيات الدائرية للوحدات. إذا كان من المستحيل حقًا تجنبها ، فيمكنك إضافة تبعيات على وحدات "تتطلب" إلى الوحدة النمطية واستخدامها مباشرة في الكود.

 يتطلب ("DependencyModulename")

تكوين requistjs:

في المقدمة السابقة ، يبدو أننا تجاهلنا سؤالًا أساسيًا: كيف جاء اسم الوحدة النمطية؟ عندما أحتاج إلى وحدة نمطية ، كيف تقوم هذه الوحدة بتخطيط ملف JavaScript معين؟ وهذا ينطوي على كيفية تكوين متطلبات.

يتم عرض أبسط طريقة للتحميل في الحالة 2. في هذه الحالة ، لا نحدد baseurl والمسارات المطلوبة. إذا كانت الطريقة الموضحة في الحالة 10 ، تحدد Data-Main a /js/main.js في المجلد الموازي لدليل الفهرس الحالي. html كمدخل للبرنامج ، وسيتم استخدام دليل /js أيضًا كـ baseurl عند تحديد وحدات أخرى.

الحالة 9: التحميل requist.js

 <script data-main = "js/main" src = "scripts/require.js"> </script>

لذلك ، يمكن إزالة جميع تبعيات الوحدة النمطية في أمثلةنا السابقة من "JS/" وكتابة "الطالب" ، "الفصل" ، "المدير" ، إلخ مباشرة. هناك طريقة أكثر مباشرة لعرض baseurl المحددة والمسارات هي استخدام require.config لتعيين هذه المعلمات. كما هو موضح في الحالة العاشرة.

الحالة 10. تكوين متطلبات

 <script type = "text/javaScript" src = "./ js/require.js"> </script> <script type = "text/javaScript"> require.config ({baseurl: "./js" ، المسارات: {"بعض": "بعض/v1" ، waitseconds: 10}) ؛ تتطلب (["بعض/الوحدة" ، "My/Module" ، "./js/a.js"] ، وظيفة (somemodule ، mymodule) {}) ؛ </script>

يشير Baseurl إلى عنوان URL الأساسي لجميع الوحدات النمطية. على سبيل المثال ، البرنامج النصي الذي تم تحميله بواسطة "my/module" هو في الواقع/js/my/module.js. لاحظ أن الملفات التي تنتهي في .js لن تستخدم baseurl عند التحميل ، ستظل تستخدم المسار النسبي حيث يوجد index.html الحالي ، لذلك لا تزال بحاجة إلى إضافة "./js/". إذا لم يتم تحديد Baseurl ، فسيتم استخدام المسار المحدد في البيانات.

يتم استخدام المسار المحدد في المسارات لاستبدال المسار في الوحدة ، مثل بعض/الوحدة النمطية في المثال أعلاه. مسار ملف JavaScript المحدد هو/js/some/v1/module.js. تحدد WaitSeconds المدة التي يستغرقها تحميل ملف JavaScript. الافتراضي هو 7 ثوان دون تحديد المستخدم.

تكوين مهم آخر هو الحزم ، والتي يمكن أن تحدد هياكل الدليل الأخرى التي تتوافق مع مواصفات AMD CommonJS ، وبالتالي جلب قابلية التوسع الغنية. يمكن أيضًا تحميل وحدات مثل Dojo و jQuery وما إلى ذلك بواسطة requirejs من خلال هذا التكوين.

تشمل الخيارات الأخرى القابلة للتكوين لغة ، السياق ، ديب ، رد الاتصال ، إلخ. يمكن للقراء المهتمين التحقق من المستندات ذات الصلة على الموقع الرسمي لـ requirejs.