คำนำ
SEAJS เป็นกรอบการโหลดโมดูล JavaScript ที่เป็นไปตามข้อกำหนดของ CommonJS ซึ่งสามารถใช้กลไกการพัฒนาแบบแยกส่วนและกลไกการโหลดของ JavaScript ซึ่งแตกต่างจากเฟรมเวิร์ก JavaScript เช่น jQuery, SEAJS ไม่ขยายคุณสมบัติภาษาห่อหุ้ม แต่ใช้เฉพาะการปรับแบบ modularization และการโหลดโดยโมดูล วัตถุประสงค์หลักของ SEAJS คือการทำให้การพัฒนา JavaScript แบบแยกส่วนและโหลดได้อย่างง่ายดายและมีความสุขวิศวกรส่วนหน้าฟรีจากไฟล์ JavaScript หนักและการประมวลผลการพึ่งพาวัตถุและสามารถมุ่งเน้นไปที่ตรรกะของรหัสเอง SEAJS สามารถรวมเข้ากับเฟรมเวิร์กได้อย่างสมบูรณ์แบบเช่น jQuery การใช้ SEAJS สามารถปรับปรุงความสามารถในการอ่านและความชัดเจนของรหัส JavaScript แก้ปัญหาความสับสนในการพึ่งพาและการพัวพันกับรหัสที่พบได้ทั่วไปในการเขียนโปรแกรม JavaScript และอำนวยความสะดวกในการเขียนและบำรุงรักษารหัส
ผู้เขียน SEAJS คือ Yu Bo วิศวกร Front-end ของ Taobao
Seajs เองตามแนวคิด KISS (Keep It Simple โง่) สำหรับการพัฒนา ในกระบวนการเรียนรู้ SEAJS คุณสามารถรู้สึกถึงสาระสำคัญของหลักการจูบได้ทุกที่ - ทำเพียงสิ่งเดียวและทำสิ่งเดียวได้ดี
บทความนี้ใช้ตัวอย่างแรกในการเปรียบเทียบการเขียนโปรแกรม JavaScript แบบดั้งเดิมและการเขียนโปรแกรม JavaScript แบบแยกส่วนโดยใช้ SEAJS จากนั้นกล่าวถึงการใช้ SEAJ ในรายละเอียดและในที่สุดก็ให้ข้อมูลบางอย่างที่เกี่ยวข้องกับ SEAJS
โหมดดั้งเดิมกับ SEAJS modularity
สมมติว่าตอนนี้เรากำลังพัฒนาเว็บแอปพลิเคชัน TinyApp และเราตัดสินใจที่จะใช้ JQuery Framework ใน TinyApp หน้าแรกของ TinyApp จะใช้ Module1.js ซึ่งขึ้นอยู่กับ Module2.js และ Module3.js และ Module3.js
การพัฒนาแบบดั้งเดิม
การใช้วิธีการพัฒนาแบบดั้งเดิมรหัสของไฟล์ JS แต่ละไฟล์มีดังนี้:
คัดลอกรหัสดังนี้: //module1.js
var module1 = {
Run: function () {
return $ .merge (['module1'], $ .merge (module2.run (), module3.run ()));
-
-
//module2.js
var module2 = {
Run: function () {
return ['module2'];
-
-
//module3.js
var module3 = {
Run: function () {
return $ .merge (['module3'], module4.run ());
-
-
//module4.js
var module4 = {
Run: function () {
return ['module4'];
-
-
ในเวลานี้ index.html จำเป็นต้องอ้างอิงโมดูล 1.js และการพึ่งพาพื้นฐานทั้งหมด (หมายเหตุคำสั่งซื้อ):
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> TinyApp </title>
<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>
$ ('. เนื้อหา'). html (module1.run ());
</script>
</body>
</html>
เมื่อโครงการดำเนินไปจะมีไฟล์และการพึ่งพา JS มากขึ้นเรื่อย ๆ จะมีความซับซ้อนมากขึ้นเรื่อย ๆ ทำให้รหัส JS และสคริปต์ใน HTML มักจะรักษาได้ยาก
การพัฒนาโมดูลาร์ SEAJS
ลองมาดูวิธีการใช้งานฟังก์ชั่นเดียวกันโดยใช้ SEAJS
อันดับแรกคือ index.html:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> TinyApp </title>
</head>
<body>
<p> </p>
<script src = "./ sea.js"> </script>
<script>
Seajs.use ('./ init', function (init) {
init.initpage ();
-
</script>
</body>
</html>
คุณจะเห็นว่าหน้า HTML ไม่จำเป็นต้องแนะนำไฟล์ JS ทั้งหมดอีกต่อไป แต่จะแนะนำ Sea.Js. JS เท่านั้นที่จะจัดการกับการพึ่งพาทั้งหมดและโหลดไฟล์ JS ที่เกี่ยวข้อง เมื่อการเรนเดอร์เพจ
index.html โหลดโมดูล init และใช้วิธีการเริ่มต้นของโมดูลนี้เพื่อเริ่มต้นข้อมูลหน้า
มาดูการเขียน JavaScript แบบแยกส่วนต่อไปนี้:
คัดลอกรหัสดังนี้: //jquery.js
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) = {
// รหัส jQuery.js ดั้งเดิม ...
module.exports = $ .noconflict (จริง);
-
//init.js
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) = {
var $ = ต้องการ ('jQuery');
var m1 = ต้องการ ('module1');
exports.initPage = function () {
$ ('. เนื้อหา'). html (m1.run ());
-
-
//module1.js
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) = {
var $ = ต้องการ ('jQuery');
var m2 = ต้องการ ('module2');
var m3 = ต้องการ ('module3');
exports.run = function () {
return $ .merge (['module1'], $ .merge (m2.run (), m3.run ()));
-
-
//module2.js
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) = {
exports.run = function () {
return ['module2'];
-
-
//module3.js
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) = {
var $ = ต้องการ ('jQuery');
var m4 = ต้องการ ('module4');
exports.run = function () {
ส่งคืน $ .merge (['module3'], m4.run ());
-
-
//module4.js
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) = {
exports.run = function () {
return ['module4'];
-
-
เมื่อมองแวบแรกรหัสดูเหมือนจะซับซ้อนมากขึ้นเนื่องจากตัวอย่างนี้ง่ายเกินไป อย่างไรก็ตามจากนี้เรายังสามารถเห็นคุณสมบัติบางอย่างของ SEAJs:
ก่อนอื่นหน้า HTML ไม่จำเป็นต้องรักษารายการแท็กสคริปต์ที่ยาวเพียงแนะนำ Sea.Js.
ประการที่สองคือรหัส JS ถูกจัดระเบียบเป็นโมดูล
จากตัวอย่างนี้เพื่อน ๆ ควรมีความประทับใจอย่างชาญฉลาดของ SEAJS