Cajon เป็นตัวโหลดโมดูล JavaScript สำหรับเบราว์เซอร์ที่สามารถโหลดโมดูล CommonJS/node และ AMD มันถูกสร้างขึ้นบน RequireJS
คุณสามารถใช้มันเพื่อเขียนโค้ดโมดูลสำหรับโปรเจ็กต์ของคุณในรูปแบบ CommonJS/โหนด จากนั้นใช้ RequireJS Optimizer เพื่อสร้างโมดูลทั้งหมดเป็นบันเดิลที่สอดคล้องกับ AMD ซึ่งจะทำให้คุณสามารถใช้ชิม AMD API ขนาดเล็ก เช่น อัลมอนด์ เพื่อรับโค้ดที่ได้รับการปรับปรุงอย่างเหมาะสมโดยไม่จำเป็นต้องใช้ตัวโหลดรันไทม์แบบเต็ม
เหตุใดจึงใช้สิ่งนี้แทน RequireJS สาเหตุที่เป็นไปได้บางประการ:
define ( function ( require ) {
/*module code here */
} ) ;
มิฉะนั้น คุณควรใช้ RequireJS หรือตัวโหลด AMD อื่น
หมายเหตุส่วนข้อจำกัดด้านล่าง คุณอาจจะกัดฟันด้วยความหงุดหงิดถ้าคุณไม่ใส่ใจพวกเขา
หากคุณไม่ชอบตัวโหลดนี้โดยเฉพาะ แต่ชอบแนวคิดของตัวโหลดโมดูลสไตล์ AMD และ CommonJS/โหนดคู่ คุณอาจจะชอบตัวโหลด Inject ของ LinkedIn มากกว่า
Cajon สร้างด้วย:
//@ sourceURL=
เพื่อระบุชื่อสคริปต์สำหรับผู้ดีบักเกอร์สคริปต์ Cajon จะใช้วิธี XHR+eval หากคำขอไปยังโดเมนเดียวกันกับเอกสาร HTML เท่านั้น หากถือว่าคำขอสคริปต์อยู่ในโดเมนอื่น คำขอสคริปต์จะมอบหมายให้กับฟังก์ชันเริ่มต้น needjs.load() ซึ่งจะโหลดสคริปต์ด้วยแท็ก และคาดว่าจะอยู่ในรูปแบบ AMD หรือ สคริปต์ "เบราว์เซอร์ globals" แบบดั้งเดิม
คุณสามารถแทนที่ลักษณะการทำงานนี้เพื่อใช้ XHR สำหรับคำขอข้ามโดเมนบางรายการได้ หากคุณทราบว่าผู้ใช้ของคุณจะใช้เบราว์เซอร์และเซิร์ฟเวอร์ที่เปิดใช้งาน CORS ดูส่วน การกำหนดค่า ด้านล่าง
สคริปต์ที่ถูกดึงมาจะถูกรวมไว้ใน wrapper ของ AMD ต่อไปนี้:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
และอนุญาตให้ใช้ __dirname และ __filename ภายในโค้ดที่ห่อไว้
Cajon กำหนดตัวแปร cajon
ให้เหมือนกับตัวแปร requirejs
ดังนั้นคุณสามารถใช้ตัวแปรนั้นได้ถ้าคุณต้องการเรียกการใช้งาน Cajon โดยเฉพาะ อย่างไรก็ตาม เครื่องมือเพิ่มประสิทธิภาพ needjs เข้าใจเฉพาะ require
, requirejs
และ define
เท่านั้น โดยจะไม่เข้าใจ cajon
นี่เป็นสิ่งสำคัญอย่างยิ่งหากคุณใช้ตัวเลือก mainConfigFile
ของเครื่องมือเพิ่มประสิทธิภาพ
วิธีที่ดีที่สุดคือใช้ require
ส่วนกลางหากคุณต้องการให้โค้ดพกพาไปยัง RequireJS, อัลมอนด์ และตัวโหลด AMD อื่นๆ และทำการตรวจจับเฉพาะ cajon
หากคุณต้องการทราบว่า Cajon พร้อมใช้งานหรือไม่
มีไดเร็กทอรี demo
ที่แสดงตัวอย่างการใช้งาน แต่โดยพื้นฐานแล้ว ให้ใส่ cajon.js ไว้ในแท็ก และโหลดโมดูลผ่าน
require([])
โปรดสังเกตส่วนข้อจำกัดด้านล่าง
หากต้องการเพิ่มประสิทธิภาพการสาธิต ให้รัน:
node tools/r.js -o demo/app.build.js
สิ่งนี้จะสร้างโปรเจ็กต์ที่ได้รับการปรับปรุงให้เหมาะสมในไดเร็กทอรี demo-built
โมดูลทั้งหมดในเอาท์พุตของบิลด์จะถูกแปลงเป็นรูปแบบ AMD เพื่อให้สามารถโหลดข้ามโดเมนได้โดยไม่จำเป็นต้องพิจารณา CORS เป็นพิเศษ
โปรไฟล์บิลด์ app.build.js ต้องใช้เครื่องมือเพิ่มประสิทธิภาพ r.js ให้เป็นเวอร์ชัน 2.0.2 หรือใหม่กว่า เนื่องจากใช้ตัวเลือกบิลด์ cjsTranslate
ของ 2.0.2 ที่แปลงโมดูล CommonJS/โหนดให้เป็นdefined()-wrapped สำหรับบิลด์
หากใช้โวโล:
volo add cajon
หากใช้ npm:
npm install cajon
หรือ URL ไปยังรุ่นล่าสุด:
https://raw.github.com/requirejs/cajon/latest/cajon.js
ดังนั้นอย่าคาดหวังที่จะ npm install
โค้ดบางส่วน จากนั้นจึงกำหนดให้ใช้ cajon ได้
โหนดใช้การค้นหาเส้นทาง node_modules
หลายรายการเพื่อค้นหาโค้ด ซึ่งไม่มีประสิทธิภาพในบริบทของเบราว์เซอร์ นอกจากนี้ โมดูลโหนดจำนวนมากยังขึ้นอยู่กับไลบรารีมาตรฐานของโหนดหรือสภาพแวดล้อมของโหนด ซึ่งไม่สามารถใช้งานได้ตามค่าเริ่มต้นในเว็บเบราว์เซอร์
หากคุณต้องการใช้โค้ดที่ติดตั้ง npm และคุณรู้ว่ามันจะทำงานในเบราว์เซอร์ คุณสามารถทำให้มันทำงานกับ cajon ได้ แต่คุณอาจต้องใช้ paths , map และ packages requiredjs config เพื่อให้มันไป งาน.
ระบบโมดูล CommonJS/โหนดเป็นระบบ IO ไฟล์โลคัลแบบซิงโครนัส ดังนั้นพวกเขาจึงอนุญาตให้มีโครงสร้างประเภทนี้:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
ตัวอย่างแรกจะล้มเหลวในสภาพแวดล้อมเบราว์เซอร์ AMD เนื่องจากการขึ้นต่อกันทั้งหมดจำเป็นต้องทราบ ดาวน์โหลด และดำเนินการก่อนที่โค้ดจะรัน หาก 'a' และ 'b' ไม่ได้อยู่ในสถานะนั้น ตัวอย่างแรกนั้นมีแนวโน้มที่จะสร้างข้อผิดพลาด
ตัวอย่างที่สองสามารถใช้งานได้ แต่โปรดทราบว่าตัวโหลดของ AMD จะดาวน์โหลดและดำเนินการ 'a' และ 'b' ก่อนที่จะรันโค้ดนั้น
หากคุณใช้การตัดสินใจรันไทม์เพื่อคว้าการพึ่งพา ให้ใช้รูปแบบการเรียกกลับ need() ที่สนับสนุนโดยตัวโหลด AMD:
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
หรือพิจารณาสร้างปลั๊กอินตัวโหลด AMD ที่สามารถทำตรรกะการตัดสินใจ แต่ยังคงถือเป็นการพึ่งพาสตริงเดียว:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
ทั้งปลั๊กอิน need และ loader ในรูปแบบการโทรกลับสามารถใช้งานได้กับ cajon เนื่องจากเป็นเพียงการใช้ needjs เบื้องหลัง
Cajon จะใช้วิธี XHR+eval หากคำขอไปยังโดเมนเดียวกันกับเอกสาร HTML เท่านั้น คุณสามารถแทนที่ลักษณะการทำงานนี้ได้หากคุณทราบว่าจะใช้เบราว์เซอร์และเซิร์ฟเวอร์ที่เปิดใช้งาน CORS
ตั้งค่าฟังก์ชัน useXhr
ในการกำหนดค่า cajon
ที่ส่งไปยังตัวโหลด:
require . config ( {
cajon : {
useXhr : function ( url , protocol , hostname , port ) {
//Return true if XHR is usable, false if the
//script tag approach to an AMD module/browser globals
//script should be used.
//url is the url being requested.
//protocol, hostname and port area all values from the
//current page that is using cajon. Compare them with
//what is in `url` to make your decision.
}
}
} ) ;
หากคุณต้องการกำหนดค่าออบเจ็กต์ XHR แต่ละรายการก่อนที่จะส่งคำขอ คุณสามารถใช้เมธอด onXhr
ที่ได้รับการเรียกหลังจาก xhr.open() แต่ก่อนที่จะตั้งค่า xhr.onreadystatechange() และก่อนที่ xhr.send() จะถูกเรียก : :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
เอ็มไอที
หลักจรรยาบรรณของมูลนิธิ jQuery