โครงการส่วนใหญ่ใช้การพัฒนาแบบแยกส่วนที่ต้องการ JS เป็นแบบจำลองสำหรับการพัฒนาโมดูล AMD ดังนั้นจึงจำเป็นต้องเรียนรู้ ด้วยการใช้ requirejs ทีละขั้นตอนในการเขียนการสาธิตเราสามารถเรียนรู้กระบวนการพัฒนาโดยรวมของ RequireJS และความรู้สึกบางอย่างของการใช้งานที่ต้องการด้วยตัวเอง
AMD: กลไกสำหรับการโหลดแบบอะซิงโครนัสของรหัส JavaScript ตามโมดูล แนะนำให้นักพัฒนาใส่รหัส JavaScript ลงในโมดูลและการพึ่งพาวัตถุทั่วโลกกลายเป็นการพึ่งพาโมดูลอื่น ๆ โดยไม่ต้องประกาศตัวแปรทั่วโลกจำนวนมาก แก้ไขการพึ่งพาของแต่ละโมดูลผ่านการหน่วงเวลาและการโหลดตามความต้องการ ประโยชน์ของรหัส JavaScript แบบแยกส่วนชัดเจน การมีเพศสัมพันธ์แบบหลวมของส่วนประกอบการทำงานที่หลากหลายสามารถปรับปรุงความสามารถในการใช้ซ้ำและการบำรุงรักษาของรหัสได้อย่างมาก การโหลดรหัส JavaScript ที่ไม่ปิดกั้นพร้อมกันนี้ช่วยให้องค์ประกอบ UI อื่น ๆ บนหน้าเว็บที่ไม่พึ่งพารหัส JavaScript เช่นรูปภาพ, CSS และโหนด DOM อื่น ๆ เพื่อโหลดก่อนหน้าเว็บจะโหลดได้เร็วขึ้นและผู้ใช้จะได้รับประสบการณ์ที่ดีขึ้น
1. ดาวน์โหลด requiejs
ก่อนการพัฒนาแบบแยกส่วนด้วย requiejs เราต้องเตรียมบางสิ่งบางอย่าง นั่นจะต้องดาวน์โหลดไฟล์ require.js ฮ่าฮ่าฮ่าเพราะมันได้รับการพัฒนาขึ้นอยู่กับมัน
2. สร้างไฟล์ HTML
หลังจากสร้างไฟล์ HTML แล้วการนำเข้า reghejs จะต้องใช้แท็ก <script> ไม่ต้องสงสัยเลยว่า จากนั้นมีแอตทริบิวต์ข้อมูลหลักในแท็กนี้ ฟังก์ชั่นของมันคือการทำหน้าที่เป็นทางเข้าและออกนั่นคือหลังจากโหลดต้องการ reedjs ให้ป้อนจากแอตทริบิวต์ Data-Main
ตัวอย่างเช่นต่อไปนี้คือ:
<! doctype html> <head> <title> ต้องการ </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </head> <body> <! src = "js/require.js"> </script> </body> </html>
เมื่อฉันโหลด js/require.js แล้วฉันไปที่ไฟล์ JS/Main ของ JS หลักยังเป็นไฟล์ JS เราสามารถละเว้นคำต่อท้าย. js และต้องการ Js จะเพิ่ม
3. ข้อมูลหลัก
หลังจากโปรแกรมดำเนินการ <script data-main = 'js/main' src = 'js/require.js'> </script> ให้ป้อน main.js ผ่าน data-main และดำเนินการ Main.js. แล้ว Main.js คืออะไร?
โปรดดูรหัส:
/* require.config ดำเนินการ baseUrl เป็น 'js', baseUrl หมายถึงไดเรกทอรีรากของไฟล์โมดูลซึ่งสามารถเป็นเส้นทางสัมบูรณ์หรือเส้นทางสัมพัทธ์*/require.config ({baseUrl: 'js', เส้นทาง: {jQuery: 'jQuery-1.8.2. ฟังก์ชั่นที่ไม่ระบุชื่อเช่นลิง-> mk*/ต้องการ (['monkey'], ฟังก์ชั่น (mk) {mk.init ();});จากรหัสด้านบนคุณจะเห็นว่า main.js มีสองโมดูล: require.config และต้องการ
ฟังก์ชั่นของ require.config คือการกำหนดค่าพารามิเตอร์บางอย่างของ Veuthejs แล้วอ้างถึงต่อสาธารณะ
ตัวอย่างเช่นฟังก์ชั่นของ baseUrl ด้านบนคือการใช้เป็นเส้นทางพื้นฐานและค้นหาไฟล์ภายใต้เส้นทางนี้ ฉันใส่ไฟล์. js ทั้งหมดในโฟลเดอร์ JS ดังนั้นหลังจากการกำหนดค่าคุณสมบัตินี้ไฟล์ที่ตามมาจะค้นหาเนื้อหาในเส้นทาง JS
ดังนี้:
ต้องการ (['Monkey'], ฟังก์ชั่น (ลิง) {monkey.init ();});เมื่อมันหมายถึงลิงมันเป็นลิงอ้างอิงไม่ใช่ JS/Monkey
บทบาทของเส้นทางคืออะไร? มันคือการแทนที่ไฟล์ JS ที่ใช้กันทั่วไปด้วยชื่อสามัญ ตัวอย่างเช่น jQuery-1.8.2.min.js เราไม่สามารถเขียนสิ่งนี้ได้ทุกครั้งที่เราเรียกมันเพื่อความสะดวกเราแทนที่ jQuery-1.8.2.min.js ในอนาคตเราสามารถใช้ jQuery โดยตรงซึ่งรวดเร็วและสะดวก
โอเคต้องการ config โดยทั่วไปคุ้นเคยกับมัน ในคำว่าฟังก์ชั่นของมันคือการกำหนดค่าความต้องการ
สิ่งที่จำเป็น?
ฟังก์ชั่นของความต้องการคือการดำเนินการ ตัวอย่างเช่นที่นี่ฉันต้องการ Monkey.js เท่านั้นที่จะดำเนินการดังนั้นฉันจึงนำเข้าลิงแล้วได้รับค่าส่งคืนหลังจากการดำเนินการลิงผ่านพารามิเตอร์ MK หากมีค่าส่งคืนเราสามารถทำการประมวลผล MK ที่สอดคล้องกันได้
เฮ้อะไรอยู่ในลิง?
มาดูกันเถอะ:
/* กำหนดพารามิเตอร์เป็นฟังก์ชันที่ไม่ระบุชื่อซึ่งส่งคืนวัตถุ*/define (['jQuery'], ฟังก์ชั่น ($) {var init = function () {console.log ($. เบราว์เซอร์);}; return {init: init};});กำหนด! ฟังก์ชั่นของมันคือการกำหนดโมดูล JS สำหรับใช้งานโดยโมดูลอื่นหรือต้องการ วิธีการอ้างถึงโมดูล JS อื่น ๆ นั้นคล้ายกับที่ต้องการ มันแนะนำไฟล์ JS ที่ต้องการแล้วสอดคล้องกับพารามิเตอร์ทีละตัว เป็นสิ่งสำคัญที่จะต้องทราบว่าโมดูลอื่นไม่สามารถเข้าถึงวิธีการหรือตัวแปรที่กำหนดไว้ในการกำหนดดังนั้นหากคุณต้องการให้โมดูลอื่นสามารถเข้าถึงได้คุณสามารถโยนวิธีการที่เกี่ยวข้อง (ส่งคืน) วัตถุหรือฟังก์ชั่น ที่นี่สิ่งที่ฉันกลับมาคือวัตถุที่ให้ init สำหรับโมดูลอื่น ๆ ที่จะโทร