شرح استخدام RequireJs

أولاً، لماذا نستخدم RequireJS؟

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

عند تحميل عدة ملفات js المذكورة أعلاه، يتوقف عرض الصفحة في المتصفح(تقاطع JS مع عرض المتصفح، بزيادة عدد الملفات التي يتم تحميلها، سيزداد وقت فقدان استجابة الصفحة؛ بالإضافة إلى أن إدارة علاقات الاعتماد بين الملفات تكون صعبة.

دور RequireJs:

1) تحميل ملفات js بشكل متسلسل، لتجنب فقدان استجابة الصفحة.

2) إدارة الاعتماد بين الوحدات، مما يسهل كتابة وتحسين الكود.

3) تم تعريف نطاق لمنع تلوث المساحة الاسمية العالمية.

ثانيًا، تحميل require.js

1. منالموقع الرسميتحميل أحدث إصدار من require، وضعها في مجلد js، واستخدام script لاستيراد الصفحة:

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

لعدم إعاقة عرض الصفحة، يمكن وضعها في أقصى أسفل HTML أو تغييرها إلى الطريقة التالية:

<script src="js/require.js" defer async="true"></script>

خصائص asynchronous تشير إلى أن يجب تحميل هذا الملف بشكل متسلسل (ميزة defer متوافقة مع IE).

2. Load page logic code:

Assuming the code file is main.js, also placed in the js directory, then use the following methods to introduce:

Method 1:

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

The data-main attribute specifies the main entry of the web program, which will be loaded first by requirejs. Since requirejs depends on resources that are all js by default, main.js can be abbreviated as main.

Method 2:

After loading require.js, load the config configuration file (if any), and finally load the main module:

require([‘configUrl’],function () { //config.js must be loaded by requirejs to register
 require([moduleAName],function(moduelA){
 // logic code
 }
});

Chapter 3: Writing Main Modules

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

The require() function accepts two parameters, the first parameter is an array representing the modules that the current module depends on; the second parameter is a callback function, which will be called after the specified modules are successfully loaded. The loaded modules will be passed in as parameters to the callback function, so these modules (modules that are dependent) can be used inside the callback function (with the return value of the module).

require() asynchronously loads moduleA, moduleB, and moduleC, and the browser will not lose its response; the callback function it specifies will only run after all the dependent modules have been downloaded and executed the corresponding callback.

Chapter 4: Module Configuration

The require.config() method can define module paths and define dependencies in the form of short module names. This methodCan be written before each main module (main.js), used in conjunction with the main module.

The parameter is an object, the paths property of which specifies the loading paths of various modules. pathsMultiple paths can be configured،if the remote CDN library fails to load successfully, load the local library.

If the module configuration is not defined, the dependencies in the main module need to be written with the full path.

Configure paths on each page as needed:

require.config({  //Configure modules for later code use
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...كود آخر; 
 fixHeight.init();
});

أو قم بإعداد config كملف جافا منفرد، ثم

require([“configJsUrl”],function(){  //يحتاج إلى تحميل إعدادات النظام بشكل متزامن من خلال require في ملف main
 require([‘ModuleName’],function(Name){
 …كود آخر
 }
}

لمنع إعادة تعبئة require في كل صفحة، يمكنك استخدام الطريقة التالية:

أولاً، قم بإنشاء ملف config.js الخاص بك:

require.config({ //تكوين النظام المسجل، سيُستخدم في الكود اللاحق
 baseUrl: "/js/app/", //كل الاعتمادات الأخرى هي مسارات تُعتمد على هذا الموقع
 // تكوين المسار
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “اسم النظام القصير”:”المسار المتعلق بbaseUrl، يُتجنب إضافة امتداد الملف .js”
 },
 // مكتبات مكتوبة غير AMD تحتاج إلى إعادة تكوين
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（اسم النظام القصير يجب تعريف المسار）：{
  exports: 'Backbone',  　　　　//اسم المتغيرات التي تُستخدم في مكتبة، مما يعني أن هذا النظام يمكن استدعاؤه من الخارج
  deps:['jquery','underscore'] //اعتماد هذا النظام
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value //معلمات الموارد الجافا، تحكم في تحديث مخزن الحيوية
});
تعريف([ 'marionette'], function () { }); //ما زال سيتم تنفيذ هذا الكود الجاف، سيتم تحميل الأنظمة المطلوبة بالترتيب

ثم يمكنك استخدامها كما يلي:}}

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

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

إذا لم يتم تحديد config أو data-main، فإن الـ baseUrl الافتراضي هو مجلد صفحة HTML التي يتم تحميل RequireJS منها. إذا تم تحديد data-main دون تحديد المسار الجذر في config، يتم تعيين هذا المسار كـ baseUrl.

إذا كنت ترغب في تجنب عملية تحليل "baseUrl + paths" وتحديد ملفات السكربت مباشرةً من مجلد معين، يمكنك القيام بذلك: إذا كان معرف module ID يتوافق مع أحد القواعد التالية، يتم تجنب تحليل الإعدادات التقليدية "baseUrl + paths" وتحديد الملف كملف سكربت مطلقًا بالنسبة إلى مسار مستند HTML الحالي:

•            ينتهي بـ ".js".

•            يبدأ بـ "/".

•            يحتوي على بروتوكول URL، مثل "http:" أو "https:".

مثالًا: require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

يطلب require.js من كل معرف أن يكون ملف js منفردًا. عند تحميل معرفات متعددة، يتم إرسال عدة طلبات HTTP، مما يؤثر على سرعة تحميل الصفحة. لذلك يقدم require.js أداة تحسين (r.js)، يمكن استخدام هذه الأداة بعد إكمال توزيع المعرفات لدمج معرفات متعددة في ملف واحد، مما يقلل من عدد طلبات HTTP ويجب أن يتم التفكير في التخزين المؤقت.

الجزء السادس: كتابة معرفات AMD

المعرفات التي يتم تحميلها بواسطة require.js يجب أن تُكتب وفقًا للمعايير AMD. أي أن المعرفات يجب أن تستخدم دالة define() المحددة، عادة ما يكون لها طرق أو خصائص يمكن استخدامها من قبل معرفات أخرى؛ أو يمكن أن تنفذ لógica دون إنتاج أي شيء.

الجزء السابع: الملحقات المتعلقة بـ require.js

ملحق text،يُسمح لـ require.js بتحميل موارد النصوص مثل txt، css أو html بشكل متسلسل للاستخدام في js، دون الحاجة إلى بناء نص Html داخل script.

تعريف(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template,cat){
 $('body').append($(template));
 document.body.appendChild(cat);
　}
; 

ملاحظة:

يمكن إدخال اعتمادات الوحدة من خلال [] أو من خلال طريقة require() في دالة callBack، وستكون النتيجة متشابهة. لأن طريقة define ستنفذ بفضل النصوص المنطقية في دالة callBack طريقة require لتحميل الاعتمادات ثم تنفيذ الدالة. ولكن في هذه الحالة يجب إدخال اعتماد require نفسه، وإلا سيتم عرض خطأ:

define(function(require){
 var helper=require('helpModuleUrI');//سيتم تحميل هذا الاعتماد مسبقًا أيضًا
 ...
}

عندما يعتمد عدة وحدات على نفس الوحدة في مرات متعددة، يتم تحميل وتحديث الوحدة مرة واحدة فقط، بعد ذلك سيحافظ require على إشارة إلى الوحدة لتكون متاحة للمستخدمين الآخرين مرة أخرى.

تمييز تنفيذ طريقة require وتنفيذ callBack:

require('config',callBack1);
require('b',callBack2);
// ستتم تنفيذ طريقتي require فورًا، ولكن ترتيب تنفيذ callBack غير معروف، يعتمد على ترتيب التحميل
// يختلف هذا الكود عن الكود التالي، حيث سيتم تنفيذه وفقًا للترتيب
require('config',function(){
 require('b',callBack2)
}

هذا هو نهاية محتوى هذا المقال، نأمل أن تكون محتويات هذا المقال قد ساعدتكم في التعلم أو العمل، ونأمل أيضًا أن تشجعوا على دعم دروس الركض!

بيان: محتويات هذا المقال مستخرجة من الإنترنت، وتعود ملكيتها للمراجع الأصلية، وقد تم تحميل المحتوى من قبل المستخدمين عبر الإنترنت دون تدخل بشري في التحرير، ولا تتحمل الموقع أي مسؤولية قانونية. إذا كنت قد اكتشفت محتوى يشتبه في حقوق النسخ، فأنت موصى بك بمراسلة بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') للإبلاغ عن ذلك وتقديم الأدلة ذات الصلة، وسيتم حذف المحتوى المشبوه فور التحقق منه.