تنزيل وتثبيت
لاستخدام Seajs في مشروعك ، كل التحضير الذي تحتاج إلى القيام به هو تنزيل Sea.js ووضعه في مكان ما في مشروعك.
يتم استضافة مشروع Seajs حاليًا على Github ، مع الصفحة الرئيسية على https://github.com/seajs/seajs/. يمكنك تنزيل Sea.js (مضغوط) أو Sea-debug.js (غير مضغوط) في دليل إنشاء مكتبة GIT الخاصة به.
بعد اكتمال التنزيل ، ضعه في الموضع المقابل للمشروع ، ثم قدمه من خلال علامة <script> على الصفحة ، ويمكنك استخدام Seajs.
مبادئ التنمية الأساسية SEAJS
قبل مناقشة الاستخدام المحدد لـ Seajs ، دعونا أولاً نقدم مبادئ المفهوم والتطوير المعياري لـ Seajs.
المبدأ الأساسي لاستخدام Seajs لتطوير JavaScript هو: كل شيء وحدة نمطية. بعد تقديم Seajs ، أصبح كتابة رمز JavaScript يكتب وحدة واحدة تلو الأخرى. الجمهور.
بالإضافة إلى ذلك ، يجب تعريف كل وحدة في ملف JS منفصل ، أي وحدة واحدة تقابل وحدة واحدة.
فيما يلي يصف كتابة وحدات الوحدات النمطية.
تعريف وكتابة الوحدات النمطية
تعريف تعريف الوحدة النمطية
في Seajs ، استخدم وظيفة "تحديد" لتحديد الوحدة النمطية. نظرًا لأن وثائق Seajs لا تحتوي على مرجع كامل للتعريف ، فقد قرأت رمز مصدر Seajs ووجدت أنه يمكن أن يتلقى ثلاث معلمات:
انسخ الرمز كما يلي:/**
* يحدد الوحدة النمطية.
* param {string =} معرف الوحدة النمطية.
* param {array. | string =} DEPS تبعيات الوحدة النمطية.
* param {function () | object} مصنع وظيفة المصنع للوحدة.
*/
fn.define = function (id ، deps ، factory) {
// كود الوظيفة ...
}
ما سبق مقتطف من رمز مصدر Seajs. بعد قراءة الكود المصدر ، وجدت أن قواعد التحليل لعدد المعلمات المختلفة للتعريف هي كما يلي:
إذا كان هناك معلمة واحدة فقط ، فقم بتعيين القيمة للمصنع.
إذا كان هناك معلمتان ، يتم تعيين الثاني إلى المصنع ؛
إذا كان هناك ثلاثة معلمات ، يتم تعيينها إلى المعرف والرفع والمصنع على التوالي.
ومع ذلك ، يتم استخدام جميع الأماكن التي يتم استخدامها تقريبًا ، بما في ذلك المثال الرسمي لـ Seajs ، يتم تمرير وظيفة مصنع واحدة فقط ، على غرار الكود التالي:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
// رمز الوحدة ...
}) ؛
أنا شخصياً أوصي بأن تتبع معايير أمثلة Seajs الرسمية وتحديد الوحدة النمطية مع تعريف المعلمة. إذن ما الذي سيتم فعله مع ID و DEPS؟
المعرف هو سلسلة تعريف الوحدة النمطية. إذا كنت تستخدم تحديد الوحدة النمطية في ملف A.JS تحت example.com ، فسيتم تعيين معرف هذه الوحدة على http://example.com/A.JS. المعرف. لا تحتاج DEPS عمومًا إلى تمريرها ، ويمكن تحميل الوحدات المطلوبة.
تحليل وظيفة المصنع للمصنع
وظائف المصنع هي الجسم الرئيسي وتركيز الوحدة النمطية. عندما يتم تمرير معلمة واحدة فقط لتحديد (الكتابة الموصى بها) ، فإن هذه المعلمة هي وظيفة المصنع.
1. دالة تحميل الوحدة النارية ، تستخدم لتسجيل الوحدات المعتمدة.
2. نقطة واجهة exports ، عند تحديد البيانات أو الطريقة ، تعرضها للمكالمات الخارجية.
3.Codule-بيانات تعريف الوحدة النمطية.
يمكن تحديد هذه المعلمات الثلاثة حسب الحاجة لعرض المواصفات.
دعنا نتحدث عن الوحدة النمطية أدناه. الوحدة النمطية هي كائن يخزن معلومات التعريف الخاصة بالوحدة ، على النحو التالي:
1.Module.id - معرف الوحدة النمطية.
2.Module.Defendencies - صفيف يخزن قائمة المعرف لجميع الوحدات التي تعتمد عليها هذه الوحدة.
3.module.exports-نقاط إلى نفس الكائن مثل الصادرات.
ثلاث أوضاع لكتابة الوحدات النمطية
الوضع الأول لتحديد الوحدات هو الوضع القائم على الصادرات:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
var a = required ('a') ؛
var b = requist ('b') ؛
var data1 = 1 ؛
var func1 = function () {// method private
إرجاع A.Run (Data1) ؛
}
التصدير. data2 = 2 ؛
orports.func2 = function () {// method method
العودة "مرحبا" ؛
}
}) ؛
ما سبق هو نموذج تعريف الوحدة النمطية "الأصيلة" نسبيا. بالإضافة إلى إلحاق البيانات والأساليب العامة للتصدير ، يمكنك أيضًا إرجاع كائن مباشرة لتمثيل الوحدة النمطية ، مثل الرمز التالي له نفس الوظيفة مثل الرمز أعلاه:
انسخ الرمز كما يلي: define (function (require) {
var a = required ('a') ؛
var b = requist ('b') ؛
var data1 = 1 ؛
var func1 = function () {// method private
إرجاع A.Run (Data1) ؛
}
يعود {
Data2: 2 ،
func2: function () {
العودة "مرحبا" ؛
}
} ؛
}) ؛
إذا كان تعريف الوحدة النمطية لا يحتوي على رمز آخر ولا يعيد سوى كائن واحد ، فيمكن العثور على طريقة الكتابة المبسطة التالية:
انسخ الرمز على النحو التالي: تعريف ({
البيانات: 1 ،
Func: Function () {
العودة "مرحبا" ؛
}
}) ؛
الطريقة الثالثة مناسبة للغاية للوحدات النمطية التي تحدد بيانات JSON النقية.
تحميل ومرجع الوحدات النمطية
وحدة معالجة الخوارزمية
كما ذكر أعلاه ، تتوافق الوحدة النمطية مع ملف JS. حيث تقع الوحدة الفعلية. Seajs يدعم المعرفات التالية:
العنوان المطلق - يعطي المسار المطلق لملف JS.
يحب:
نسخة الكود كما يلي: طلب ("http: // example/js/a") ؛
وهذا يعني تحميل http: //example/js/a.js.
العنوان النسبي - استخدم المكالمات النسبية للعثور على الوحدة النمطية للعثور على العنوان النسبي لملف JS حيث توجد وظيفة التحميل.
على سبيل المثال ، قم بتحميله في http: //example/js/b.js
نسخة الكود كما يلي: طلب ("./ c") ؛
ثم تحميل http: //example/js/c.js.
العنوان الأساسي - إذا كان معرف سلسلة التحميل ليس مسارًا مطلقًا ولا يبدأ بـ "./" ، يتم معالجته بالنسبة إلى "القاعدة" في التكوين العالمي لـ Seajs.
لاحظ أنه عند تحميل الوحدات أعلاه ، لا تحتاج إلى تمرير اسم لاحقة ".js" وسيضيف Seajs تلقائيًا ".js". ولكن لن تتم إضافة الحالات الثلاث التالية:
عند تحميل CSS ، مثل:
نسخة الكود كما يلي: require ("./ module1-style.css") ؛
عندما يحتوي المسار على "؟" ، مثل:
نسخة الكود كما يلي: require (<a href = "http: //example/js/a.json؟ cb = func"> http: //example/js/a.json؟ cb = func </a> ) ؛
عندما ينتهي المسار بـ "#" ، مثل:
نسخة التعليمات البرمجية كما يلي: require ("http: //example/js/a.json#") ؛
وفقًا لسيناريوهات التطبيق المختلفة ، يوفر Seajs ثلاثة واجهات برمجة التطبيقات لتحميل وحدات التحميل ، وهي Seajs.use ، تتطلب وتتطلب.
seajs.use
يستخدم Seajs.use بشكل أساسي لتحميل وحدة الدخول. تعادل وحدة الإدخال الوظيفة الرئيسية لبرنامج C ، وهي أيضًا جذر شجرة تبعية الوحدة بأكملها. في مثال TinyApp أعلاه ، init هو وحدة الدخول. استخدام seajs.use كما يلي:
نسخة الكود كما يلي:
// وضع واحد
seajs.use ('./ a') ؛
// وضع رد الاتصال
seajs.use ('./ a' ، وظيفة (a) {
A.Run () ؛
}) ؛
// وضع متعدد الوحدات
seajs.use (['./ a' ، './b'] ، function (a ، b) {
A.Run () ؛
B.Run () ؛
}) ؛
بشكل عام ، يتم استخدام Seajs.use فقط لتحميل وحدة الدخول على الصفحة. إذا كانت هناك وحدة إدخال واحدة فقط ، فيمكنك أيضًا حذف Seajs.Use عن طريق إضافة سمة "بيانات البيانات" إلى علامة البرنامج النصي التي تقدم Sea.js. طريقة الكتابة التالية:
نسخة الكود كما يلي:
<! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> tinyapp </itlem>
</head>
<body>
<p> </p>
<script src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
طريقة الكتابة هذه ستجعل HTML أكثر إيجازًا.
يتطلب
تتطلب طريقة تحميل الوحدة النمطية الرئيسية لـ Seajs.
نسخة الكود كما يلي: var m = require ('/path/to/module/file') ؛
فيما يلي مقدمة موجزة لآلية التحميل التلقائي لـ Seajs. كما ذكر أعلاه ، بعد استخدام Seajs ، فقط قم بتضمين Sea.js. فكيف يتم تحميل ملفات JS الأخرى؟ ستقوم Seajs أولاً بتنزيل وحدة الإدخال ، ثم استخدم التعبيرات العادية لمطابقة جميع المتطلبات الموجودة في الكود على طول وحدة الإدخال ، ثم قم بتنزيل ملف JS المقابل وفقًا لمعرفة مسار الملف في المتطلبات ، ثم تكرار ملف JS الذي تم تنزيله. تتشابه العملية بأكملها مع عملية اجتياز الرسم البياني (لأنه قد يكون هناك تبعية للدورة المتقاطعة ، فإن بنية بيانات التبعية بأكملها هي رسم بياني وليس شجرة).
بمجرد فهم النقطة المذكورة أعلاه ، سيكون من السهل فهم القواعد التالية:
يجب أن يكون معرف المسار الذي تم تمريره ليكون حرفيًا ، وليس تعبيرًا على سبيل المثال.
نسخة الكود كما يلي: طلب ('الوحدة' + '1') ؛
يتطلب ('module'.toLowerCase ()) ؛
سيؤدي ذلك إلى فشل Seajs في أداء المباريات العادية الصحيحة لتنزيل ملف JS المقابل.
requist.async
كما ذكر أعلاه ، ستقوم Seajs بتسجيل جميع ملفات JS المطلوبة مرة واحدة من خلال تحليل ثابت عند فتح صفحة HTML.
انسخ الرمز كما يلي: require.async ('/path/to/module/file' ، function (m) {
// كود رد الاتصال ...
}) ؛
وبهذه الطريقة ، فقط عند استخدام هذه الوحدة ، سيتم تنزيل ملف JS المقابل ، والذي يدرك تحميل رمز JavaScript عند الطلب.
التكوين العالمي من seajs
يوفر Seajs طريقة Seajs.Config التي يمكنها إعداد تكوين عالمي واستلام كائن تكوين يمثل التكوين العالمي. طريقة الاستخدام المحددة هي كما يلي:
انسخ الرمز كما يلي: seajs.config ({
القاعدة: "المسار/إلى/jslib/'،
الاسم المستعار: {
"التطبيق": "المسار/إلى/التطبيق/"
} ،
Charset: 'UTF-8' ،
مهلة: 20000 ،
تصحيح: خطأ
}) ؛
حيث تمثل القاعدة مسار العنوان الأساسي أثناء عنوان القاعدة. على سبيل المثال ، يتم تعيين القاعدة على http://example.com/js/3-barty/ ، ثم:
نسخة الكود كما يلي: var $ = require ('jQuery') ؛
http://example.com/js/3-barty/jquery.js سيتم تحميلها.
الاسم المستعار يمكن أن يضع اختصار للمسارات المشتركة الأطول.
يمثل Charset سمة charset لعلامة البرنامج النصي عند تنزيل JS.
تشير المهلة إلى الحد الأقصى للوقت لتنزيل الملف ، بالمللي ثانية.
يشير Debug إلى ما إذا كان يعمل في وضع التصحيح.
كيف يعمل Seajs مع مكتبات JS الحالية
لاستخدام مكتبة JS الموجودة مثل jQuery مع Seajs ، فقط تغلف المكتبة الحالية وفقًا لقواعد تعريف وحدة Seajs. على سبيل المثال ، ما يلي هو طريقة التغليف لـ jQuery:
انسخ الرمز على النحو التالي: define (function () {
// {{{{jQuery original code يبدأ
/*!
* JQuery JavaScript Library v1.6.1
* http://jquery.com/
*
* حقوق الطبع والنشر 2011 ، جون ريج
* مرخصة مزدوجة تحت رخص MIT أو GPL الإصدار 2.
* http://jquery.org/license
*
* يشمل sizzle.js
* http://sizzlejs.com/
* حقوق الطبع والنشر 2011 ، مؤسسة دوجو
* تم إصداره بموجب تراخيص MIT و BSD و GPL.
*
* التاريخ: الخميس 12 مايو 15:04:36 2011 -0400
*/
// ...
//}}} ينتهي الرمز الأصلي jQuery
إرجاع $ .noconflict () ؛
}) ؛
تعبئة مشروع Seajs ونشرها
قامت Seajs في الأصل بدمج أداة النشر المعبأة SM. تتمثل الفكرة الأساسية لـ SPM في دمج وضغط رمز جميع الوحدات النمطية ثم دمجها في وحدة الدخول. . ومع ذلك ، نظرًا لأن SPM لم يتم إصداره للنسخة الرسمية ، فإن هذه المقالة لا تنوي تقديمها بالتفصيل.
في الواقع ، نظرًا لأن أدوات دمج وضغط JS المستخدمة لكل مشروع مختلفة ، فقد لا تكون SPM مناسبة تمامًا لكل مشروع. بعد فهم مبادئ Seajs ، يمكنك كتابة نص دمج وتغليف يطابق خصائص مشروعك.