ดาวน์โหลดและติดตั้ง
ในการใช้ SEAJS ในโครงการของคุณการเตรียมการทั้งหมดที่คุณต้องทำคือดาวน์โหลด sea.js และวางไว้ที่ไหนสักแห่งในโครงการของคุณ
ปัจจุบันโครงการ SEAJS เป็นเจ้าภาพใน GitHub โดยมีหน้าแรกที่ https://github.com/seajs/seajs/ คุณสามารถดาวน์โหลด sea.js (บีบอัด) หรือทะเล debug.js (ไม่บีบอัด) ในไดเรกทอรีการสร้างของห้องสมุด Git
หลังจากการดาวน์โหลดเสร็จสมบูรณ์แล้วให้วางไว้ในตำแหน่งที่สอดคล้องกันของโครงการแล้วแนะนำผ่านแท็ก <Script> บนหน้าและคุณสามารถใช้ SEAJS ได้
หลักการพัฒนาขั้นพื้นฐานของ SEAJS
ก่อนที่จะพูดคุยเกี่ยวกับการใช้ SEAJ ที่เฉพาะเจาะจงก่อนอื่นมาแนะนำแนวคิดแบบแยกส่วนและหลักการพัฒนาของ SEAJS
หลักการพื้นฐานของการใช้ SEAJS เพื่อพัฒนา JavaScript คือ: ทุกอย่างเป็นโมดูล หลังจากแนะนำ SEAJS แล้วการเขียนรหัส JavaScript กลายเป็นหนึ่งโมดูลหลังจากนั้น สาธารณะ
นอกจากนี้แต่ละโมดูลควรกำหนดไว้ในไฟล์ JS แยกต่างหากนั่นคือหนึ่งที่สอดคล้องกับหนึ่งโมดูล
ต่อไปนี้อธิบายการเขียนและการเรียกโมดูล
คำจำกัดความและการเขียนของโมดูล
ฟังก์ชั่นนิยามโมดูลกำหนด
ใน SEAJS ให้ใช้ฟังก์ชัน "กำหนด" เพื่อกำหนดโมดูล เนื่องจากเอกสาร SEAJS ไม่มีการอ้างอิงที่สมบูรณ์สำหรับคำจำกัดความฉันจึงอ่านซอร์สโค้ด SEAJS และพบว่าการกำหนดสามารถรับพารามิเตอร์สามตัว:
คัดลอกรหัสดังนี้:/**
* กำหนดโมดูล
* @param {string =} id รหัสโมดูล
* @param {array. | string =} deps การพึ่งพาโมดูล
* @param {function () | Object} โรงงานฟังก์ชั่นโรงงานโมดูล
-
fn.define = function (id, deps, โรงงาน) {
// รหัสของฟังก์ชัน ...
-
ข้างต้นเป็นข้อความที่ตัดตอนมาจากซอร์สโค้ด SEAJS หลังจากอ่านซอร์สโค้ดแล้วฉันพบว่ากฎการแยกวิเคราะห์สำหรับจำนวนพารามิเตอร์ที่แตกต่างกันของการกำหนดมีดังนี้:
หากมีพารามิเตอร์เดียวเท่านั้นให้กำหนดค่าให้กับโรงงาน
หากมีสองพารามิเตอร์ที่สองจะถูกกำหนดให้กับโรงงาน
หากมีสามพารามิเตอร์พวกเขาจะได้รับมอบหมายให้ ID, DEPS และโรงงานตามลำดับ
อย่างไรก็ตามเกือบทุกสถานที่ที่ใช้กำหนดรวมถึงตัวอย่างอย่างเป็นทางการของ SEAJS มีเพียงหนึ่งฟังก์ชั่นโรงงานที่ผ่านเข้ามาคล้ายกับรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
// รหัสของโมดูล ...
-
โดยส่วนตัวฉันขอแนะนำให้คุณทำตามมาตรฐานของตัวอย่างอย่างเป็นทางการของ SEAJS และกำหนดโมดูลด้วยคำจำกัดความของพารามิเตอร์ แล้ว ID และ Deps จะทำอะไรได้บ้าง?
ID คือสตริงการระบุของโมดูล หากคุณใช้ define เพื่อกำหนดโมดูลในไฟล์ A.JS ภายใต้ Example.com ID ของโมดูลนี้จะถูกกำหนดให้กับ http://example.com/a.js รหัส โดยทั่วไปแล้ว DEPs ไม่จำเป็นต้องส่งผ่านและโมดูลที่จำเป็นสามารถโหลดได้ด้วยความต้องการ
การวิเคราะห์ฟังก์ชั่นจากโรงงาน
ฟังก์ชั่นจากโรงงานเป็นร่างกายหลักและโฟกัสของโมดูล เมื่อมีการส่งพารามิเตอร์เพียงหนึ่งพารามิเตอร์ (การเขียนที่แนะนำ) พารามิเตอร์นี้เป็นฟังก์ชันโรงงาน
1. ฟังก์ชั่นการโหลดแบบโมดูลที่ใช้ในการบันทึกโมดูลที่ต้องพึ่งพา
2. Exports-Interface Point เมื่อกำหนดข้อมูลหรือวิธีการจะเปิดเผยต่อการโทรภายนอก
3. โมดูล-ข้อมูลเมตาของโมดูล
พารามิเตอร์ทั้งสามนี้สามารถเลือกได้ตามต้องการเพื่อแสดงข้อกำหนด
มาพูดถึงโมดูลด้านล่าง โมดูลเป็นวัตถุที่เก็บข้อมูลเมตาของโมดูลดังต่อไปนี้:
1.Module.ID - รหัสโมดูล
2.Module.Dependencies - อาร์เรย์ที่เก็บรายการ ID ของโมดูลทั้งหมดที่โมดูลนี้ขึ้นอยู่กับ
3. Module.exports-จุดไปยังวัตถุเดียวกันกับการส่งออก
สามโหมดสำหรับการเขียนโมดูล
โหมดแรกในการกำหนดโมดูลคือโหมดการส่งออก:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
var a = ต้องการ ('a');
var b = ต้องการ ('b');
var data1 = 1;
var func1 = function () {// วิธีส่วนตัว
ส่งคืน a.run (data1);
-
Exports.Data2 = 2;
exports.func2 = function () {// วิธีการสาธารณะ
กลับ 'สวัสดี';
-
-
ข้างต้นเป็นโมเดลนิยามโมดูล "จริง" ค่อนข้าง นอกเหนือจากการผนวกข้อมูลสาธารณะและวิธีการส่งออกแล้วคุณยังสามารถส่งคืนวัตถุโดยตรงเพื่อแสดงโมดูลเช่นรหัสต่อไปนี้มีฟังก์ชั่นเดียวกับรหัสด้านบน:
คัดลอกรหัสดังต่อไปนี้: กำหนด (ฟังก์ชั่น (ต้องการ) {
var a = ต้องการ ('a');
var b = ต้องการ ('b');
var data1 = 1;
var func1 = function () {// วิธีส่วนตัว
ส่งคืน a.run (data1);
-
กลับ {
data2: 2,
func2: function () {
กลับ 'สวัสดี';
-
-
-
หากคำจำกัดความของโมดูลไม่มีรหัสอื่นและส่งคืนวัตถุเดียวเท่านั้นวิธีการเขียนที่ง่ายต่อไปนี้สามารถพบได้:
คัดลอกรหัสดังนี้: define ({
ข้อมูล: 1,
func: function () {
กลับ 'สวัสดี';
-
-
วิธีที่สามเหมาะสำหรับโมดูลที่กำหนดข้อมูล JSON บริสุทธิ์
การโหลดและการอ้างอิงของโมดูล
อัลกอริทึมการกำหนดที่อยู่ของโมดูล
ดังที่ได้กล่าวไว้ข้างต้นโมดูลสอดคล้องกับไฟล์ JS ที่โมดูลจริงอยู่ SEAJS สนับสนุนตัวระบุต่อไปนี้:
ที่อยู่สัมบูรณ์ - ให้เส้นทางสัมบูรณ์ไปยังไฟล์ JS
ชอบ:
การคัดลอกรหัสมีดังนี้: "" http: // ตัวอย่าง/js/a ");
มันหมายถึงการโหลด http: //example/js/a.js
ที่อยู่สัมพัทธ์ - ใช้การโทรแบบสัมพัทธ์เพื่อค้นหาโมดูลเพื่อค้นหาที่อยู่สัมพัทธ์ของไฟล์ JS ที่ฟังก์ชันโหลดอยู่
ตัวอย่างเช่นโหลดใน http: //example/js/b.js
การคัดลอกรหัสมีดังนี้ต้องการ ("./ C");
จากนั้นโหลด http: //example/js/c.js
ที่อยู่พื้นฐาน - หากตัวระบุสตริงโหลดไม่ใช่เส้นทางที่แน่นอนหรือเริ่มต้นด้วย "./" มันจะถูกส่งไปที่ "ฐาน" ในการกำหนดค่าทั่วโลกของ SEAJS
โปรดทราบว่าเมื่อโหลดโมดูลด้านบนคุณไม่จำเป็นต้องผ่านชื่อต่อท้าย ".js" และ SEAJS จะเพิ่มโดยอัตโนมัติ ".js" แต่จะไม่มีการเพิ่มสามกรณีต่อไปนี้:
เมื่อโหลด CSS เช่น:
การคัดลอกรหัสมีดังนี้: "./ ./ module1-style.css");
เมื่อเส้นทางมี "?" เช่น:
การคัดลอกรหัสมีดังนี้: ต้องการ (<a href = "http: //example/js/a.json? cb = func"> http: //example/js/a.json? cb = func </a> );
เมื่อเส้นทางจบลงด้วย "#" เช่น:
การคัดลอกรหัสมีดังนี้: "http: //example/js/a.json#");
ตามสถานการณ์ของแอปพลิเคชันที่แตกต่างกัน SEAJS มี API สามตัวสำหรับการโหลดโมดูลคือ Seajs.use ต้องการและต้องการ async ซึ่งมีการแนะนำด้านล่าง
Seajs.use
Seajs.use ส่วนใหญ่ใช้เพื่อโหลดโมดูลรายการ โมดูลรายการนั้นเทียบเท่ากับฟังก์ชั่นหลักของโปรแกรม C และยังเป็นรากของแผนผังการพึ่งพาโมดูลทั้งหมด ในตัวอย่าง TinyApp ด้านบน Init เป็นโมดูลรายการ การใช้ seajs.use มีดังนี้:
การคัดลอกรหัสมีดังนี้:
// โหมดเดี่ยว
Seajs.use ('./ a');
// โหมดโทรกลับ
sejs.use ('./ a', ฟังก์ชั่น (a) {
a.run ();
-
// โหมดหลายโมดูล
sejs.use (['./ a', './b'], ฟังก์ชั่น (a, b) {
a.run ();
b.run ();
-
โดยทั่วไปแล้ว SEAJS.USE ใช้เพื่อโหลดโมดูลรายการในหน้าเท่านั้น หากมีโมดูลรายการเดียวคุณสามารถละเว้น SEAJS.USE โดยการเพิ่มแอตทริบิวต์ "Data-Main" ลงในแท็กสคริปต์ที่แนะนำ Sea.Js วิธีการเขียนต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> TinyApp </title>
</head>
<body>
<p> </p>
<script src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
วิธีการเขียนนี้จะทำให้ HTML กระชับมากขึ้น
จำเป็นต้อง
ต้องการวิธีการโหลดโมดูลหลักของ SEAJs
การคัดลอกรหัสมีดังนี้: var m = ต้องการ ('/path/to/module/file');
นี่คือการแนะนำสั้น ๆ เกี่ยวกับกลไกการโหลดอัตโนมัติของ SEAJS ดังที่ได้กล่าวไว้ข้างต้นหลังจากใช้ SEAJS เพียงแค่รวม SEA.JS แล้วไฟล์ JS อื่น ๆ จะโหลดได้อย่างไร SEAJS จะดาวน์โหลดโมดูลรายการก่อนจากนั้นใช้นิพจน์ทั่วไปเพื่อให้ตรงกับข้อกำหนดทั้งหมดในรหัสตามโมดูลรายการจากนั้นดาวน์โหลดไฟล์ JS ที่เกี่ยวข้องตามการระบุเส้นทางไฟล์ในต้องการและทำซ้ำไฟล์ JS ที่ดาวน์โหลด กระบวนการทั้งหมดคล้ายกับการดำเนินการสำรวจของกราฟ (เนื่องจากอาจมีการพึ่งพาข้ามวงจรโครงสร้างข้อมูลการพึ่งพาทั้งหมดเป็นกราฟมากกว่าต้นไม้)
เมื่อคุณเข้าใจประเด็นข้างต้นกฎต่อไปนี้จะเข้าใจง่าย:
ตัวระบุเส้นทางที่ส่งผ่านไปยังจำเป็นต้องเป็นตัวอักษรสตริงไม่ใช่นิพจน์
การคัดลอกรหัสมีดังนี้: ต้องการ ('โมดูล' + '1');
ต้องการ ('module'.toLowercase ());
สิ่งนี้จะทำให้ SEAJS ล้มเหลวในการดำเนินการจับคู่ปกติที่ถูกต้องเพื่อดาวน์โหลดไฟล์ JS ที่เกี่ยวข้อง
chante.async
ดังที่ได้กล่าวไว้ข้างต้น SEAJS จะบันทึกไฟล์ JS ที่จำเป็นทั้งหมดในครั้งเดียวผ่านการวิเคราะห์แบบคงที่เมื่อเปิดหน้า HTML
คัดลอกรหัสดังต่อไปนี้: require.async ('/path/to/module/file', ฟังก์ชั่น (m) {
// รหัสการโทรกลับ ...
-
ด้วยวิธีนี้เฉพาะเมื่อใช้โมดูลนี้ไฟล์ JS ที่เกี่ยวข้องจะถูกดาวน์โหลดซึ่งจะตระหนักถึงการโหลดตามความต้องการของรหัส JavaScript
การกำหนดค่าระดับโลกของ SEAJS
SEAJS ให้วิธีการ SEAJSCONFIG ที่สามารถตั้งค่าการกำหนดค่าทั่วโลกและรับวัตถุการกำหนดค่าที่แสดงถึงการกำหนดค่าทั่วโลก วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังต่อไปนี้: seajs.config ({
ฐาน: 'Path/to/jslib/'
นามแฝง: {
'แอพ': 'Path/to/app/'
-
Charset: 'UTF-8'
หมดเวลา: 20000,
การดีบัก: เท็จ
-
โดยที่ฐานแสดงเส้นทางที่อยู่พื้นฐานระหว่างการกำหนดที่อยู่พื้นฐาน ตัวอย่างเช่นฐานถูกตั้งค่าเป็น http://example.com/js/3-party/ จากนั้น:
การคัดลอกรหัสมีดังนี้: var $ = ต้องการ ('jQuery');
http://example.com/js/3-party/jquery.js จะถูกโหลด
นามแฝงสามารถตั้งค่าตัวย่อสำหรับเส้นทางทั่วไปที่ยาวขึ้น
Charset แสดงถึงแอตทริบิวต์ Charset ของแท็กสคริปต์เมื่อดาวน์โหลด JS
การหมดเวลาระบุเวลาสูงสุดในการดาวน์โหลดไฟล์เป็นมิลลิวินาที
DEBUG ระบุว่ามันใช้งานได้ในโหมดดีบักหรือไม่
SEAJS ทำงานอย่างไรกับห้องสมุด JS ที่มีอยู่
ในการใช้ห้องสมุด JS ที่มีอยู่เช่น JQuery กับ SEAJS เพียงแค่ห่อหุ้มห้องสมุดที่มีอยู่ตามกฎนิยามโมดูลของ SEAJS ตัวอย่างเช่นต่อไปนี้เป็นวิธีการห่อหุ้มสำหรับ jQuery:
คัดลอกรหัสดังนี้: define (function () {
// {{{{รหัสต้นฉบับ jQuery เริ่มต้น
-
* JavaScript Library v1.6.1
* http://jquery.com/
-
* ลิขสิทธิ์ 2011, John Resig
* ใบอนุญาตคู่ที่ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT หรือ GPL เวอร์ชัน 2
* http://jquery.org/license
-
* รวม sizzle.js
* http://sizzlejs.com/
* ลิขสิทธิ์ 2011 มูลนิธิ Dojo
* เปิดตัวภายใต้ใบอนุญาต MIT, BSD และ GPL
-
* วันที่: พ.ค. 12 พฤษภาคม 15:04:36 2011 -0400
-
-
//}}} รหัสต้นฉบับ jQuery สิ้นสุดลง
ส่งคืน $ .noconflict ();
-
บรรจุภัณฑ์และการปรับใช้โครงการ SEAJS
SEAJS ได้รวมเครื่องมือการปรับใช้แบบบรรจุภัณฑ์ SM แนวคิดหลักของ SPM คือการรวมและบีบอัดรหัสของโมดูลทั้งหมดแล้วรวมเข้ากับโมดูลรายการ . อย่างไรก็ตามเนื่องจาก SPM ยังไม่ได้รับการปล่อยตัวสำหรับเวอร์ชันอย่างเป็นทางการบทความนี้ไม่ได้ตั้งใจที่จะแนะนำรายละเอียด
ในความเป็นจริงเนื่องจากเครื่องมือ JS Merge และการบีบอัดที่ใช้สำหรับแต่ละโครงการนั้นแตกต่างกัน SPM อาจไม่เหมาะสำหรับแต่ละโครงการ หลังจากทำความเข้าใจหลักการของ SEAJS คุณสามารถเขียนสคริปต์การผสานและบรรจุภัณฑ์ที่ตรงกับลักษณะของโครงการของคุณ