โมดูลเป็นส่วนสำคัญของแอปพลิเคชันที่มีประสิทธิภาพและมักจะช่วยให้เราแยกกันอย่างชัดเจนและจัดระเบียบหน่วยรหัสในโครงการ
วิธีการใช้โมดูลใน JS:
1. การเป็นตัวแทนตามตัวอักษร
2. โหมดโมดูล
3. โมดูล AMD
4. โมดูล CommonJS
5. ECMASCRIPT HARMONY MODULE
วัตถุ
ตัวอักษรวัตถุไม่จำเป็นต้องมีการสร้างอินสแตนซ์โดยใช้ตัวดำเนินการใหม่ แต่ไม่สามารถใช้ในช่วงเริ่มต้นของคำสั่งได้เนื่องจากการเริ่มต้นอาจตีความได้ว่าเป็นจุดเริ่มต้นของบล็อก นอกวัตถุสมาชิกใหม่สามารถเพิ่มลงในวัตถุตามตัวอักษรโดยใช้คำสั่งการมอบหมายต่อไปนี้ mymodule.property = "somevalue"
var mymodule = {myProperty: "somevalue", myConfig: {usecaching: true, ภาษา: "en"}, // วิธีพื้นฐาน mymethod: function () {// ... }, // ข้อมูลเอาต์พุตตามการกำหนดค่าปัจจุบัน mymethod2: ฟังก์ชัน () "เปิดใช้งาน": "ปิดใช้งาน"); }, // เขียนการกำหนดค่าปัจจุบัน myMethod3: ฟังก์ชั่น (newConfig) {ถ้า (typeof newConfig === "Object") {this.myconfig = newConfig; console.log (this.myconfig.language); }},}; mymodule.mymethod3 ({ภาษา: "fr", usecaching: false})การใช้ตัวอักษรวัตถุช่วยห่อหุ้มและจัดระเบียบรหัส
ใน JavaScript รูปแบบโมดูลจะใช้เพื่อจำลองแนวคิดของคลาสเพิ่มเติมซึ่งเป็นวิธีที่วัตถุแยกต่างหากสามารถมีวิธีการและตัวแปรสาธารณะ/ส่วนตัวซึ่งจะปิดกั้นชิ้นส่วนพิเศษจากขอบเขตทั่วโลก
รูปแบบโมดูลใช้การปิดเพื่อห่อหุ้มรัฐและองค์กรส่วนตัว " มันเป็นวิธีการห่อหุ้มวิธีการสาธารณะ/ส่วนตัวและตัวแปรเพื่อป้องกันการรั่วไหลของขอบเขตทั่วโลกและความขัดแย้งกับอินเทอร์เฟซของนักพัฒนาอื่น ๆ ผ่านโหมดนี้คุณจะต้องคืน API สาธารณะและทุกอย่างอื่นจะได้รับการดูแลในการปิดส่วนตัว
ในโหมดโมดูลเนื่องจากการมีอยู่ของการปิดตัวแปรที่ประกาศและวิธีการมีเฉพาะภายในโหมด แต่ตัวแปรและวิธีการที่กำหนดไว้ในวัตถุส่งคืนมีให้สำหรับผู้ใช้ภายนอก
การใช้โหมดโมดูล
var testModule = (function () {var counter = 0; return {incrementCounter: function () {return ++ counter;}, ResetCounter: function () {console.log ("ค่าตัวนับก่อนรีเซ็ต" +ตัวนับ); counter = 0;}}}) (); // เพิ่มตัวนับตัวนับ TestModule.resetCounter ();ส่วนอื่น ๆ ของรหัสคือการเพิ่มขึ้น () และ RESETCOUNTER () ไม่สามารถอ่านได้โดยตรง ตัวแปรตัวนับถูกแยกออกจากขอบเขตทั่วโลกอย่างสมบูรณ์ดังนั้นจึงทำหน้าที่เหมือนตัวแปรส่วนตัวที่มีการ จำกัด อยู่ที่การปิดโมดูลเนื่องจากรหัสเดียวที่สามารถเข้าถึงขอบเขตของมันคือฟังก์ชั่นทั้งสองนี้ วิธีการข้างต้นได้ตั้งค่าเนมสเปซอย่างมีประสิทธิภาพดังนั้นในรหัสทดสอบการโทรทั้งหมดจะต้องมีคำนำหน้า
// โหมดโมดูลที่มีเนมสเปซตัวแปรสาธารณะและตัวแปรส่วนตัว var mynamspace = (function () {// ตัวแปรตัวนับส่วนตัว var myprivatevar = 0; // ฟังก์ชั่นส่วนตัว var myprivateMethod = ฟังก์ชั่น (foo) {console.log (foo);}; MyPublicFunction: ฟังก์ชั่น (BAR) {MyPrivateVar ++;อ้างอิงตัวแปรทั่วโลก
JavaScript มีคุณสมบัติที่เรียกว่าตัวแปรทั่วโลกโดยนัย ไม่ว่าจะมีการใช้ตัวแปรหรือไม่ก็ตามล่าม JavaScript จะกลับโซ่ขอบเขตเพื่อค้นหาการประกาศ VAR ของตัวแปรทั้งหมด หากไม่พบ var ล่ามจะถือว่าตัวแปรเป็นตัวแปรส่วนกลาง หากตัวแปรถูกใช้สำหรับการทำงานที่ได้รับมอบหมายหากไม่มีอยู่ก่อนหน้านี้ล่ามจะสร้างมันขึ้นมาโดยอัตโนมัติ ซึ่งหมายความว่ามันง่ายมากที่จะใช้หรือสร้างตัวแปรระดับโลกในการปิดที่ไม่ระบุชื่อ แต่สิ่งที่ยากกว่าคือรหัสนั้นยากที่จะจัดการโดยเฉพาะอย่างยิ่งเมื่อคนที่อ่านรหัสเห็นความแตกต่างมากมายระหว่างตัวแปรที่ทั่วโลกและเป็นท้องถิ่น
โชคดีที่ในฟังก์ชั่นที่ไม่ระบุชื่อเราสามารถให้ทางเลือกที่ค่อนข้างง่าย เราสามารถส่งผ่านตัวแปรทั่วโลกไปยังฟังก์ชั่นที่ไม่ระบุชื่อเป็นพารามิเตอร์และใช้ เมื่อเทียบกับตัวแปรทั่วโลกโดยนัยมันชัดเจนและรวดเร็ว ลองมาเป็นตัวอย่าง:
// โมดูลโกลบอล var mymodule = (ฟังก์ชั่น (jq, _) {ฟังก์ชั่น privateMethod1 () {jq (". container"). html (ทดสอบ);} return {publicmethod: function () {privateMethod1 ();}}}) (jQuery, _); myModule.publicMethod (); // โมดูลโกลบอล var mymodule = (ฟังก์ชัน () {// โมดูลโมดูลโมดูลโมดูล = {}; privateVariale = "สวัสดี"; ฟังก์ชั่น privateMethod () {//...Module.publicProperty = "foobar";ประกาศตัวแปรทั่วโลกโดยไม่ต้องใช้งานและยังสามารถสนับสนุนแนวคิดของการแนะนำทั่วโลก
ยังมีข้อบกพร่องบางอย่างในโหมดโมดูล:
1. เนื่องจากเราเข้าถึงสมาชิกภาครัฐและเอกชนแตกต่างกันเมื่อเราต้องการเปลี่ยนการมองเห็นเราจึงต้องปรับเปลี่ยนการดำรงอยู่แต่ละครั้งที่เคยใช้สมาชิกนั้น
2. เราไม่สามารถเข้าถึงสมาชิกส่วนตัวที่เพิ่มไปยังวิธีนี้ในภายหลัง
3. ไม่สามารถสร้างการทดสอบหน่วยอัตโนมัติสำหรับสมาชิกส่วนตัวและเพิ่มความซับซ้อนเพิ่มเติมเมื่อต้องแก้ไขข้อบกพร่อง
4. นักพัฒนาไม่สามารถขยายวิธีการส่วนตัวได้อย่างง่ายดาย
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น