ต้องการการแนะนำ
VeutheJS ก่อตั้งขึ้นโดย James Burke ซึ่งเป็นผู้ก่อตั้งข้อมูลจำเพาะของ AMD
ต้องการ JS จะให้คุณเขียน JavaScript ในวิธีที่แตกต่างจากปกติ คุณจะไม่ใช้แท็กสคริปต์อีกต่อไปเพื่อแนะนำไฟล์ JS ใน HTML และคุณจะไม่จำเป็นต้องจัดการการพึ่งพาผ่านแท็กสคริปต์อีกต่อไป
VegureJS เป็นเฟรมเวิร์กการโหลดโมดูล JavaScript ขนาดเล็กมากและเป็นหนึ่งในผู้ดำเนินการที่ดีที่สุดของข้อกำหนด AMD เวอร์ชันล่าสุดของ VeutheJS เป็นเพียง 14K หลังจากการบีบอัดซึ่งมีน้ำหนักเบามาก นอกจากนี้ยังสามารถทำงานร่วมกับเฟรมเวิร์กอื่น ๆ ได้และการใช้ VeutheJS จะปรับปรุงคุณภาพของรหัสส่วนหน้าของคุณอย่างแน่นอน
มีบางจุดที่ควรค่าแก่การสังเกตเมื่อใช้ requirejs สำหรับการโหลดโมดูลแบบอะซิงโครนัส:
1. สองวิธีในการเขียนคำจำกัดความโมดูล
1. คำจำกัดความการทำงานที่มีอยู่ในการพึ่งพา
หากโมดูลมีการพึ่งพา: พารามิเตอร์แรกคืออาร์เรย์ชื่อของการพึ่งพา; พารามิเตอร์ที่สองคือฟังก์ชั่น หลังจากโหลดการพึ่งพาทั้งหมดของโมดูลฟังก์ชันจะถูกเรียกใช้เพื่อกำหนดโมดูลดังนั้นโมดูลควรส่งคืนวัตถุที่กำหนดโมดูล ความสัมพันธ์การพึ่งพาจะถูกฉีดเข้าไปในฟังก์ชันเป็นพารามิเตอร์และรายการพารามิเตอร์สอดคล้องกับรายการชื่อการพึ่งพาหนึ่งทีละหนึ่ง
define (['a'], ฟังก์ชัน (aj) {var hello = function () {aj.hello ('I am c.js');} return {hello: hello}});PS: ประเภทค่าส่งคืนของโมดูลไม่ได้ถูกบังคับให้เป็นวัตถุและอนุญาตให้มีค่าส่งคืนของฟังก์ชั่นใด ๆ
2. คำจำกัดความรูปแบบโมดูล CommonJS
ต้องการ: ใช้เพื่อแนะนำวิธีการที่ขึ้นอยู่กับโมดูลอื่น ๆ
การส่งออก: ส่งออกวัตถุที่ส่งออกตัวแปรโมดูลหรือวิธีการ
โมดูล: มีข้อมูลเกี่ยวกับโมดูลนี้
require.config ({baseUrl: "", config: {'b': {size: 'large'}}, เส้นทาง: {a: 'base/a', b: 'base/b', c: 'base/c'}}); กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var aj = ต้องการ ("a"); var hello = function () {aj.hello ('ฉันเป็น b.js');} var hello2 = function () {aj.hello ('b.js22'); การส่งออก); console.log ("b.js: module", โมดูล); console.log ("b.js: config", module.config ()); // ไม่สามารถใช้ร่วมกันได้กลับจะเขียนทับการส่งออกก่อนหน้า/*return {hello: hello2}*/});PS: วัตถุส่งคืนและการส่งออกไม่สามารถใช้ร่วมกันได้การส่งคืนจะเขียนทับการส่งออกก่อนหน้านี้
ต่อไปนี้เป็นข้อมูลที่พิมพ์หลังจากการโทร:
การส่งออก: จะเห็นได้ว่าการส่งออกเป็นคุณลักษณะของโมดูล
โมดูล: มันมีนามแฝง, URI, วัตถุส่งออกและวิธีการกำหนดค่าข้อมูลของโมดูล
กำหนดค่า: เรามักจะต้องส่งข้อมูลการกำหนดค่าไปยังโมดูล การกำหนดค่าเหล่านี้มักจะเป็นข้อมูลระดับแอปพลิเคชันและต้องการวิธีการส่งผ่านไปยังโมดูล
ใน RequireJS จะถูกนำไปใช้ตามรายการการกำหนดค่าการกำหนดค่าของ requirejs.config ()
2. ระวังตัวแปรซิงเกิลตัน
ระวังตัวแปรใน Singletons เพราะหลังจากต้องการ Js ต้องใช้หนึ่งครั้งจำเป็นต้องใช้แคชก่อนหน้า ดังนั้นเมื่อตัวแปรถูกกำหนดไว้ในโมดูลตราบใดที่ข้อกำหนดนี้มีการเปลี่ยนแปลงข้อกำหนดอื่น ๆ จะยังคงสอดคล้องกัน
define (function () {var index = 0; var = function (msg) {console.log (msg);} var addindex = function () {index ++;} var getindex = function () {return index;} return {hello: hello, addindex: addindex, getindex: getindexเรียกว่า:
ต้องการ (['a',], ฟังก์ชั่น (a) {ต้องการ (['a'], ฟังก์ชั่น (a) {console.log (a.getIndex ()); a.addindex (); a.addindex ();}); ต้องการ (['a'], ฟังก์ชัน (a) {console.log (A.getindex ();พิมพ์ข้างต้นคือ:
0
2
3. ล้างแคช
เนื่องจาก reghejs มีฟังก์ชั่นการแคช แต่ในระหว่างการพัฒนาเราไม่ต้องการให้แคชดังนั้นเราจึงสามารถตั้งค่า urlargs ใน require.config
URLARGS: RequireJS ผนวกพารามิเตอร์การสืบค้นเพิ่มเติมหลังจาก URL เมื่อได้รับทรัพยากร
ตัวอย่าง:
urlargs: "bust =" + (วันที่ใหม่ ()). getTime ()
สิ่งนี้มีประโยชน์ในการพัฒนา แต่อย่าลืมลบออกก่อนที่จะปรับใช้กับสภาพแวดล้อมการสร้าง
4. โหลดโมดูลจากแพ็คเกจอื่น ๆ
VeutheJS รองรับโมดูลการโหลดจากโครงสร้างแพ็คเกจ CommonJS แต่ต้องมีการกำหนดค่าเพิ่มเติม
แพ็คเกจการกำหนดค่าสามารถระบุคุณสมบัติต่อไปนี้สำหรับแพ็คเกจเฉพาะ:
1. ชื่อ: ชื่อแพ็คเกจ (สำหรับชื่อโมดูล/การแมปคำนำหน้า)
2. สถานที่: ตำแหน่งบนดิสก์ ตำแหน่งนั้นสัมพันธ์กับค่า baseURL ในการกำหนดค่าเว้นแต่ว่ามีโปรโตคอลหรือเริ่มต้นด้วย "/"
3. หลัก: หลังจากการเรียกใช้การโทรเริ่มต้นด้วย "ชื่อแพ็คเกจ" โมดูลในแพ็คเกจที่จะใช้
ค่าเริ่มต้นคือ "หลัก" เว้นแต่จะตั้งไว้เป็นอย่างอื่นที่นี่
ค่านี้สัมพันธ์กับไดเรกทอรีแพ็คเกจ
ตัวอย่าง:
main.js
require.config ({baseUrl: "", แพ็คเกจ: [{ชื่อ: "นักเรียน", สถานที่: "package-stu"}, {ชื่อ: "ครู", สถานที่: "แพ็คเกจ tea"}], urlargs: "bust =" + (ใหม่) tea.hello ();});Tea.js:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {exports.hello = function () {console.log ('ฉันเป็นครู');}});stu.js:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {exports.name = 'cape';});store.js:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var stu = ต้องการ ("นักเรียน/stu"); exports.hello = function () {console.log ('i am' + stu.name);}});ฉันรู้สึกว่ามีสองสิ่งแปลก ๆ เกี่ยวกับวิธีการโหลดโมดูลนี้จากแพ็คเกจอื่น ๆ (ฉันไม่เข้าใจดีมาก):
1. หากโมดูลในแพ็คเกจอื่น ๆ อ้างถึงวิธีการเขียนของโมดูลอื่นผู้ใช้จะส่งผลกระทบต่อวิธีการเขียนของโมดูลหรือไม่?
2. Main.js ในแพ็คเกจอื่น ๆ ดูเหมือนจะไร้ประโยชน์และไม่มีปัญหาหากไม่มีเนื้อหา
เนื้อหาข้างต้นคือรายละเอียดของ RequireJS ที่ใช้โดยบรรณาธิการและฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!