RequireJS طريقة فعالة لتحسين سرعة وجودة شفرة جافا سكريبت بالإضافة إلى جعلها أكثر سهولة في القراءة وسهولة الصيانة.
في هذا المقال ، سأقدم لك RequireJS وكيف يمكنك البدء في استخدامه. سوف نذهب من خلال طلب الملفات وتحديد وحدة وحتى اللمس على التحسين.
بعبارة بسيطة ، required.js هو محمل برامج نصية يسمح لك بإدخال شفرة JavaScript الخاصة بك في ملفات ووحدات وبالتالي إدارة تبعيات كل نموذج.
لبدء العمل مع RequireJS و تعريف الوحدة النمطية غير المتزامنة (AMD) ، يجب علينا أولاً تحميل بعد ذلك ، قم بالارتباط بالملف required.js في رأس مستندنا كما يلي:
قد تتساءل عن السمة الرئيسية للبيانات ، فإن استخدام RequireJS بشكل جيد يعني أنه عندما تطلب الاتصال في رأس المستند ، فإنك تقوم أيضًا بالارتباط بالملف الرئيسي لتطبيق جافا سكريبت لديك ، فإن السمة الرئيسية للبيانات هي رابط إلى ملف جافا سكريبت الرئيسي للتطبيق الخاص بك ، في هذه الحالة main.js. (لاحظ أن RequireJS يضيف تلقائياً .js في نهاية اسم الملف.)
في هذا الملف main.js ، ستضع التهيئة لـ RequireJS ، وتحمّل في الوحدات الخاصة بك وتحدد مسارًا أساسيًا للاستخدام عند طلب الملفات.
RequireJS يستخدم دالة تتطلب بسيطة للتحميل في البرامج النصية ، في هذا المثال يقوم RequireJS بتحميل jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});واحدة من أفضل الأشياء في RequireJS هي أنه قابل للقراءة للغاية ، إذا نظرت إلى مجموعة الكود هذه سترى أن يتطلب الأمر أولاً أن يمسك الملف باسم jquery.js ويمر وظيفة مجهول باستخدام $ jQuery كمعلمة ، عندما يتم ذلك يمكنك استخدام كل رمز JQuery الذي تفضله.
الآن ، لن يكون لديك عادةً مكتبة jQuery في ملف يسمى jquery.js ، كما هو الحال مع معظم المكونات الإضافية وأطر العمل ، نختار عادةً تحميلها من GitHub أو من Google CDN ، ولهذا نحتاج إلى تهيئة المسارات حتى يشيرون إلى المكان الصحيح:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});هذا يعني أنه يمكنك طلب jQuery عبر Google واستخدامه بدون مشكلة. (لاحظ أنني استخدمت اسم "jquery" في هذا المثال ، ولكن يمكنك أن تطلق عليه أي شيء تريده.)
استخدام نمط AMD يعني أنه يمكن تنظيم الكود الخاص بنا في وحدات ؛ هذه النماذج هي مجرد أجزاء من التعليمات البرمجية التي تفعل شيئا في تطبيقنا. يمكنك وضع سطرين من الكود في وحدة نمطية أو 100 ، يعتمد فقط على ما تريد أن تقوم به هذه الوحدة.
لتحديد وحدة ما ، نستخدم الكود مثل هذا:
define(function () {function add (x,y) {return x + y;}});في هذا المثال ، قمت بإنشاء وظيفة إضافة بسيطة بدون أي تبعيات ، ولكن إذا كانت هذه الوظيفة تحتاج إلى jQuery للعمل بشكل صحيح ، فسيتم بناء هيكل التعريف على النحو التالي:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});باستخدام هذه الصيغة ، نطلب من جافا سكريبت الذهاب للحصول على jQuery أولاً ، ثم تشغيل الكود بحيث يتوفر jQuery عند الحاجة. يمكننا أيضًا استخدام هذا في الوحدات التي كتبناها في ملفات جافا سكريبت ، وهي لا تقتصر على الأطر أو المكونات الإضافية.
كما ترى ، يُعد RequireJS أداة رائعة لتنظيم ملفاتك إلى وحدات ، وتحميل ما تحتاج إليه فقط. الجانب السلبي هو أن عددًا كبيرًا جدًا من ملفات جافا سكريبت يؤدي إلى ضعف أوقات التحميل ، وهذا هو سبب احتواء RequireJS على محسن لجمع البيانات من جميع الملفات ووضعها في ملف مصغَّر واحد.
الكل في الكل ، RequireJS هي واحدة من أفضل الطرق لتنظيم وتحسين جافا سكريبت للويب الحديث.
هل استخدمت RequireJS في مشروع؟ هل حسّن سير عملك؟ اسمحوا لنا أن نعرف في التعليقات.