ตอนนี้ require.js เป็นวิธีที่ฉันโปรดปรานในการตั้งโปรแกรม JavaScript มันทำให้การทำลายรหัสเป็นชิ้น ๆ และจัดการได้ง่าย require.js Optimizer สามารถช่วยเราแจกจ่ายแอปพลิเคชันขนาดใหญ่ขึ้นไปยังแอพพลิเคชั่นขนาดเล็กหลายตัวเชื่อมต่อผ่านการพึ่งพาและในที่สุดก็รวมกันในระหว่างการรวบรวมและบรรจุภัณฑ์ เหตุผลเหล่านี้กระตุ้นให้เราใช้ require.js
ดังนั้นลองมาดูกันว่าคุณสมบัติที่ยอดเยี่ยมต้องการอะไร js มี!
เข้ากันได้กับ CommonJS
AMD (ข้อกำหนดนิยามโมดูลแบบอะซิงโครนัส) ปรากฏขึ้นจาก WorkGroup CommonJS CommonJS มีจุดมุ่งหมายเพื่อสร้างระบบนิเวศของ JavaScript ส่วนสำคัญของ CommonJS คือ Transport/C บรรพบุรุษของ AMD และ require.js คือการดำเนินการตามข้อกำหนดนี้
ความแตกต่างทางไวยากรณ์ระหว่างโมดูล CommonJS และโมดูล AMD นั้นส่วนใหญ่เกิดจากความต้องการของ AMD ในการรองรับคุณสมบัติแบบอะซิงโครนัสของเบราว์เซอร์ โมดูล CommonJS จำเป็นต้องซิงโครไนซ์ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var somemodule = ต้องการ ("somemodule");
var othermodule = ต้องการ ("othermodule");
exports.asplode = function () {
somemodule.dotehawesome ();
อีก module.domoarawesome ();
-
โมดูล AMD โหลดโมดูลแบบอะซิงโครนัสดังนั้นคำจำกัดความของโมดูลจึงต้องใช้อาร์เรย์เป็นพารามิเตอร์แรกและฟังก์ชั่นการเรียกกลับหลังจากโหลดโมดูลถูกส่งผ่านเป็นพารามิเตอร์ที่สอง
การคัดลอกรหัสมีดังนี้:
กำหนด (["somemodule"], ฟังก์ชั่น (somemodule) {
กลับ {
Asplode: function () {
somemodule.dotehawesome ();
// สิ่งนี้จะถูกดำเนินการแบบอะซิงโครนัส
ต้องการ (["อื่น module"], ฟังก์ชั่น (อีกโมดูล) {
อีก module.domoarawesome ();
-
-
-
-
อย่างไรก็ตาม AMD ยังเข้ากันได้กับไวยากรณ์ CommonJS ใน require.js โดยการห่อโมดูล CommonJS ผ่านฟังก์ชั่นการกำหนดของ AMD คุณสามารถมีโมดูล CommonJS ใน AMD ได้เช่น:
การคัดลอกรหัสมีดังนี้:
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล)
var somemodule = ต้องการ ("somemodule");
var othermodule = ต้องการ ("othermodule");
somemodule.dotehawesome ();
อีก module.domoarawesome ();
exports.asplode = function () {
somemodule.dotehawesome ();
อีก module.domoarawesome ();
-
-
ในความเป็นจริง require.js ตีความเนื้อหาโมดูลของฟังก์ชั่นการเรียกกลับผ่านฟังก์ชั่น. toString ค้นหาการพึ่งพาที่ถูกต้องและเปลี่ยนเป็นโมดูล AMD ปกติ ควรสังเกตว่าถ้าคุณเขียนโมดูลด้วยวิธีนี้มันอาจจะไม่เข้ากันกับรถตัก AMD อื่น ๆ เพราะนี่เป็นการละเมิดข้อกำหนด AMD แต่สามารถเข้าใจได้ว่ารูปแบบนี้เขียนได้ดีอย่างไร
เกิดอะไรขึ้นที่นี่ต้องใช้ฟังก์ชั่นฟังก์ชั่นการโทรกลับของโมดูลจริง ๆ และค้นหาการพึ่งพาที่ถูกต้องเช่นเดียวกับที่มันเป็นโมดูล AMD ปกติ เป็นสิ่งสำคัญที่จะต้องทราบว่าหากคุณเลือกที่จะเขียนโมดูลเช่นนี้พวกเขาส่วนใหญ่จะไม่เข้ากันกับตัวโหลดโมดูล AMD อื่น ๆ เนื่องจากการละเมิดข้อกำหนดของ AMD แต่เป็นความคิดที่ดีที่จะเข้าใจรูปแบบนี้!
CDN กลับมา
ขุมทรัพย์ที่ซ่อนอยู่อีกอย่างหนึ่งสมบัติ js คือรองรับการย้อนกลับการโหลดไลบรารีที่สอดคล้องกันในท้องถิ่นเมื่อ CDN กำลังโหลดไม่ถูกต้อง เราสามารถบรรลุสิ่งนี้ผ่าน require.config:
การคัดลอกรหัสมีดังนี้:
requirejs.config ({
เส้นทาง: {
jQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js'
'lib/jQuery'
-
-
-
ไม่มีการพึ่งพา? คัดค้านตัวอักษร? ไม่มีปัญหา!
เมื่อคุณเขียนโมดูลที่ไม่มีการพึ่งพาและเพียงส่งคืนวัตถุที่มีฟังก์ชั่นการทำงานบางอย่างเราสามารถใช้ไวยากรณ์ง่ายๆ:
การคัดลอกรหัสมีดังนี้:
กำหนด({
forcechoke: function () {
-
Forcelighting: function () {
-
Forcerun: function () {
-
-
มันง่ายและมีประโยชน์หากโมดูลเป็นเพียงคอลเลกชันของฟังก์ชั่นหรือเพียงแค่แพ็คเก็ต
การพึ่งพาแบบวงกลม
ในบางกรณีเราอาจต้องการฟังก์ชั่นในโมดูลโมดูลและโมดูเลียเพื่อพึ่งพาแอปพลิเคชันบางอย่าง นี่คือการพึ่งพาวงกลม
การคัดลอกรหัสมีดังนี้:
// js/app/modulea.js
กำหนด (["ต้องการ", "แอป/แอป"],
ฟังก์ชั่น (ต้องการแอพ) {
กลับ {
foo: function (title) {
var app = ต้องการ ("แอพ/แอพ");
return app.something ();
-
-
-
-
รับที่อยู่โมดูล
หากคุณต้องการรับที่อยู่ของโมดูลคุณสามารถทำได้ ...
การคัดลอกรหัสมีดังนี้:
var path = require.tourl ("./ style.css");
baseurl
โดยปกติเมื่อทำการทดสอบหน่วยซอร์สโค้ดของคุณอาจถูกวางไว้ในโฟลเดอร์ที่คล้ายกับ SRC และในเวลาเดียวกันการทดสอบของคุณอาจถูกวางไว้ในโฟลเดอร์ที่คล้ายกับการทดสอบ นี่อาจเป็นเรื่องยากที่จะทำให้การกำหนดค่าการทดสอบถูกต้อง
ตัวอย่างเช่นเรามีไฟล์ index.html ในโฟลเดอร์ทดสอบและจำเป็นต้องโหลดการทดสอบ/spec/*. js ในเครื่อง และสมมติว่าซอร์สโค้ดทั้งหมดอยู่ใน SRC/JS/*. JS และมี main.js ในโฟลเดอร์นั้น
ใน index.html ไม่ได้ตั้งค่าข้อมูลหลักเมื่อต้องการ. js ถูกโหลด
การคัดลอกรหัสมีดังนี้:
<script src = "src/js/ผู้ขาย/require.js"> </script>
<script>
ต้องการ (["../src/js/main.js"], function () {
chante.config ({
BaseUrl: "../src/js/"
-
จำเป็นต้อง([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], การทำงาน() {
// เริ่มต้นกรอบการทดสอบของคุณ
-
-
</script>
คุณสามารถค้นหาได้ว่า main.js ถูกโหลด อย่างไรก็ตามเนื่องจากไม่ได้ตั้งค่าข้อมูลหลักเราจึงต้องกำหนด baseUrl ตามที่เราต้องการ เมื่อใช้ Data-Main, BaseURL จะตั้งค่าโดยอัตโนมัติตามไฟล์ที่ตั้งไว้
ที่นี่คุณสามารถดู Main.js ได้ อย่างไรก็ตามเนื่องจากไม่โหลดแท็กสคริปต์หลักของข้อมูลคุณจึงต้องระบุฐาน เมื่อข้อมูลส่วนใหญ่ใช้สำหรับ baseURL ให้อนุมานจากตำแหน่งในไฟล์หลัก โดยการปรับแต่ง BaseURL เราสามารถจัดเก็บรหัสทดสอบและรหัสแอปพลิเคชันแยกกันได้อย่างง่ายดาย
JSONP
เราสามารถจัดการเทอร์มินัล JSONP เช่นนี้:
การคัดลอกรหัสมีดังนี้:
จำเป็นต้อง( [
"http://someapi.com/foo?callback=define"
], ฟังก์ชั่น (ข้อมูล) {
console.log (ข้อมูล);
-
สำหรับห้องสมุดที่ไม่ใช่ AMD ให้ใช้ Shim เพื่อแก้ไข
ภายใต้คำขอหลายอย่างเราจำเป็นต้องใช้ไลบรารีที่ไม่ใช่ AMD ตัวอย่างเช่น Backbone และ Underscore ไม่ปรับให้เข้ากับข้อกำหนดของ AMD และจริง ๆ แล้ว jQuery เพียงกำหนดตัวเองเป็นตัวแปรระดับโลกที่เรียกว่า jQuery ดังนั้นคุณไม่ต้องทำอะไรกับ jQuery
โชคดีที่เราสามารถใช้การกำหนดค่า Shim เพื่อแก้ปัญหานี้
การคัดลอกรหัสมีดังนี้:
chante.config ({
เส้นทาง: {
"Backbone": "ผู้ขาย/กระดูกสันหลัง"
"ขีดล่าง": "ผู้ขาย/ขีดล่าง"
-
ชิม: {
"กระดูกสันหลัง": {
deps: ["ขีดล่าง"],
การส่งออก: "กระดูกสันหลัง"
-
"ขีดล่าง": {
การส่งออก: "_"
-
-
-