هذه المقالة هي ملخص لبعض نقاط المعرفة لـ requirejs ، مصحوبة بتحليل مثال في التطبيقات متعددة الصفحات.
هيكل الدليل لهذه القضية هو كما يلي:
requistjs API ثلاث وظائف رئيسية: تعريف (إنشاء وحدة) ، متطلب (وحدة تحميل) ، والتكوين (التكوين)
1. تحميل ملف JS في ملف HTML
محتوى page1.html كما يلي:
<! doctype html> <html> <head> <title> الصفحة 1 </itlem> <script data-main = "scripts/page1" src = "scripts/lib/require.js"> </script> </head>
محتوى page2.html كما يلي:
<! doctype html> <html> <head> <title> الصفحة 2 </itlem> <script data-main = "scripts/page2" src = "scripts/lib/require.js"> </script> </head> <body>
تمديد المعرفة:
تحدد سمة MAIN البيانات الوحدة الرئيسية لبرنامج الويب ، ويتم تحميل هذا الملف أولاً بواسطة requirejs. نظرًا لأن اسم لاحقة الملف الافتراضية لـ requistjs هو JS ، يمكن اختصار Page1.js كصفحة 1
قواعد أولوية مسار الجذر لتحميل ملفات البرنامج النصي
عند تحميل وحدة مع مطلوبة () ، سيتم حذف لاحقة .js وسيتم تفتيشها من baseurl ؛ إذا كان لديها لاحقة .js ، أو تبدأ بـ "/" ، أو تحتوي على بروتوكول URL (HTTP/HTTPS) ، فسيكون الجذر
ابحث وفقًا لإعدادات المسار المحددة الخاصة بك
config> data-main> baseurl الافتراضي
إذا لم يتم تعيين البيانات والتكوين ، فإن baseurl الافتراضي هو الدليل الذي توجد فيه صفحة HTML التي تشير إليها.
Set Data-Main ، ثم Baseurl هو الدليل الذي توجد فيه الوحدة الرئيسية (على سبيل المثال ، الوحدة الرئيسية في HTML الأولى هي Page1.js ، وبالتالي فإن الدليل الذي يقع فيه/البرامج النصية هو دليل الجذر)
قم بتكوين config ، وتعيين baseurl بشكل صريح ، وكذلك تعيين مسار منفصل لكل وحدة.
2. تكوين مسارات الوحدات ، إلخ.
استخدم طريقة require.config () لتخصيص سلوك التحميل للوحدة. في تطبيق متعدد الصفحات ، يمكن كتابة التكوين في ملف مشترك ، مثل ملف common.js في هذا المثال. ثم ، بعد كل صفحة تقوم بتحميل التكوين الحالي ، يتم تحميل الوحدات المطلوبة في وظيفة رد الاتصال.
رمز common.js كما يلي:
require.config ({baseurl: 'scripts/app' ، المسارات: {jQuery: ['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min' ،'../lib/jquery']}}) ؛تمديد المعرفة:
عناصر التكوين المدعومة:
baseurl:
مسار جذر البحث لجميع الوحدات النمطية. ملاحظة: عندما يبدأ ملف JS المحمّل (ينتهي بـ .js ، بـ "/" ، يحتوي على بروتوكول) ، فلن يتم استخدام Baseurl ؛
المسارات:
أسماء وحدات خرائط المسار التي لم يتم وضعها مباشرة تحت baseurl. يكون موضع البداية عند ضبط المسار نسبة إلى baseurl ، ما لم يبدأ إعداد المسار بـ "/" أو يحتوي على بروتوكول URL ؛
ملاحظة: لا يمكن أن يحتوي المسار المحدد في المسارات. ج. ويمكن ضبط مسار التحميل عدة مرات. في حالة فشل التحميل من CDN ، سيتم تحميل ملف JS المحلي ؛
شيم:
تكوين الوحدات النمطية التي لا تستخدم DEFINE () لإعلان التبعيات ؛
هناك معلمتان يجب الانتباه إلى:
(1) قيمة الصادرات (اسم متغير الإخراج) ، فضح واجهة الطريقة
(2) صفيف DEPS ، مما يشير إلى تبعية الوحدة النمطية
يحب:
require.config ({baseurl: '/scripts/lib' ، shim: {zepto: {exports: '$'} ، backbone: {deps: ['Underscore' ، 'Zepto'] ، orders: 'backbone'} ، 'zepto.animate': ['zepto']}}) ؛3. تحميل الوحدة
رمز Page1.JS كما يلي:
تتطلب (['./ common'] ، وظيفة (شائعة) {require (['saypage1'] ، function (saypage1) {saypage1.hello () ؛}) ؛}) ؛رمز Page2.js كما يلي:
تتطلب (['./ common'] ، وظيفة (شائعة) {require (['saypage2'] ، function (saypage2) {saypage2.hello () ؛}) ؛}) ؛توسيع المعرفة:
تقبل الدالة المطلوبة () معلمتين. المعلمة الأولى هي صفيف يمثل الوحدة النمطية التي تعتمد عليها ؛ المعلمة الثانية هي وظيفة رد الاتصال ، وسيتم تسميتها فقط بعد تحميل جميع الوحدات المحددة حاليًا بنجاح. يمكن استدعاء الوحدة النمطية المحملة كمعلمة لوظيفة رد الاتصال.
من أجل التأكد من تحميل الوحدة المطلوبة فقط بعد اكتمال التكوين ، فهي مخصصة بشكل أساسي للتحليل الصحيح للمسار وتتطلب ذلك في وظيفة رد الاتصال.
4. تعريف الوحدات النمطية
الكود في sealhpage1.js:
define (['jQuery'] ، function ($) {function sealhi () {$ ('body'). إلحاق ('<h1> hello page1! </h1>') ؛} return {hello: sayhi}}) ؛تمديد المعرفة:
تقبل الدالة تعريف أيضًا معلمتين. المعلمة الأولى هي مجموعة من الوحدات التابعة ، والمعلمة الثانية هي وظيفة رد الاتصال.
بالطبع ، عندما يتم إطلاقه أخيرًا ، يجب دمج ملفات JS وضغطها. يمكنك استخدام R.JS ، وهو مريح وسريع ~
ما ورد أعلاه هو مثال على تحليل للتطبيق متعدد الصفحات الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!