SEAJS เป็นเฟรมเวิร์กการโหลดโมดูลที่พัฒนาโดย Yubo ซึ่งเป็นไปตามข้อกำหนดของ CommonJS ซึ่งสามารถใช้ในการโหลดโมดูล JavaScript และรูปแบบโมดูล CSS ได้อย่างง่ายดายและมีความสุข SEAJS มีขนาดเล็กมากเนื่องจากปริมาตรหลังจากการบีบอัดและ GZIP มีเพียง 4K และอินเทอร์เฟซและวิธีการก็มีขนาดเล็กมากเช่นกัน SEAJS มีสองแกน: คำจำกัดความของโมดูลและการโหลดโมดูลและการพึ่งพา Seajs มีพลังมาก SEAJS สามารถโหลดโมดูล JavaScript และโมดูล CSS ได้ SEAJS จะตรวจสอบให้แน่ใจว่าเมื่อคุณใช้โมดูลคุณได้โหลดโมดูลอื่น ๆ ที่คุณต้องพึ่งพาในสภาพแวดล้อมที่ใช้สคริปต์ Yu Bo กล่าวว่า SEAJS สามารถช่วยให้คุณสนุกกับความสนุกในการเขียนรหัสโดยไม่ต้องกังวลเกี่ยวกับการโหลดปัญหา คุณเบื่อกับการอ้างอิง JS และ CSS มากมายหรือไม่? ฉันนับการอ้างอิง 39 CSS และ JS ในหน้าแรกของเว็บไซต์ บริษัท ของเรา ผลกระทบที่สามารถจินตนาการได้:
1. ไม่เอื้อต่อการบำรุงรักษา front-end และ back-end เหมือนกัน
2. มีคำขอ HTTP มากเกินไป แน่นอนว่าสิ่งนี้สามารถแก้ไขได้ผ่านการผสาน แต่ถ้าไม่มีแบ็กเอนด์ผสานโดยตรงค่าแรงงานจะสูงมาก แม้ว่าแบ็กเอนด์จะรวมและรักษาไว้ แต่สตริงที่ยาวเช่นนี้จะดูแน่นอน
การใช้ SEAJS สามารถแก้ปัญหาเหล่านี้ได้เป็นอย่างดี
คำจำกัดความของโมดูล
การกำหนดโมดูลนั้นง่ายกว่า ตัวอย่างเช่นการกำหนดโมดูล Sayhello และสร้างเอกสาร sayhello.js:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
exports.sayhello = function (eleid, text) {
document.getElementById (eleid) .innerhtml = ข้อความ;
-
-
ก่อนอื่นให้ดูที่พารามิเตอร์การส่งออก พารามิเตอร์การส่งออกใช้เพื่อให้โมดูล API นั่นคือโมดูลอื่น ๆ ของการส่งออกนี้สามารถเข้าถึงวิธี Sayhello
การใช้การโหลดโมดูล
ตัวอย่างเช่นมีองค์ประกอบในหน้าของเราที่มี id "out" และเราต้องการส่งออก "hello seajs!"
จากนั้นเราสามารถแนะนำทะเล js ก่อน
จากนั้นใช้โมดูล Sayhello:
การคัดลอกรหัสมีดังนี้:
Seajs.use ("Sayhello/Sayhello", ฟังก์ชั่น (พูด) {
Say.sayhello ("Out", "Hello Seajs!");
-
ที่นี่การใช้เป็นวิธีการใช้โมดูล:
พารามิเตอร์แรกคือการแสดงโมดูลซึ่งแสดงโดยเส้นทางสัมพัทธ์ที่สัมพันธ์กับทะเล คำต่อท้าย ".js" หลังจาก Sayshello.js สามารถละเว้นได้ แน่นอนว่ามีวิธีการหลายวิธีในการระบุโมดูลนี้ สำหรับรายละเอียดโปรดตรวจสอบคำอธิบายอย่างเป็นทางการ: http://seajs.com/docs/zh-cn/module-identifier.html
พารามิเตอร์แรกคือฟังก์ชั่นการโทรกลับ Say.sayhello () เรียกวิธีการส่งออกวิธีการของโมดูล Sayhello แน่นอนว่ามีพารามิเตอร์พูดในฟังก์ชั่นการโทรกลับนี้
การพึ่งพาโมดูล
การพึ่งพาโมดูลควรมีอยู่จริงเมื่อมีการกำหนดโมดูล ตัวอย่างเช่นเขียนโมดูล Sayhello ด้านบนใหม่ สมมติว่าเรามีโมดูล DOM ทั่วไปอยู่แล้วเช่นวิธีการบางอย่างเช่นการได้รับองค์ประกอบการตั้งค่ารูปแบบ ฯลฯ เช่นโมดูล DOM ดังกล่าวเขียน DOM.js ดังนี้
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
var dom = {
-
* รับวัตถุ DOM ผ่านแอตทริบิวต์ id ขององค์ประกอบพารามิเตอร์คือสตริงหรือหลายสตริง
* @id getByid
* @method getByid
* @param {string} id แอตทริบิวต์ id
* @return {htmlelement | Object} HTMLELEMENT กับ ID หรือ NULL หากไม่พบ
-
getById: function () {
var els = [];
สำหรับ (var i = 0; i <arguments.length; i ++) {
var el = อาร์กิวเมนต์ [i];
if (typeof el == "String") {
EL = document.getElementById (EL);
-
if (arguments.length == 1) {
return el;
-
Els.push (EL);
-
กลับ Els;
-
-
* รับวัตถุคุณสามารถส่งผ่านในวัตถุหรือสตริง หากสตริงถูกส่งผ่านวัตถุจะได้รับในรูปแบบของ document.getElementById ()
* @id รับ
* @param {String} El Html Element
* @return {Object} Htmlelement Object
-
รับ: ฟังก์ชั่น (el) {
ถ้า (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
return el;
-
ส่งคืนสิ่งนี้ getById (el);
-
-
กลับ DOM;
-
จากนั้นโมดูล Sayhello สามารถเขียนได้เช่นนี้ เพื่อไม่ให้ส่งผลกระทบต่อหน้าตัวอย่างดั้งเดิมฉันตั้งค่าโมดูล Sayhelloa ใหม่ เราสามารถเขียน sayhelloa.js เช่นนี้:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
var dom = ต้องการ ("dom/dom");
ต้องการ ("sayhelloa/sayhello.css");
exports.sayhello = function (eleid, text) {
dom.get (eleid) .innerhtml = text;
-
-
ฟังก์ชั่นที่ต้องการใช้เพื่อสร้างการพึ่งพาของโมดูล ตัวอย่างเช่นโมดูล Sayhelloa ด้านบนขึ้นอยู่กับโมดูล DOM เนื่องจากใช้วิธีการของโมดูล DOM
โปรดทราบว่า var dom = ต้องการ ("dom/dom") ที่นี่ประโยคนี้กำหนดโมดูล DOM ที่ใช้ให้กับ DOM; ต้องการ ("sayhelloa/sayhello.css") ใช้โมดูลหรือไฟล์ Sayhello.css โดยตรงหรือไฟล์ สิ่งนี้จะอ้างถึงไฟล์ CSS บนหน้า
ฉันมีปัญหากับ SEAJS ในช่วงไม่กี่วันที่ผ่านมา ยิ่งฉันมีปัญหากับมันมากเท่าไหร่ฉันก็ยิ่งชอบมากขึ้นเท่านั้น ขอบคุณหยูโบ! ขอบคุณ Seajs! แน่นอนคุณอาจคิดว่าไม่จำเป็นต้องทำเช่นนี้ด้วยตัวอย่างง่ายๆเช่นนี้ แท้จริงแล้วหากโครงการขนาดเล็กที่มีไฟล์ JS น้อยลงรู้สึกดีเกี่ยวกับข้อได้เปรียบแบบแยกส่วน แต่ข้อดีของโมดูลาร์จะสะท้อนให้เห็นในจำนวนไฟล์ JS หรือโครงการขนาดกลางหรือสูงกว่า