วิธีการโหลดเริ่มต้นของ JS ผ่านแท็กสคริปต์ถูกซิงโครไนซ์นั่นคือหลังจาก JS ในแท็กสคริปต์แรกถูกโหลดแล้วไฟล์ที่สองจะเริ่มโหลดและอื่น ๆ จนกว่าไฟล์ JS ทั้งหมดจะถูกโหลด ยิ่งกว่านั้นการพึ่งพาของ JS จะต้องมั่นใจผ่านลำดับสคริปต์ และในระหว่างการโหลด JS เบราว์เซอร์จะหยุดตอบสนองซึ่งส่งผลกระทบอย่างมากต่อประสบการณ์ผู้ใช้ จากสิ่งนี้โซลูชั่นจำนวนมากของ JS ได้ปรากฏและโหลดแล้วการต้องการ JS เป็นหนึ่งในนั้น
โมดูลที่โหลดโดย requirejs โดยทั่วไปเป็นโมดูลที่สอดคล้องกับมาตรฐาน AMD นั่นคือโมดูลที่กำหนดด้วยการกำหนดและส่งคืนวิธีการที่เปิดเผยและตัวแปรด้วย RuTurn; RequireJS ยังสามารถโหลดโมดูลที่บินมาตรฐาน AMD ได้ แต่มันก็ลำบากกว่าและจะไม่เกี่ยวข้องกับเวลานี้
ต้องการการโหลด JS Main เกี่ยวข้องกับแง่มุมดังต่อไปนี้:
การสาธิต HTML
<script src = "js/require.js" เลื่อน async = "true" data-main = "js/main"> <!-ให้เส้นทางที่ต้องการออกประกาศว่าเป็น async โหลดระบุโมดูลรายการเป็น main.js (สามารถละเว้น. js)->>
main.js
require.config ({// ประกาศตำแหน่งของเส้นทางโมดูล: {"jQuery": "libs/jQuery" "เข้าสู่ระบบ": "libs/login"} // หรือใช้ baseUrl เพื่อระบุเส้นทางของโมดูลทั้งหมด baseUrl: "JS/libs"}); // ใช้จำเป็นต้องโหลดโมดูล พารามิเตอร์แรกคืออาร์เรย์นั่นคือโมดูลที่จะโหลดจะถูกโหลดตามลำดับของอาร์เรย์ อย่างที่สองคือฟังก์ชั่นการโทรกลับซึ่งดำเนินการหลังจากการโหลดทั้งหมดเสร็จสมบูรณ์ ต้องการ (['jQuery', 'เข้าสู่ระบบ'], ฟังก์ชั่น ($, เข้าสู่ระบบ) {Alert ("JQuery และ Login Module Load Success!"); login.do_login (); // อื่น ๆ });คำจำกัดความของโมดูลเข้าสู่ระบบสอดคล้องกับ AMD
// คำจำกัดความของ jQuery (['jQuery'], ฟังก์ชั่น ($) {// คำจำกัดความบางอย่างฟังก์ชั่น do_login () {$ .post ('/เซสชัน/สร้าง', {uname: $ ("#Uname"). val (), รหัสผ่าน: $ ("#รหัสผ่าน") }); // คำจำกัดความคำจำกัดความของโมดูลอื่น ๆ (ฟังก์ชัน () {// คำจำกัดความบางอย่างส่งคืน {xx: xx};});Rails ไม่ได้ใช้ตัวโหลด JS ในอีกด้านหนึ่งท่อสินทรัพย์ Rails เวอร์ชันใหม่จะแพ็คเกจไฟล์ JS ทั้งหมดลงในไฟล์ JS หนึ่งไฟล์โดยไม่มีสถานะการโหลด JS หลายสถานะ ในทางกลับกัน Turbolink ใช้เทคโนโลยี PJAX ที่เรียกว่าด้วยการสรรเสริญและการวิจารณ์ที่หลากหลาย ลิงค์เริ่มต้นจะเปลี่ยนเป็นวิธี AJAX และจะได้รับส่วน BOD ของ HTML เท่านั้นและส่วนหัวยังคงไม่เปลี่ยนแปลงดังนั้นการโหลด JS จะดำเนินการเฉพาะเมื่อเว็บไซต์เปิดเป็นครั้งแรก
กรณีที่ 1: การโหลดไฟล์ JavaScript
<script src = "./ js/require.js"> </script> <script> ต้องการ (["./ js/a.js", "./js/b.js"], ฟังก์ชั่น () {myfunctiona (); myfunctionb ();}); </script>พารามิเตอร์อาร์เรย์สตริงในเมธอดที่ต้องการสามารถอนุญาตค่าที่แตกต่างกัน เมื่อสตริงลงท้ายด้วย ".js" หรือเริ่มต้นด้วย "/" หรือเป็น URL ต้องการ JS จะคิดว่าผู้ใช้กำลังโหลดไฟล์ JavaScript โดยตรง มิฉะนั้นเมื่อสตริงคล้ายกับ "My/Module" มันจะคิดว่านี่เป็นโมดูลและจะโหลดไฟล์ JavaScript ที่โมดูลที่เกี่ยวข้องอยู่กับ BaseURL และเส้นทางที่กำหนดโดยผู้ใช้ ส่วนการกำหนดค่าจะอธิบายในรายละเอียดในภายหลัง
ควรชี้ให้เห็นที่นี่ว่าโดยค่าเริ่มต้น RequireJS ไม่รับประกันว่าจะต้องดำเนินการ myfunctiona และ myfunctionb หลังจากโหลดหน้าเว็บ เมื่อมีความจำเป็นเพื่อให้แน่ใจว่าสคริปต์จะถูกดำเนินการหลังจากโหลดหน้าเว็บแล้ว VegureJS จะจัดเตรียมโมดูล DomeRady อิสระ คุณต้องดาวน์โหลดโมดูลนี้จากเว็บไซต์อย่างเป็นทางการของ VeutheJS ซึ่งไม่รวมอยู่ใน VeutheJS ด้วยโมดูล DomeRady รหัสในกรณีที่ 1 จะถูกแก้ไขเพียงเล็กน้อยและการพึ่งพาการพึ่งพา DomReady
กรณีที่ 2: เรียกใช้งาน JavaScript หลังจากโหลดหน้าเว็บ
<script src = "./ js/require.js"> </script> <script> ต้องการ (["domready!", "./js/a.js", "./js/b.js"], function () {myfunctiona (); myfunctionb ();}); </script>หลังจากดำเนินการรหัสของกรณีที่ 2 ผ่าน Firebug คุณจะเห็นว่า VeutheJS จะแทรกแท็ก <Script> ในหน้าปัจจุบันเป็น A.JS และ B.JS ตามลำดับประกาศแท็ก <Script> สำหรับการดาวน์โหลดไฟล์ JavaScript แบบอะซิงโครนัส แอตทริบิวต์ ASYNC ได้รับการสนับสนุนโดยเบราว์เซอร์ส่วนใหญ่ซึ่งระบุว่าไฟล์ JS ในแท็ก <Script> นี้จะไม่บล็อกการดาวน์โหลดเนื้อหาหน้าอื่น
กรณีที่ 3: <script> แทรกโดย requirejs
<script type = "text/javascript" charset = "utf-8" async = "" data-requirecontext = "_" data-requiremodule = "js/a.js" src = "js/a.js"> </script>
ใช้ requirejs เพื่อกำหนดโมดูล JavaScript
สิ่งที่แตกต่างจากรหัส JavaScript แบบดั้งเดิมที่นี่คือไม่จำเป็นต้องเข้าถึงตัวแปรทั่วโลก การออกแบบแบบแยกส่วนช่วยให้รหัส JavaScript ผ่าน "ตัวแปรทั่วโลก" เหล่านี้เป็นพารามิเตอร์ผ่านการพึ่งพาเมื่อจำเป็นต้องเข้าถึง "ตัวแปรทั่วโลก" และหลีกเลี่ยงการเข้าถึงหรือประกาศตัวแปรหรือฟังก์ชั่นทั่วโลกในการดำเนินการหลีกเลี่ยงการจัดการ Namespace ที่ซับซ้อนจำนวนมาก
ตามที่ระบุไว้ในข้อกำหนด AMD ของ CommonJs การกำหนดโมดูล JavaScript จะถูกนำไปใช้ผ่านวิธีการกำหนด
ก่อนอื่นให้ดูตัวอย่างง่ายๆ ตัวอย่างนี้สร้างวัตถุนักเรียนในโปรแกรมหลักและนำวัตถุนักเรียนเข้าเรียนในชั้นเรียนโดยกำหนดโมดูลนักเรียนและโมดูลชั้นเรียน
กรณีที่ 4: โมดูลนักเรียน, student.js
define (function () {return {createstudent: function (ชื่อ, เพศ) {return {ชื่อ: ชื่อ, เพศ: เพศ};}};}); -กรณีที่ 5: โมดูลคลาส, class.js
define (function () {var allstudents = []; return {classid: "001", แผนก: "คอมพิวเตอร์", addToclass: ฟังก์ชั่น (นักเรียน) {allstudents.push (นักเรียน);}, getClassSize: function () {return allstudents.length;กรณีที่ 6: โปรแกรมหลัก
ต้องการ (["JS/Student", "JS/class"], ฟังก์ชั่น (นักเรียน, clz) {clz.addtoclass (นักเรียนสร้าง ("แจ็ค", "ชาย")); clz.addtoclass (นักเรียนโมดูลนักเรียนและโมดูลชั้นเรียนเป็นทั้งโมดูลอิสระ มากำหนดโมดูลใหม่กันเถอะ โมดูลนี้ขึ้นอยู่กับโมดูลนักเรียนและชั้นเรียนเพื่อให้ตรรกะของส่วนโปรแกรมหลักสามารถถูกห่อหุ้มด้วย
กรณีที่ 7: โมดูลผู้จัดการที่ต้องอาศัยโมดูลนักเรียนและชั้นเรียน, manager.js
กำหนด (["js/student", "js/class"], ฟังก์ชั่น (นักเรียน, clz) {return {addNewStudent: ฟังก์ชั่น (ชื่อ, เพศ) {clz.addtoclass (student.createstudent (ชื่อ, เพศ);}, getMyclassSizeกรณีที่ 8: โปรแกรมหลักใหม่
ต้องการ (["JS/Manager"], function (manager) {manager.addNewStudent ("Jack", "Male"); manager.addNewStudent ("Rose", "Female"); console.log (manager.getMyclassSize ()); // output 2});ผ่านตัวอย่างรหัสข้างต้นเราเข้าใจอย่างชัดเจนถึงวิธีการเขียนโมดูลวิธีการใช้โมดูลนี้และวิธีการกำหนดการพึ่งพาระหว่างโมดูล ยังมีเคล็ดลับที่จะใช้:
พยายามอย่าให้รหัสของโมดูล ตามที่ระบุไว้ในข้อกำหนด AMD ID นี้เป็นตัวเลือก หากมีให้ความสามารถในการโยกย้ายของโมดูลจะได้รับผลกระทบในการดำเนินการตามต้องการและการเปลี่ยนแปลงตำแหน่งไฟล์จะทำให้ ID ได้รับการแก้ไขด้วยตนเอง
ไฟล์ JavaScript แต่ละไฟล์กำหนดโมดูลเดียวเท่านั้น อัลกอริทึมการค้นหาสำหรับชื่อโมดูลและเส้นทางไฟล์กำหนดว่าวิธีนี้เหมาะสมที่สุด โมดูลและไฟล์หลายไฟล์จะได้รับการปรับให้เหมาะสมโดยเครื่องมือเพิ่มประสิทธิภาพ หลีกเลี่ยงการพึ่งพาแบบวงกลมของโมดูล หากเป็นไปไม่ได้ที่จะหลีกเลี่ยงคุณสามารถเพิ่มการพึ่งพาโมดูล "ต้องการ" ในโมดูลและใช้โดยตรงในรหัส
ต้องการ ("พึ่งพา modulename")กำหนดค่าความต้องการ:
ในบทนำก่อนหน้านี้เราดูเหมือนจะมองข้ามคำถามพื้นฐาน: ชื่อโมดูลมาจากไหน? เมื่อฉันต้องการโมดูลโมดูลนี้จะทำแผนที่ไปยังไฟล์ JavaScript เฉพาะได้อย่างไร สิ่งนี้เกี่ยวข้องกับวิธีการกำหนดค่าความต้องการ
วิธีที่ง่ายที่สุดในการโหลดต้องการ reedjs จะแสดงในกรณีที่ 2 ในกรณีนี้เราไม่ได้ระบุ baseUrl และพา ธ ไปยัง requirejs หากวิธีการที่แสดงในกรณีที่ 10 DATA-MAIN ระบุ a /js/main.js ในโฟลเดอร์ขนานกับไดเรกทอรี index.html ปัจจุบันเป็นทางเข้าโปรแกรมและไดเรกทอรี /JS จะถูกใช้เป็น baseURL เมื่อกำหนดโมดูลอื่น ๆ
กรณีที่ 9: การโหลดต้องการ. js
<script data-main = "js/main" src = "scripts/require.js"> </script>
ดังนั้นการพึ่งพาโมดูลทั้งหมดในตัวอย่างก่อนหน้าของเราสามารถลบออกจาก "JS/" และเขียน "นักเรียน", "คลาส", "ผู้จัดการ" ฯลฯ โดยตรง วิธีโดยตรงมากขึ้นในการแสดง baseUrl และเส้นทางที่ระบุคือการใช้ require.config เพื่อตั้งค่าพารามิเตอร์เหล่านี้ ดังที่แสดงในกรณีสิบ
กรณีที่ 10. การกำหนดค่าความต้องการ Js
<script type = "text/javaScript" src = "./ js/require.js"> </script> <script type = "text/javascript"> reghedsconfig ({baseUrl: "./js", เส้นทาง: {"บาง": "บาง/v1"} ต้องการ (["บาง/โมดูล", "my/module", "./js/a.js"], ฟังก์ชั่น (somemodule, mymodule) {}); </script>BaseUrl ระบุ URL พื้นฐานของโมดูลทั้งหมด ตัวอย่างเช่นสคริปต์ที่โหลดโดย "My/Module" เป็นจริง /js/my/module.js โปรดทราบว่าไฟล์ที่ลงท้ายด้วย. js จะไม่ใช้ baseUrl เมื่อโหลดพวกเขาจะยังคงใช้เส้นทางสัมพัทธ์ที่ index.html ปัจจุบันอยู่ดังนั้นคุณยังต้องเพิ่ม "./js/" หากไม่ได้ระบุ baseURL พา ธ ที่ระบุในข้อมูลหลักจะถูกนำมาใช้
เส้นทางที่กำหนดในเส้นทางใช้เพื่อแทนที่เส้นทางในโมดูลเช่นบางส่วน/โมดูลในตัวอย่างข้างต้น เส้นทางไฟล์ JavaScript เฉพาะคือ /js/some/v1/module.js Waitseconds ระบุระยะเวลาในการโหลดไฟล์ JavaScript ค่าเริ่มต้นคือ 7 วินาทีโดยไม่มีผู้ใช้ระบุ
การกำหนดค่าที่สำคัญอีกประการหนึ่งคือแพ็คเกจซึ่งสามารถระบุโครงสร้างไดเรกทอรีอื่น ๆ ที่สอดคล้องกับข้อกำหนดของ CommonJS AMD ซึ่งนำมาซึ่งความสามารถในการปรับขนาดที่หลากหลาย โมดูลเช่น dojo, jQuery ฯลฯ ยังสามารถโหลดได้โดย RequireJS ผ่านการกำหนดค่านี้
ตัวเลือกที่กำหนดค่าอื่น ๆ ได้แก่ สถานที่, บริบท, dep, การโทรกลับ ฯลฯ ผู้อ่านที่สนใจสามารถตรวจสอบเอกสารที่เกี่ยวข้องในเว็บไซต์ทางการของ VeutheJS