บทความก่อนหน้า: เราแนะนำ requirejs ในวิธีที่ง่ายมากกับเครื่องมือโมดูล JS บทความนี้จะบอกความรู้พื้นฐานบางอย่างใน RequireJS รวมถึงวิธีการใช้ APIs
API พื้นฐาน
ต้องการจะกำหนดตัวแปรสามตัว: กำหนด, ต้องการ, ต้องการ requirejs, โดยที่ต้องการ === ต้องการ requirejs, โดยทั่วไปต้องการจะสั้นกว่าโดยใช้ต้องการ
กำหนด จากชื่อคุณจะเห็นว่า API นี้ใช้เพื่อกำหนดโมดูล
ต้องการ โหลดโมดูลที่ขึ้นอยู่กับและเรียกใช้ฟังก์ชันการโทรกลับที่โหลด
A.JS ในบทความก่อนหน้า:
define (function () {function fun1 () {alert ("มันทำงาน");} fun1 ();})โมดูลถูกกำหนดผ่านฟังก์ชั่น define แล้วใช้ในหน้า:
ต้องการ (["JS/A"]);
ในการโหลดโมดูล (โปรดทราบว่าการพึ่งพาที่ต้องการนั้นเป็นอาร์เรย์แม้ว่าจะมีการพึ่งพาเพียงครั้งเดียวคุณต้องใช้อาร์เรย์เพื่อกำหนด) พารามิเตอร์ที่สองของต้องการ API คือการเรียกกลับฟังก์ชั่นซึ่งใช้ในการประมวลผลตรรกะหลังจากโหลดเช่น:
ต้องการ (["JS/A"], function () {Alert ("โหลดเสร็จ");})โหลดไฟล์
ในตัวอย่างก่อนหน้านี้โมดูลการโหลดเป็น JS ในท้องถิ่นทั้งหมด แต่ในกรณีส่วนใหญ่ JS ที่หน้าเว็บจำเป็นต้องโหลดอาจมาจากเซิร์ฟเวอร์ท้องถิ่นเว็บไซต์อื่น ๆ หรือ CDN ดังนั้นวิธีนี้ไม่สามารถโหลดได้ ลองโหลดไลบรารี jQuery เป็นตัวอย่าง:
require.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jQuery"]}}) ต้องการ ("jQuery", "js/a"], ฟังก์ชั่น ($) {$ (ฟังก์ชัน ()สิ่งนี้เกี่ยวข้องกับต้องการ config ต้องการ config ใช้เพื่อกำหนดค่าตำแหน่งการโหลดของโมดูล เพื่อให้ง่ายมันคือการให้ชื่อที่สั้นกว่าและจดจำได้ดีขึ้น ตัวอย่างเช่นทำเครื่องหมายที่อยู่ของห้องสมุด jQuery ของ Baidu เป็น jQuery ดังนั้นคุณจะต้องเขียน ["jQuery"] เมื่อต้องโหลด JS นอกจากนี้เรายังสามารถกำหนดค่า JS ในเครื่องได้เช่นนี้:
require.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jquery"], "a": "js/a"}}) ต้องการ ("jQuery", "a"], ฟังก์ชัน ($)การกำหนดค่าของพา ธ จะทำให้ชื่อโมดูลของเราได้รับการปรับปรุงให้ดีขึ้น เส้นทางยังมีฟังก์ชั่นที่สำคัญซึ่งก็คือการกำหนดค่าหลายเส้นทาง หากไลบรารี CDN ระยะไกลไม่สำเร็จห้องสมุดท้องถิ่นสามารถโหลดได้เช่น:
require.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jQuery", "js/jQuery"], "a": "js/a"}}) ต้องการ ("jQuery", "หลังจากการกำหนดค่านี้เมื่อ jQuery ของ Baidu ไม่สำเร็จ
เมื่อใช้ requirejs คุณไม่จำเป็นต้องเขียนคำต่อท้าย. js เมื่อโหลดโมดูลและแน่นอนว่าคุณไม่สามารถเขียนคำต่อท้ายได้
ในฟังก์ชั่นการโทรกลับในตัวอย่างข้างต้นมีพารามิเตอร์ $ นี่คือตัวแปรเอาต์พุตของโมดูล jQuery ที่พึ่งพา หากคุณพึ่งพาหลายโมดูลคุณสามารถเขียนพารามิเตอร์หลายตัวเพื่อใช้:
ต้องการ (["jQuery", "Underscore"], ฟังก์ชั่น ($, _) {$ (function () {_.each ([1,2,3], การแจ้งเตือน);})})หากโมดูลไม่ได้เอาต์พุตค่าตัวแปรไม่มีใคร ดังนั้นลองเขียนโมดูลเอาต์พุตด้านหน้าเพื่อป้องกันความเข้าใจผิดที่เกิดจากความเข้าใจผิดเนื่องจากความเข้าใจผิดเนื่องจากความเข้าใจผิดเนื่องจากความเข้าใจผิดเมื่อตำแหน่งสับสน
การกำหนดค่าทั่วโลก
การกำหนดค่า require.config ซ้ำในตัวอย่างด้านบน หากการกำหนดค่าถูกเพิ่มเข้าไปในแต่ละหน้าจะปรากฏว่าไม่เหมาะสมอย่างหลีกเลี่ยงไม่ได้ VegureJS จัดเตรียมฟังก์ชั่นที่เรียกว่า "ข้อมูลหลัก" ก่อนอื่นเราสร้าง main.js:
require.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jQuery", "JS/JQuery"], "A": "JS/A"}}))จากนั้นใช้วิธีการต่อไปนี้บนหน้าเพื่อใช้ requirejs:
<script data-main = "js/main" src = "js/reghe.js"> </script>
อธิบายว่าแท็กสคริปต์ของการโหลดสคริปต์ที่ต้องการเพิ่มแอตทริบิวต์ข้อมูลหลัก JS ที่ระบุในแอตทริบิวต์นี้จะถูกประมวลผลหลังจากโหลด reuqire.js หลังจากเราเพิ่มการกำหนดค่า config ที่ต้องการไปยัง Data-Main เราสามารถทำให้แต่ละหน้าใช้การกำหนดค่านี้จากนั้นหน้าสามารถใช้โดยตรงเพื่อโหลดชื่อโมดูลสั้นทั้งหมด
Data-Main ยังมีฟังก์ชั่นที่สำคัญ เมื่อแท็กสคริปต์ระบุแอตทริบิวต์ DATA-MAIN จำเป็นต้องมีค่าเริ่มต้นเพื่อเลือก JS ที่ระบุโดย DATA-MAIN เป็นเส้นทางรูท หมายความว่าอย่างไร? ตัวอย่างเช่นหลังจากการตั้งค่า data-main = "js/main" ด้านบนหลังจากที่เราใช้ต้องการ (['jQuery']) (ไม่มีการกำหนดค่าเส้นทางของ jQuery) จำเป็นต้องโหลดไฟล์ js/jQuery.js โดยอัตโนมัติแทน jQuery.js ซึ่งเทียบเท่ากับการกำหนดค่าเริ่มต้น: การกำหนดค่าเริ่มต้น: การกำหนดค่าเริ่มต้น: การกำหนดค่าเริ่มต้น
require.config ({baseUrl: "js"})โมดูลบุคคลที่สาม
โมดูลที่โหลดผ่านต้องการโดยทั่วไปจำเป็นต้องปฏิบัติตามข้อกำหนดของ AMD นั่นคือใช้กำหนดการประกาศเพื่อประกาศโมดูล แต่ในบางกรณีคุณต้องโหลดข้อกำหนดที่ไม่ใช่ AMD JS ในเวลานี้คุณต้องใช้ฟังก์ชั่นอื่น: ชิม ชิมยากที่จะเข้าใจ ชิมแปลโดยตรงว่า "แผ่น" ซึ่งจริง ๆ แล้วมีความหมายนี้ ปัจจุบันฉันใช้มันเป็นส่วนใหญ่ในสองสถานที่
1. เอาต์พุตโมดูลที่ไม่ใช่ AMD "PAD" โมดูล AMD ที่ไม่ได้มาตรฐานลงในโมดูลที่มีอยู่ ตัวอย่างเช่น: ใน jQuery รุ่นเก่าข้อมูลจำเพาะของ AMD ไม่ได้รับการสืบทอดดังนั้นเราจึงไม่สามารถต้องการ ["jQuery"] โดยตรง ในเวลานี้จำเป็นต้องมีชิม ตัวอย่างเช่นหากฉันใช้ไลบรารีคลาสขีดล่าง แต่มันไม่ได้ใช้ข้อกำหนด AMD เราสามารถกำหนดค่าได้เช่นนี้
require.config ({shim: {"underscore": {exports: "_";}}})หลังจากการกำหนดค่านี้เราสามารถอ้างถึงโมดูลขีดล่างในโมดูลอื่น ๆ :
ต้องการ (["Underscore"], function (_) {_.each ([1,2,3], การแจ้งเตือน);})สำหรับโมดูลที่ไม่ใช่ AMD ในรูปแบบปลั๊กอินเรามักจะใช้ปลั๊กอิน jQuery และปลั๊กอินเหล่านี้โดยทั่วไปจะไม่สอดคล้องกับข้อกำหนดของ AMD เช่น JQuery.Form Plug-in ในเวลานี้คุณต้อง "แผ่น" แบบฟอร์มปลั๊กอินลงใน jQuery:
require.config ({shim: {"underscore": {exports: "_";}, "jQuery.form": {deps: ["jQuery"]}}})นอกจากนี้ยังสามารถย่อได้เป็น:
require.config ({shim: {"underscore": {exports: "_";}, "jQuery.form": ["jQuery"]}})หลังจากการกำหนดค่านี้เราสามารถใช้ jQuery หลังจากโหลดปลั๊กอิน
require.config (["jQuery", "jQuery.form"], ฟังก์ชั่น ($) {$ (function () {$ ("#form"). ajaxsubmit ({... });})})โอเคมีการกำหนดค่าพื้นฐานมากมายของ RequireJS และฟังก์ชั่นเพิ่มเติมบางอย่างจะถูกกล่าวถึงในอนาคต อย่าคิดถึงพวกเขา!