RequireJSดำเนินAMD API (ต้นฉบับ)
CommonJSเป็นวิธีการกำหนดโมดูลด้วยความช่วยเหลือของexports
วัตถุที่กำหนดเนื้อหาโมดูล พูดง่ายๆก็คือการติดตั้ง CommonJS อาจทำได้ดังนี้:
// someModule.js
exports.doSomething = function() { return "foo"; };
//otherModule.js
var someModule = require('someModule'); // in the vein of node
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
โดยทั่วไป CommonJS ระบุว่าคุณต้องมีrequire()
ฟังก์ชั่นในการดึงการอ้างอิงexports
ตัวแปรในการส่งออกเนื้อหาของโมดูลและตัวระบุโมดูล (ซึ่งอธิบายที่ตั้งของโมดูลที่เป็นปัญหาเกี่ยวกับโมดูลนี้) ที่ใช้ในการพึ่งพา ( แหล่งที่มา) ) CommonJS มีการนำไปใช้งานต่าง ๆ รวมถึงNode.jsที่คุณพูดถึง
CommonJS ไม่ได้ออกแบบมาโดยเฉพาะกับเบราว์เซอร์ในใจดังนั้นมันจึงไม่เหมาะกับสภาพแวดล้อมของเบราว์เซอร์เป็นอย่างดี ( ฉันไม่มีแหล่งที่มาสำหรับเรื่องนี้ - มันบอกว่าทุกที่รวมถึงไซต์ RequireJS ) เห็นได้ชัดว่า ทำอย่างไรกับการโหลดแบบอะซิงโครนัส ฯลฯ
ในทางตรงข้าม RequireJS ใช้ AMD ซึ่งออกแบบมาเพื่อให้เหมาะกับสภาพแวดล้อมของเบราว์เซอร์ ( แหล่งที่มา ) เห็นได้ชัดว่า AMD เริ่มต้นในรูปแบบของรูปแบบ CommonJS Transport และพัฒนาเป็น API คำจำกัดความของโมดูล ดังนั้นความคล้ายคลึงกันระหว่างคนทั้งสอง คุณลักษณะใหม่ใน AMD คือdefine()
ฟังก์ชันที่ช่วยให้โมดูลสามารถประกาศการพึ่งพาก่อนที่จะโหลดได้ ตัวอย่างเช่นนิยามอาจเป็น:
define('module/id/string', ['module', 'dependency', 'array'],
function(module, factory function) {
return ModuleContents;
});
ดังนั้น CommonJS และ AMD จึงเป็นAPI นิยามโมดูลJavaScriptที่มีการใช้งานที่แตกต่างกัน แต่ทั้งคู่มาจากต้นกำเนิดเดียวกัน
- AMDเหมาะสำหรับเบราว์เซอร์มากกว่าเนื่องจากรองรับการโหลดแบบอะซิงโครนัสของการพึ่งพาโมดูล
- RequireJSเป็นการใช้งานของAMDในขณะเดียวกันก็พยายามรักษาเจตนารมณ์ของCommonJS (ส่วนใหญ่อยู่ในโมดูลตัวระบุ)
เพื่อสร้างความสับสนให้กับคุณยิ่งกว่านี้ RequireJS ในขณะที่กำลังติดตั้ง AMD ก็นำเสนอ wrapper CommonJS เพื่อให้โมดูล CommonJS สามารถนำเข้ามาเกือบโดยตรงเพื่อใช้กับ RequireJS
define(function(require, exports, module) {
var someModule = require('someModule'); // in the vein of node
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});
ฉันหวังว่านี่จะช่วยชี้แจงสิ่งต่าง ๆ !