เอกสารที่ไม่เป็นทางการจัดระเบียบข้อความและตัวอย่างของเอกสารอย่างเป็นทางการของคุณเองสำหรับการค้นหาอย่างรวดเร็ว
ทำไมต้องใช้ 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 และจากนั้นตัวระบุระดับบนสุดและตัวระบุสัมพัทธ์จะถูกปรับสัมพันธ์กับฐานนี้