الآن ، require.js هي طريقتي المفضلة لبرمجة JavaScript. إنه يجعل الكود في قطع ويسهل إدارته. يمكن أن يساعدنا require.js Optimizer في توزيع تطبيق أكبر على تطبيقات أصغر متعددة ، وتوصيله من خلال التبعيات ، وأخيراً دمجه أثناء التجميع والتعبئة. هذه الأسباب تدفعنا إلى استخدام require.js.
لذلك ، دعونا نلقي نظرة على ما تتطلبه الميزات الرائعة. js!
متوافق مع CommonJs
تظهر AMD (مواصفات تعريف الوحدة غير المتزامنة) من مجموعة عمل CommonJS. يهدف CommonJS إلى إنشاء نظام بيئي من JavaScript. جزء مهم من CommonJs هو النقل/C ، سلف AMD ، و require.js هو تطبيق لهذه المواصفات.
يرجع الفرق في بناء الجملة بين وحدة CommonJS ووحدة AMD بشكل رئيسي إلى حاجة AMD إلى دعم الميزات غير المتزامنة للمتصفح. يجب مزامنة وحدة CommonJS ، على سبيل المثال:
نسخة الكود كما يلي:
var somemodule = require ("somemodule") ؛
var othermodule = require ("othermodule") ؛
orports.asplode = function () {
somemodule.doteHawesome () ؛
othermodule.domOawAwesome () ؛
} ؛
تقوم وحدة AMD بتحميل الوحدة النمطية بشكل غير متزامن ، وبالتالي فإن تعريف الوحدة النمطية يتطلب صفيفًا كمعلمة الأولى ، ويتم تمرير الوظيفة التي تسمى مرة أخرى بعد تحميل الوحدة النمطية كمعلمة ثانية.
نسخة الكود كما يلي:
define (["somemodule"] ، وظيفة (somemodule) {
يعود {
Asplode: function () {
somemodule.doteHawesome () ؛
// سيتم تنفيذ هذا بشكل غير متزامن
تتطلب (["othermodule"] ، دالة (othermodule) {
othermodule.domOawAwesome () ؛
}) ؛
}
} ؛
}) ؛
ومع ذلك ، فإن AMD متوافق أيضًا مع بناء جملة CommonJS في require.js. من خلال لف وحدة CommonJS من خلال وظيفة تعريف AMD ، يمكنك أيضًا الحصول على وحدة CommonJS في AMD ، على سبيل المثال:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة النمطية)
var somemodule = require ("somemodule") ؛
var othermodule = require ("othermodule") ؛
somemodule.doteHawesome () ؛
othermodule.domOawAwesome () ؛
orports.asplode = function () {
somemodule.doteHawesome () ؛
othermodule.domOawAwesome () ؛
} ؛
}) ؛
في الواقع ، يفسر require.js محتوى الوحدة النمطية لوظيفة رد الاتصال من خلال الوظيفة .ToString ، ويجد تبعيةها الصحيحة ، ويحولها إلى وحدة AMD عادية. تجدر الإشارة إلى أنه إذا كتبت وحدات بهذه الطريقة ، فقد تكون غير متوافقة مع اللوادر الأخرى AMD لأن هذا ينتهك مواصفات AMD ، ولكن يمكن أن يفهم كيف يتم كتابة هذا التنسيق جيدًا.
ما يحدث هنا ، يتطلب. من المهم أن نلاحظ أنه إذا اخترت كتابة وحدات كهذه ، فمن المحتمل أن تكون غير متوافقة مع لوادر وحدة AMD الأخرى لأن هذا ينتهك مواصفات AMD ، ولكن من الجيد فهم هذا التنسيق!
CDN الظهر
هناك كنز آخر مخفي. يمكننا تحقيق ذلك من خلال requist.config:
نسخة الكود كما يلي:
requistjs.config ({
المسارات: {
jQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js' ،
'lib/jQuery'
]
}
}) ؛
لا تبعيات؟ كائن حرفي؟ لا مشكلة!
عندما تكتب وحدة نمطية لا تحتوي على تبعيات وتُرجع فقط كائنًا يحتوي على بعض الوظائف الوظيفية ، يمكننا استخدام بناء جملة بسيط:
نسخة الكود كما يلي:
يُعرِّف({
forcechoke: function () {
} ،
forcelighting: function () {
} ،
forcerun: function () {
}
}) ؛
إنها بسيطة ومفيدة إذا كانت الوحدة مجرد مجموعة من الوظائف ، أو مجرد حزمة.
التبعية الدائرية
في بعض الحالات ، قد نحتاج إلى وظائف في وحدات Modulea و Modulea للاعتماد على بعض التطبيقات. هذا هو التبعية الدائرية.
نسخة الكود كما يلي:
// JS/APP/MODULEA.JS
تعريف (["متطلبات" ، "تطبيق/تطبيق"] ،
الدالة (تتطلب ، التطبيق) {
يعود {
Foo: Function (title) {
var app = require ("app/app") ؛
إرجاع app.something () ؛
}
}
}
) ؛
احصل على عنوان الوحدة النمطية
إذا كنت بحاجة إلى الحصول على عنوان الوحدة ، فيمكنك القيام بذلك ...
نسخة الكود كما يلي:
var path = require.tourl ("./ style.css") ؛
baseurl
عادة ، عند إجراء اختبارات الوحدة ، قد يتم وضع رمز المصدر في مجلد مشابه لـ SRC ، وفي الوقت نفسه ، قد يتم وضع الاختبار في مجلد مشابه للاختبارات. قد يكون من الصعب الحصول على تكوين الاختبار بشكل صحيح.
على سبيل المثال ، لدينا ملف index.html في مجلد الاختبارات ونحتاج إلى تحميل الاختبارات/المواصفات/*. JS محليًا. وافتراض أن جميع رمز المصدر موجود في SRC/JS/*. JS وهناك Main.js في هذا المجلد.
في index.html ، لا يتم ضبط البيانات عند الحاجة إلى تحميل. js.
نسخة الكود كما يلي:
<script src = "src/js/pendor/require.js"> </script>
<script>
طلب (["../src/js/main.js"] ، وظيفة () {
requist.config ({
baseurl: "../src/js/"
}) ؛
يتطلب([
"./spec/test.spec.js" ،
"./spec/moar.spec.js"
]، وظيفة() {
// ابدأ إطار الاختبار الخاص بك
}) ؛
}) ؛
</script>
يمكنك أن تجد أن main.js محملة. ومع ذلك ، نظرًا لعدم ضبط البيانات ، نحتاج إلى صياغة قاعدة كما نريد. عند استخدام Data-Main ، سيتم تعيين BaseUrl تلقائيًا وفقًا للملف الذي يقوم بتعيينه.
هنا يمكنك رؤية main.js محملة. ومع ذلك ، نظرًا لأنه لا يقوم بتحميل علامة البرنامج النصي الرئيسية للبيانات ، فعليك تحديد قاعدة. عندما يتم استخدام البيانات بشكل أساسي لـ BaseUrl ، تم استنتاجها من الموقع في الملف الرئيسي. عن طريق تخصيص BaseUrl ، يمكننا بسهولة تخزين رمز الاختبار ورمز التطبيق بشكل منفصل.
JSONP
يمكننا التعامل مع محطات JSONP مثل هذا:
نسخة الكود كما يلي:
يتطلب( [
"http://somapi.com/foo؟callback=define"
] ، وظيفة (البيانات) {
console.log (البيانات) ؛
}) ؛
بالنسبة للمكتبات غير AMD ، استخدم Shim لحل
بموجب العديد من الطلبات ، نحتاج إلى استخدام المكتبات غير AMD. على سبيل المثال ، لا يتكيف العمود الفقري والخطير مع مواصفات AMD. و jQuery في الواقع يعرّف نفسه على أنه متغير عالمي يسمى jQuery ، لذلك لا يتعين عليك فعل أي شيء مع jQuery.
لحسن الحظ ، يمكننا استخدام تكوين Shim لحل هذه المشكلة.
نسخة الكود كما يلي:
requist.config ({
المسارات: {
"العمود الفقري": "البائع/العمود الفقري" ،
"السطحي": "البائع/الاتحادي"
} ،
شيم: {
"العمود الفقري": {
DEPS: ["Underscore"] ،
الصادرات: "العمود الفقري"
} ،
"Underscore": {
الصادرات: "_"
}
}
}) ؛