ต้องการรายละเอียดการใช้งาน

ต้องการการแนะนำ

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 ที่ใช้โดยบรรณาธิการและฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!