บทความนี้เป็นบทสรุปของจุดความรู้บางอย่างของ RequireJS พร้อมด้วยการวิเคราะห์ตัวอย่างในแอปพลิเคชันหลายหน้า
โครงสร้างไดเรกทอรีของกรณีนี้มีดังนี้:
reguthJS API สามฟังก์ชั่นหลัก: กำหนด (สร้างโมดูล), ต้องการ (โหลดโมดูล) และ config (config)
1. โหลดไฟล์ JS ในไฟล์ HTML
เนื้อหาของ page1.html มีดังนี้:
<! doctype html> <html> <head> <title> หน้า 1 </title> <script data-main = "scripts/page1" src = "scripts/lib/require.js"> </script> </head> <body> <a href = "page2.html"
เนื้อหาของ page2.html มีดังนี้:
<! doctype html> <html> <head> <title> หน้า 2 </title> <script data-main = "scripts/page2" src = "scripts/lib/require.js"> </script> </head> <body> <a href = "page1.html"
การขยายความรู้:
แอตทริบิวต์ Data-Main ระบุโมดูลหลักของโปรแกรมเว็บและไฟล์นี้จะถูกโหลดครั้งแรกโดย VeutheJS เนื่องจากชื่อไฟล์ต่อท้ายไฟล์เริ่มต้นของ reghejs คือ js หน้า 1.js จึงสามารถย่อได้เป็นหน้า 1
กฎลำดับความสำคัญของเส้นทางรูทสำหรับการโหลดไฟล์สคริปต์
เมื่อโหลดโมดูลที่มีความต้องการ () คำต่อท้าย. js จะถูกละเว้นและจะถูกค้นหาจาก baseUrl; หากมี. js ต่อท้ายหรือเริ่มต้นด้วย "/" หรือมีโปรโตคอล URL (http/https) รูทจะเป็น
ค้นหาตามการตั้งค่าเส้นทางเฉพาะของคุณ
config> data-main> baseurl เริ่มต้น
หากไม่ได้ตั้งค่าข้อมูลหลักและการกำหนดค่า BaseURL เริ่มต้นคือไดเรกทอรีที่หน้า HTML ที่อ้างอิงต้องการ. JS อยู่
ตั้งค่า Data-Main จากนั้น BaseUrl เป็นไดเรกทอรีที่โมดูลหลักอยู่ (ตัวอย่างเช่นโมดูลหลักใน HTML แรกคือ Page1.js ดังนั้นไดเรกทอรีที่อยู่/สคริปต์คือไดเรกทอรีราก)
กำหนดค่าการกำหนดค่าตั้งค่า BaseURL อย่างชัดเจนและตั้งค่าเส้นทางแยกต่างหากสำหรับแต่ละโมดูล
2. กำหนดค่าพา ธ ของโมดูล ฯลฯ
ใช้เมธอด require.config () เพื่อปรับแต่งพฤติกรรมการโหลดของโมดูล ในแอปพลิเคชันหลายหน้าการกำหนดค่าสามารถเขียนในไฟล์ที่ใช้ร่วมกันเช่นไฟล์ Common.js ในตัวอย่างนี้ จากนั้นหลังจากแต่ละหน้าโหลดการกำหนดค่าปัจจุบันโมดูลที่ต้องการจะถูกโหลดในฟังก์ชันการโทรกลับ
รหัส Common.js มีดังนี้:
require.config ({baseUrl: 'สคริปต์/แอพ', เส้นทาง: {jQuery: ['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min'hการขยายความรู้:
รายการการกำหนดค่าที่รองรับ:
BaseUrl:
เส้นทางการค้นหารูทสำหรับโมดูลทั้งหมด หมายเหตุ: เมื่อไฟล์ JS ที่โหลด (จบด้วย. js เริ่มต้นด้วย "/" มีโปรโตคอล) จะไม่ใช้ baseUrl;
เส้นทาง:
ชื่อโมดูลแผนที่เส้นทางที่ไม่ได้อยู่ภายใต้ BaseURL โดยตรง ตำแหน่งเริ่มต้นเมื่อตั้งค่าเส้นทางนั้นสัมพันธ์กับ baseURL เว้นแต่การตั้งค่าเส้นทางจะเริ่มต้นด้วย "/" หรือมีโปรโตคอล URL;
หมายเหตุ: เส้นทางที่กำหนดไว้ในเส้นทางไม่สามารถมีคำต่อท้าย. js ได้เนื่องจากกลไกการแก้ไขเส้นทางจะเพิ่มคำต่อท้าย. Js โดยอัตโนมัติ และเส้นทางการโหลดสามารถตั้งค่าได้หลายครั้ง หากการโหลดจาก CDN ล้มเหลวไฟล์ JS จะถูกโหลด
ชิม:
กำหนดค่าสำหรับโมดูลที่ไม่ได้ใช้ define () เพื่อประกาศการพึ่งพา;
มีสองพารามิเตอร์ที่ต้องให้ความสนใจกับ:
(1) ค่าการส่งออก (ชื่อตัวแปรเอาท์พุท), เปิดเผยอินเตอร์เฟสวิธีการ
(2) อาร์เรย์ deps แสดงการพึ่งพาของโมดูล
ชอบ:
require.config ({baseUrl: '/scripts/lib', shim: {zepto: {exports: '$'}, backbone: {deps: ['Underscore', 'Zepto'], การส่งออก: 'backbone'}, 'zepto.animate':3. การโหลดโมดูล
รหัส page1.js มีดังนี้:
ต้องการ (['./ สามัญ'], ฟังก์ชั่น (สามัญ) {ต้องการ (['saypage1'], ฟังก์ชัน (saypage1) {saypage1.hello ();});});รหัส Page2.js มีดังนี้:
ต้องการ (['./ สามัญ'], ฟังก์ชั่น (สามัญ) {ต้องการ (['saypage2'], ฟังก์ชั่น (saypage2) {saypage2.hello ();});});การขยายความรู้:
ฟังก์ชั่นต้องการ () ยอมรับพารามิเตอร์สองพารามิเตอร์ พารามิเตอร์แรกคืออาร์เรย์ที่แสดงถึงโมดูลที่ขึ้นอยู่กับ พารามิเตอร์ที่สองคือฟังก์ชั่นการโทรกลับและจะถูกเรียกเฉพาะหลังจากโมดูลที่ระบุในปัจจุบันทั้งหมดจะถูกโหลดสำเร็จ โมดูลที่โหลดสามารถเรียกได้ว่าเป็นพารามิเตอร์ไปยังฟังก์ชันการเรียกกลับ
เพื่อให้แน่ใจว่าโมดูลที่ต้องการจะถูกโหลดหลังจากการกำหนดค่าเสร็จสมบูรณ์เป็นหลักสำหรับการวิเคราะห์ที่ถูกต้องของเส้นทางและต้องการมันในฟังก์ชั่นการโทรกลับ
4. คำจำกัดความของโมดูล
รหัสใน sayspage1.js:
กำหนด (['jQuery'], ฟังก์ชั่น ($) {function sayshi () {$ ('body'). ผนวก ('<h1> hello page1! </h1>');} return {hello: sayhi}});การขยายความรู้:
ฟังก์ชั่นกำหนดยังยอมรับพารามิเตอร์สองตัว พารามิเตอร์แรกคืออาร์เรย์ของโมดูลขึ้นอยู่กับและพารามิเตอร์ที่สองเป็นฟังก์ชันการเรียกกลับ
แน่นอนเมื่อเปิดตัวในที่สุดไฟล์ JS จะต้องถูกรวมและบีบอัด คุณสามารถใช้ R.JS ซึ่งสะดวกและรวดเร็ว ~
ข้างต้นคือการวิเคราะห์ตัวอย่างของแอปพลิเคชันหลายหน้าของ VeutheJS ที่ตัวแก้ไขแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!