Seajs هو إطار تحميل الوحدة النمطية التي طورتها Yubo يتبع مواصفات CommonJS ، والتي يمكن استخدامها لتحميل أي وحدة JavaScript وأنماط وحدة CSS بسهولة وسعيد. Seajs صغير جدًا ، لأن الحجم بعد الضغط و GZIP هو 4K فقط ، والواجهات والأساليب صغيرة جدًا أيضًا. Seajs لديه اثنين من النوى: تعريف الوحدة ونقابة الوحدة النمطية وتبعيات. Seajs قوية جدا. يمكن لـ Seajs تحميل أي وحدة JavaScript ونمط وحدة CSS. ستضمن Seajs أنه عند استخدام وحدة نمطية ، قمت بتحميل وحدات أخرى تعتمد عليها في بيئة تشغيل البرنامج النصي. قال يو بو إن Seajs يمكن أن تسمح لك بالاستمتاع بمتعة كتابة الكود دون القلق بشأن مشكلات التحميل. هل سئمت من العديد من مراجع JS و CSS؟ لقد قمت بحساب المراجع 39 CSS و JS على الصفحة الرئيسية لموقع شركتنا. يمكن تخيل تأثيره:
1. لا تفضي إلى الصيانة والواجهة الأمامية والخلفية هي نفسها
2. هناك الكثير من طلبات HTTP. بطبيعة الحال ، يمكن حل هذا من خلال الدمج ، ولكن إذا لم يكن هناك اندماج خلفي مباشرة ، فإن تكلفة العمالة مرتفعة للغاية. حتى لو كانت الواجهة الخلفية تدمجها وتحافظ عليها ، فإن هذه السلسلة الطويلة ستنظر إليها بالتأكيد.
يمكن باستخدام Seajs حل هذه المشاكل بشكل جيد للغاية.
تعريف الوحدة النمطية
تحديد الوحدة هو أبسط. على سبيل المثال ، تحديد وحدة Sayhello وإنشاء وثيقة sayhello.js:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
Exports.Sayhello = وظيفة (Eleid ، نص) {
document.getElementById (eleid) .innerhtml = text ؛
} ؛
}) ؛
دعونا نلقي نظرة أولاً على المعلمة الصادرات. يتم استخدام المعلمة الصادرات لتوفير واجهة برمجة تطبيقات الوحدة النمطية. أي أن الوحدات الأخرى من هذه الصادرات يمكنها الوصول إلى طريقة Sayhello.
وحدة تحميل الوحدة
على سبيل المثال ، هناك عنصر على صفحتنا مع معرف "Out" ونريد إخراج "Hello Seajs!" ،
ثم يمكننا تقديم sea.js أولاً
ثم استخدم وحدة Sayhello:
نسخة الكود كما يلي:
Seajs.use ("Sayhello/Sayhello" ، وظيفة (say) {
say.sayhello ("Out" ، "Hello Seajs!") ؛
}) ؛
هنا الاستخدام هو طريقة استخدام الوحدات النمطية:
المعلمة الأولى هي تمثيل الوحدة النمطية ، والتي يمثلها المسار النسبي بالنسبة للبحر. يمكن حذف لاحقة ".js" بعد sealhello.js. بالطبع ، هناك العديد من الطرق لتحديد هذه الوحدة. للحصول على تفاصيل ، يرجى التحقق من الوصف الرسمي: http://seajs.com/docs/zh-cn/module-udentifier.html
المعلمة الأولى هي وظيفة رد الاتصال. say.sayhello () يدعو التصدير. طريقة sayhello لوحدة Sayhello. بالطبع ، هناك معلمة قول في وظيفة رد الاتصال هذه.
تبعيات الوحدة النمطية
يجب أن توجد تبعيات الوحدة النمطية عند تعريف الوحدات النمطية. على سبيل المثال ، أعد كتابة وحدة Sayhello أعلاه. لنفترض أن لدينا بالفعل وحدة DOM عامة ، مثل بعض الطرق مثل الحصول على العناصر ، والأنماط الإعداد ، وما إلى ذلك ، مثل وحدة DOM ، اكتب dom.js على النحو التالي
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
var dom = {
/**
* احصل على كائن DOM من خلال سمة المعرف للعنصر ، أو المعلمات هي سلاسل ، أو سلاسل متعددة
* ID getByid
* method getbyid
* param {string} معرف معرف السمة
* regurn {htmlelement | الكائن} htmlelement مع المعرف ، أو لاغية إذا لم يتم العثور على أي منها.
*/
getByid: function () {
var els = [] ؛
لـ (var i = 0 ؛ i <enduments.length ؛ i ++) {
var el = الوسيطات [i] ؛
if (typeof el == "string") {
el = document.getElementById (el) ؛
}
if (الحجج. length == 1) {
إرجاع EL ؛
}
Els.push (EL) ؛
}
إرجاع إلس.
} ،
/**
* الحصول على الكائن ، يمكنك المرور في كائن أو سلسلة. إذا تم تمرير السلسلة ، يتم الحصول على الكائن في شكل document.getElementById ()
* get
* param {string} el html element
* regurn {object} كائن htmlelement.
*/
الحصول على: وظيفة (el) {
if (el & amp ؛ amp ؛ & amp ؛ amp ؛ (el.tagname || el.item)) {
إرجاع EL ؛
}
إرجاع this.getbyid (el) ؛
}
} ؛
إرجاع دوم ؛
}) ؛
ثم يمكن كتابة وحدة Sayhello مثل هذا. لكي لا تؤثر على الصفحة التجريبية الأصلية ، قمت بتعيين وحدة Sayhelloa جديدة. يمكننا كتابة sayhelloa.js مثل هذا:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
var dom = required ("dom/dom") ؛
يتطلب ("sayhelloa/sayhello.css") ؛
Exports.Sayhello = وظيفة (Eleid ، نص) {
dom.get (eleid) .innerhtml = text ؛
} ؛
}) ؛
يتم استخدام وظيفة المتطلبات لإنشاء تبعيات الوحدة. على سبيل المثال ، تعتمد وحدة Sayhelloa أعلاه على وحدة DOM لأنه يتم استخدام طريقة الحصول على وحدة DOM.
لاحظ أن var dom = يتطلب ("DOM/DOM") هنا ، تعين هذه الجملة وحدة DOM المطبقة إلى DOM ؛ طلب ("Sayhelloa/sayhello.css") يطبق مباشرة وحدة أو ملف sayhello.css CSS. سيشير هذا إلى ملف CSS على الصفحة.
لقد واجهت مشكلة مع Seajs في الأيام الأخيرة. كلما واجهت مشكلة في ذلك ، كلما أحببته. شكرا يو بو! شكرا Seajs! بالطبع قد تعتقد أنه لا توجد حاجة للقيام بذلك بمثل هذا المثال البسيط. في الواقع ، إذا كانت المشاريع الصغيرة التي تحتوي على عدد أقل من ملفات JS تشعر بالرضا تجاه المزايا المعيارية ، ولكن تنعكس مزايا أكثر وحدات في عدد ملفات JS أو المتوسطة أو فوق المشاريع.