เอกสารง่าย ๆ ของ SEAJS มอบประสบการณ์การพัฒนาแบบแยกส่วนที่เรียบง่ายและดีที่สุด

เอกสารที่ไม่เป็นทางการจัดระเบียบข้อความและตัวอย่างของเอกสารอย่างเป็นทางการของคุณเองสำหรับการค้นหาอย่างรวดเร็ว

ทำไมต้องใช้ sea.js?

Sea.js มีการเขียนโค้ดที่เรียบง่ายและเป็นธรรมชาติและวิธีการจัดระเบียบด้วยคุณสมบัติหลักต่อไปนี้:

ข้อกำหนดนิยามโมดูลที่เรียบง่ายและเป็นมิตร: SEA.JS ติดตามข้อกำหนด CMD และสามารถเขียนรหัสโมดูลเช่น Node.js.

การจัดระเบียบรหัสตามธรรมชาติและใช้งานง่าย: การโหลดโดยอัตโนมัติของการพึ่งพาและการกำหนดค่าที่กระชับและชัดเจนช่วยให้เราเพลิดเพลินไปกับการเข้ารหัสมากขึ้น

Sea.js ยังมีปลั๊กอินทั่วไปซึ่งมีประโยชน์มากสำหรับการดีบักการพัฒนาและการเพิ่มประสิทธิภาพประสิทธิภาพและมีอินเทอร์เฟซที่ขยายได้

ความเข้ากันได้

Sea.js มีกรณีทดสอบที่สมบูรณ์และเข้ากันได้กับเบราว์เซอร์หลักทั้งหมด:

Chrome 3+

Firefox 2+

Safari 3.2+

โอเปร่า 10+

เช่น 5.5+

Sea.js สามารถทำงานบนฝั่งมือถือรวมถึงแอพโหมดไฮบริด ในทางทฤษฎี Sea.js สามารถทำงานบนเครื่องยนต์เบราว์เซอร์ใด ๆ

seajs.configobject

วัตถุ นามแฝง

การกำหนดค่านามแฝงหลังการกำหนดค่าคุณสามารถใช้จำเป็นต้องเรียกใช้ต้องการ ('jQuery');

 seajs.config ({alias: {'jQuery': 'jQuery/jQuery/1.10.1/jQuery'}});

 กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {// อ้างอิงโมดูล jQuery var $ = ต้องการ ('jQuery');});

เส้นทาง วัตถุ

ตั้งเส้นทางเพื่ออำนวยความสะดวกในการโทรข้ามไดเรกทอรี โดยการตั้งค่าเส้นทางอย่างยืดหยุ่นคุณสามารถระบุไดเรกทอรีที่แน่นอนโดยไม่ส่งผลกระทบต่อฐาน

 seajs.config ({// ตั้งเส้นทางพา ธ : {'แกลเลอรี่': 'https://a.alipayobjects.com/gallery'}, // ตั้งชื่อนามแฝงเพื่ออำนวยความสะดวกในการเรียกนามแฝง: {'Underscore':

 กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var _ = ต้องการ ('underscore'); // => โหลดคือ https://a.alipayobjects.com/gallery/underscore.js});

วัตถุ vars

การกำหนดค่าตัวแปร ในบางสถานการณ์เส้นทางโมดูลสามารถกำหนดได้ในระหว่างการรันไทม์เท่านั้นและคุณสามารถใช้ตัวแปร vars เพื่อกำหนดค่าได้

VARs ถูกกำหนดค่าด้วยค่าตัวแปรในตัวระบุโมดูลและตัวแปรจะถูกแสดงโดย {key} ในตัวระบุโมดูล

 seajs.config ({// // ตัวแปรการกำหนดค่า vars: {'locale': 'zh-cn'}});

 กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var lang = ต้องการ ('./ i18n/{locale} .js'); // => โหลดคือพา ธ/ถึง/i18n/zh-cn.js});

อาร์เรย์ แผนที่

การกำหนดค่านี้สามารถแมปและแก้ไขพา ธ โมดูลและสามารถใช้สำหรับการแปลงเส้นทางการดีบักออนไลน์ ฯลฯ

 seajs.config ({map: [['.js', '-debug.js']]});

 กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var a = ต้องการ ('./ a'); // => โหลดคือ path/to/a-debug.js});

อาร์เรย์ โหลดล่วงหน้า

การใช้รายการการกำหนดค่าล่วงหน้าคุณสามารถโหลดและเริ่มต้นโมดูลที่ระบุล่วงหน้าก่อนที่จะโหลดโมดูลปกติ

สตริงที่ว่างเปล่าในการโหลดล่วงหน้าจะถูกละเว้น

 // ในเบราว์เซอร์เก่าโหลดโมดูล ES5 และ JSON Seajs.config ({preload: [function.prototype.bind? '': 'es5-safe', this.json? '': 'json']});

หมายเหตุ: การกำหนดค่าในการโหลดล่วงหน้าจะต้องโหลดจนกว่าจะใช้ ตัวอย่างเช่น:

 seajs.config ({preload: 'a'}); // ก่อนโหลด b มันจะทำให้แน่ใจว่าโมดูล A ได้โหลดและดำเนินการ SEAJS.USE ('./ B');

การกำหนดค่าล่วงหน้าไม่สามารถวางไว้ในไฟล์โมดูล:

 seajs.config ({preload: 'a'}); กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก) {// เมื่อดำเนินการที่นี่ไม่สามารถรับประกันได้ว่าโมดูล A ได้รับการโหลดและดำเนินการ});

บูลีน ดีบัก

เมื่อค่าเป็นจริงตัวโหลดจะไม่ลบแท็กสคริปต์ที่แทรกแบบไดนามิก ปลั๊กอินยังสามารถตัดสินใจเอาต์พุตของบันทึกและข้อมูลอื่น ๆ ตามการกำหนดค่าการดีบัก

สตริง ฐาน

Sea.js จะแยกวิเคราะห์ตัวระบุระดับบนสุดเมื่อเทียบกับเส้นทางฐาน

หมายเหตุ: โดยทั่วไปโปรดอย่ากำหนดค่าเส้นทางฐาน การวางทะเล js ในเส้นทางที่เหมาะสมมักจะง่ายกว่าและสอดคล้องกันมากขึ้น

Charsetstring | การทำงาน

แอตทริบิวต์ charset ของแท็ก <script> หรือ <link> เมื่อได้รับไฟล์โมดูล ค่าเริ่มต้นคือ UTF-8

Charset ยังสามารถเป็นฟังก์ชั่น:

 seajs.config ({charset: function (url) {// ไฟล์ในไดเรกทอรี xxx ถูกโหลดในการเข้ารหัส GBK ถ้า (url.indexof ('http://example.com/js/xxx') === 0) {return 'gbk';

seajs. ใช้ฟังก์ชั่น

ใช้ในการโหลดหนึ่งโมดูลขึ้นไปในหน้าหนึ่ง Seajs.use (id, callback?)

 // โหลดโมดูล seajs.use ('./ a'); // โหลดโมดูล, เรียกใช้การเรียกกลับ seajs.use ('./ a', ฟังก์ชั่น (a) {a.dosomething ();}); // โหลดหลายโมดูล

หมายเหตุ: Seajs.use ไม่มีส่วนเกี่ยวข้องกับเหตุการณ์ DOM Ready หากการดำเนินการบางอย่างจะถูกดำเนินการหลังจาก DOM พร้อมคุณจะต้องใช้ไลบรารีคลาสเช่น jQuery เพื่อให้แน่ใจว่า ตัวอย่างเช่น

 sejs.use (['jQuery', './main'], ฟังก์ชั่น ($, main) {$ (เอกสาร). พร้อม (ฟังก์ชั่น () {main.init ();});});

หมายเหตุ: ต้องมีพารามิเตอร์แรกของวิธีการใช้งาน แต่อาจเป็นโมฆะหรือตัวแปร

 var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js']; seajs.use (bootstrap, function () {// ทำอะไร});

Seajs.cache ojbect

ผ่าน Seajs.cache คุณสามารถตรวจสอบข้อมูลโมดูลทั้งหมดในระบบโมดูลปัจจุบัน

ตัวอย่างเช่น Open Seajs.org จากนั้นป้อน Seajs.cache ในแผงคอนโซลของเครื่องมือนักพัฒนา WebKit และคุณจะเห็น:

 วัตถุ> http://seajs.org/docs/assets/main.js: x> https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x> __proto__: Object

นี่คือโมดูลที่ใช้ในหน้าแรกของเอกสาร ขยายรายการเพื่อดูข้อมูลเฉพาะของโมดูล ความหมายสามารถพบได้ในส่วนโมดูลของข้อกำหนดการกำหนดโมดูล CMD

ฟังก์ชั่น Seajs.reslove

เช่นเดียวกับ require.resolve กลไกภายในของระบบโมดูลจะใช้ความละเอียดเส้นทางของพารามิเตอร์สตริงที่เข้ามา

 Seajs.resolve ('jQuery'); // => http: //path/to/jquery.jsseajs.resolve ('./a', 'http://example.com/to/b.js');

วิธีการ Seajs.resolve ไม่เพียง แต่สามารถใช้ในการดีบักว่าความละเอียดของเส้นทางนั้นถูกต้อง แต่ยังอยู่ในสภาพแวดล้อมการพัฒนาปลั๊กอิน

วัตถุ sejs.data

ผ่าน SEAJS.Data คุณสามารถดูการกำหนดค่า SEAJS ทั้งหมดและค่าของตัวแปรภายในบางตัวซึ่งสามารถใช้สำหรับการพัฒนาปลั๊กอิน นอกจากนี้ยังสามารถใช้สำหรับการดีบักเมื่อปัญหาการโหลดเกิดขึ้น

คำถามที่พบบ่อย

เกี่ยวกับการระบุโมดูล

ตัวระบุโมดูล SEAJS ส่วนใหญ่เป็นสายอูฐขนาดเล็ก หรือ ..

 // ในโรงงานของ http://example.com/js/a.js: require.resolve ('./ b'); // => http://example.com/js/b.js// ในโรงงานของ http://example.com/js/a.js: require.resolve ('../ c'); // => http://example.com/c.js

มันถูกแบ่งออกเป็นโลโก้ญาติและระดับบนสุด ถ้ามันเริ่มต้นด้วย หรือ. มันเป็นตัวระบุญาติ สวิตช์สตริงอูฐขนาดเล็กเป็นตัวระบุระดับบนสุด

 // สมมติว่าเส้นทางพื้นฐานคือ: http://example.com/assets/// ในรหัสโมดูล: require.resolve ('แกลเลอรี่/jQuery/1.9.1/jQuery'); // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

เกี่ยวกับเส้นทาง

นอกเหนือจากการระบุระดับค่อนข้างสูง SEAJS ยังสามารถใช้เส้นทางปกติในการโหลดโมดูล

ไปที่การวิเคราะห์สคริปต์ของหน้าปัจจุบัน (คุณสามารถคลิกขวาเพื่อดูซอร์สโค้ด)

 // เส้นทางของ Sea.js นั่นคือเส้นทางพื้นฐานมีความสัมพันธ์กับหน้าปัจจุบัน <script src = "http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js" // การระบุระดับสูงสุดขึ้นอยู่กับเส้นทางพื้นฐาน 'actjs': 'actjs/core/0.0.7/core.js', // => http: // 'ตำแหน่ง': 'actjs/util/0.0.2/position.js'}}); seajs.config '../../actjs/assets/widget/src/widget-affix.js', // ตัวระบุญาติสัมพันธ์กับหน้าปัจจุบัน 'init': './src/init.js'}}); </script>

ในตอนแรกฉันรู้สึกว่าเส้นทาง SEAJS นั้นค่อนข้างไม่คุ้นเคยเพราะมันเป็นเส้นทางฐาน โปรดจำไว้ว่าเส้นทางฐานเป็นเส้นทางด้านบนของไฟล์ในทะเล js และจากนั้นตัวระบุระดับบนสุดและตัวระบุสัมพัทธ์จะถูกปรับสัมพันธ์กับฐานนี้