تستخدم معظم المشاريع التطوير المعياري ، ويعتبر مطلب js نموذجًا لتطوير وحدة AMD ، لذلك من الضروري تعلمه. باستخدام requirejs خطوة بخطوة لكتابة العروض التوضيحية ، يمكننا تعلم عملية التطوير الشاملة لـ requirejs وبعض مشاعر استخدام requirejs بنفسك.
AMD: آلية للتحميل غير المتزامن لرمز JavaScript استنادًا إلى الوحدات النمطية. وتوصي المطورين بتغليف رمز JavaScript في وحدات ، ويصبح الاعتماد على الكائنات العالمية اعتمادًا على الوحدات الأخرى ، دون إعلان الكثير من المتغيرات العالمية. حل تبعيات الوحدات الفردية من خلال التأخير والتحميل عند الطلب. فوائد رمز JavaScript المعياري واضحة. يمكن أن يؤدي الاقتران الفضفاض للمكونات الوظيفية المختلفة إلى تحسين قابلية إعادة استخدام الكود واستخدامه. يتيح هذا التحميل السريع غير المتزامن غير المحظور رمز JavaScript عناصر واجهة المستخدم الأخرى على صفحة الويب التي لا تعتمد على رمز JavaScript ، مثل الصور ، CSS وعقد DOM الأخرى ، لتحميل أولاً ، يتم تحميل صفحة الويب بشكل أسرع ويحصل المستخدمون أيضًا على تجربة أفضل.
1. تنزيل requiejs
قبل التطوير المعياري مع Requiejs ، نحتاج إلى إعداد شيء ما. يجب أن يتم تنزيل ملف require.js ، hahaha ، لأنه تم تطويره على أساسه.
2. إنشاء ملف HTML
بعد إنشاء ملف HTML ، يجب على استيراد المتطلبات استخدام علامة <script> ، فلا شك في هذا الأمر. ثم هناك سمة بيانات البيانات في هذه العلامة. تتمثل وظيفتها في العمل كمدخل وخروج ، أي بعد التحميل المتطلبات ، الدخول من سمة بيانات البيانات.
على سبيل المثال ، ما يلي هو:
<! doctype html> <head> <title> تتطلب </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> </head> <body> <! src = "js/require.js"> </script> </body> </html>
عندما أقوم بتحميل js/required.js ، فإنني أذهب لتنفيذ ملف JS/Main's JS. الرئيسي هو أيضا ملف JS. يمكننا حذف لاحقة .js وسوف تضيفها.
3. بيانات البيانات
بعد تنفيذ البرنامج <script data-main = 'js/main' src = 'js/require.js'> </script> ، أدخل main.js من خلال بيانات البيانات وتنفيذ main.js. إذن ما هو في Main.js؟
يرجى الاطلاع على الرمز:
/* require.config تنفيذ baseurl كـ "JS" ، يشير baseurl إلى الدليل الجذر لملف الوحدة النمطية ، والذي يمكن أن يكون مسارًا مطلقًا أو مسارًا نسبيًا*/require.config ({baseurl: 'js' ، المسارات: {jQuery: jquery-1.8.2.min '}}}) ؛ الوظيفة المجهولة ، مثل monkey-> mk*/require (['monkey'] ، function (mk) {mk.init () ؛}) ؛من الكود أعلاه ، يمكنك أن ترى أن main.js يحتوي على وحدتين: require.config وتتطلب.
تتمثل وظيفة require.config في تكوين بعض المعلمات من المتطلبات ومن ثم الرجوع إليها بشكل علني.
على سبيل المثال ، تتمثل وظيفة baseurl أعلاه في استخدامها كمسار أساسي والبحث عن الملفات تحت هذا المسار. أنا وضعت جميع ملفات .js في مجلد JS. لذلك ، بعد تكوين هذه الخاصية ، ستبحث الملفات اللاحقة عن المحتوى في مسار JS.
على النحو التالي:
require (['monkey'] ، function (monkey) {monkey.init () ؛}) ؛عندما يشير إلى القرد ، فإن هذا هو القرد المرجعي ، وليس JS/Monkey.
ما هو دور المسارات؟ إنه لاستبدال بعض ملفات JS شائعة الاستخدام بأسماء شائعة. على سبيل المثال ، jQuery -1.8.2.min.js ، لا يمكننا كتابة هذا في كل مرة نسميها ، لذلك للراحة ، نستبدل jQuery-1.8.2.min.js. في المستقبل ، يمكننا استخدام jQuery مباشرة ، وهو سريع ومريح.
حسنًا ، require.config على دراية به بشكل أساسي. في كلمة واحدة ، وظيفتها هي تكوين متطلبات.
ماذا عن المطلوب؟
وظيفة يتطلب هي التنفيذ. على سبيل المثال ، أنا هنا فقط بحاجة إلى تنفيذ monkey.js ، لذلك قمت باستيراد Monkey ثم حصلت على قيمة الإرجاع بعد تنفيذ القرد من خلال معلمة MK. إذا كانت هناك قيمة إرجاع ، فيمكننا القيام بالمعالجة المقابلة لـ MK.
مهلا ، ماذا يوجد داخل القرد؟
لنلقي نظرة:
/* تعريف المعلمة هي دالة مجهولة المصدر ، والتي تُرجع كائن*/define (['jQuery'] ، function ($) {var init = function () {console.log ($. browser) ؛} ؛ return {init: init} ؛}) ؛يُعرِّف! تتمثل وظيفتها في تحديد وحدة JS للاستخدام بواسطة وحدات أخرى أو تتطلب. تشبه طريقة الإشارة إلى وحدات JS الأخرى طريقتها. يقدم ملفات JS المطلوبة ثم يتوافق مع المعلمات واحدة تلو الأخرى. من المهم أن نلاحظ أن الوحدات الأخرى لا يمكنها الوصول إلى الأساليب أو المتغيرات المحددة في DEFINE ، لذلك إذا كنت تريد أن تكون وحدات أخرى قادرة على الوصول إليها ، فيمكنك رمي الكائنات أو الوظائف المقابلة (الإرجاع). هنا ، ما أعيده هو كائن يوفر inter للوحدات النمطية الأخرى للاتصال بها.