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() ซึ่งจะโหลดสคริปต์ด้วยแท็ก <script> และคาดว่าจะอยู่ในรูปแบบ 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 ไว้ในแท็ก <script> และโหลดโมดูลผ่าน 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
