مقدمة
Seajs هو إطار تحميل وحدة JavaScript يتبع مواصفات CommonJS ، والتي يمكن أن تنفذ آلية التطوير والتحميل المعياري لـ JavaScript. على عكس أطر عمل JavaScript مثل jQuery ، لا يمد Seajs ميزات لغة التغليف ، ولكنها فقط تنفذ modularization وتحميلها بواسطة الوحدة النمطية. الغرض الرئيسي من Seajs هو جعل تطوير JavaScript Modular وتحميل بسهولة وسعيد ، المهندسين الأماميين المجانيين من ملف JavaScript الثقيل ومعالجة الاعتماد على الكائن ، ويمكنهم التركيز على منطق الكود نفسه. يمكن دمج Seajs تمامًا مع أطر مثل jQuery. يمكن أن يؤدي استخدام Seajs إلى تحسين قابلية القراءة ووضوح رمز JavaScript ، وحل مشكلات ارتباك التبعية وتشابك الكود الشائع في برمجة JavaScript ، وتسهيل كتابة وصيانة الكود.
مؤلف كتاب Seajs هو Yu Bo ، وهو مهندس في نهاية الواجهة الأمامية Taobao.
يتبع Seajs نفسها المفهوم (تبقيه بسيطًا ، غبيًا) للتنمية. في عملية تعلم Seajs ، يمكنك أن تشعر بجوهر مبدأ القبلة في كل مكان - فعل شيئًا واحدًا فقط وفعل شيئًا جيدًا.
تستخدم هذه المقالة أولاً مثالًا لمقارنة برمجة JavaScript التقليدية بشكل حدسي وبرمجة JavaScript المعيارية باستخدام Seajs ، ثم يناقش أساليب استخدام Seajs بالتفصيل ، وأخيراً تقدم بعض المعلومات المتعلقة بـ Seajs.
الوضع التقليدي مقابل وحدات Seajs
لنفترض أننا نقوم الآن بتطوير تطبيق ويب TinyApp ، وقررنا استخدام إطار JQuery في TinyApp. ستستخدم الصفحة الرئيسية لـ TinyApp الوحدة النمطية 1 ، والتي تعتمد على الوحدة النمطية.
التنمية التقليدية
باستخدام طرق التطوير التقليدية ، فإن رمز كل ملف JS هو كما يلي:
انسخ الرمز كما يلي: //module1.js
var module1 = {
تشغيل: function () {
إرجاع $ .merge (['module1'] ، $ .merge (module2.run () ، module3.run ())) ؛
}
}
//module2.js
var module2 = {
تشغيل: function () {
إرجاع ['module2'] ؛
}
}
//module3.js
var module3 = {
تشغيل: function () {
إرجاع $ .merge (['module3'] ، module4.Run ()) ؛
}
}
//module4.js
var module4 = {
تشغيل: function () {
إرجاع ['module4'] ؛
}
}
في هذا الوقت ، يحتاج index.html إلى الإشارة إلى الوحدة النمطية 1.js وجميع تبعياتها الأساسية (لاحظ الترتيب):
انسخ الرمز كما يلي: <! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> tinyapp </itlem>
<script src = "./ jquery-min.js"> </script>
<script src = "./ module4.js"> </script>
<script src = "./ module2.js"> </script>
<script src = "./ module3.js"> </script>
<script src = "./ module1.js"> </script>
</head>
<body>
<p> </p>
<script>
$ ('. content'). html (module1.run ()) ؛
</script>
</body>
</html>
مع تقدم المشروع ، سيكون هناك المزيد والمزيد من ملفات JS والتبعيات ستصبح أكثر تعقيدًا ، مما يجعل من الصعب صيانة كود JS و Script في HTML.
تطور Seajs المعياري
دعونا نلقي نظرة على كيفية تنفيذ نفس الوظائف باستخدام Seajs.
الأول هو index.html:
انسخ الرمز كما يلي: <! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> tinyapp </itlem>
</head>
<body>
<p> </p>
<script src = "./ sea.js"> </script>
<script>
seajs.use ('./ init' ، وظيفة (init) {
init.initPage () ؛
}) ؛
</script>
</body>
</html>
يمكنك أن ترى أن صفحة HTML لا تحتاج إلى تقديم جميع ملفات JS ، ولكنها تقدم فقط SEA.JS عند عرض الملفات.
يقوم index.html بتحميل وحدة init ويستخدم طريقة initPage لهذه الوحدة لتهيئة بيانات الصفحة.
دعونا نلقي نظرة على كتابة JavaScript المعيارية التالية:
انسخ الرمز كما يلي: //jquery.js
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة النمطية) = {
// رمز jquery.js الأصلي ...
module.exports = $ .noconflict (true) ؛
}) ؛
//init.js
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة النمطية) = {
var $ = require ('jQuery') ؛
var m1 = require ('module1') ؛
orports.initpage = function () {
$ ('. content'). html (m1.run ()) ؛
}
}) ؛
//module1.js
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة النمطية) = {
var $ = require ('jQuery') ؛
var m2 = require ('module2') ؛
var m3 = require ('module3') ؛
orports.run = function () {
إرجاع $ .merge (['module1'] ، $ .merge (m2.run () ، m3.run ())) ؛
}
}) ؛
//module2.js
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة النمطية) = {
orports.run = function () {
إرجاع ['module2'] ؛
}
}) ؛
//module3.js
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة النمطية) = {
var $ = require ('jQuery') ؛
var m4 = require ('module4') ؛
orports.run = function () {
إرجاع $ .merge (['module3'] ، m4.Run ()) ؛
}
}) ؛
//module4.js
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة النمطية) = {
orports.run = function () {
إرجاع ['module4'] ؛
}
}) ؛
للوهلة الأولى ، يبدو أن الكود أكثر تعقيدًا ، لأن هذا المثال بسيط للغاية. ومع ذلك ، من هذا لا يزال بإمكاننا رؤية بعض ميزات Seajs:
أولاً ، لا تحتاج صفحة HTML إلى الحفاظ على قائمة طويلة من علامات البرنامج النصي ، ما عليك سوى تقديم SEA.JS.
والثاني هو أن رمز JS منظم كوحدات.
من خلال هذا المثال ، يجب أن يكون لدى الأصدقاء انطباع بديهي عن Seajs.