ฉันยังคงสับสนเกี่ยวกับCommonJS, AMDและRequireJSมากแม้หลังจากอ่านมาก

ฉันรู้ว่าCommonJS (เดิมชื่อServerJS ) เป็นกลุ่มสำหรับการกำหนดข้อกำหนดJavaScript (เช่นโมดูล) เมื่อมีการใช้ภาษานอกเบราว์เซอร์ ข้อกำหนดคุณสมบัติโมดูลCommonJSมีการนำไปใช้บางอย่างเช่นNode.jsหรือRingoJSใช่ไหม

ความสัมพันธ์ระหว่างCommonJS , Asynchronous Module Definition (AMD) และRequireJSคืออะไร?

RequireJSคือการนำไปใช้ของนิยามโมดูลCommonJSหรือไม่? ถ้าใช่เอเอ็มดีคืออะไร

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"; };
});

ฉันหวังว่านี่จะช่วยชี้แจงสิ่งต่าง ๆ !

CommonJSเป็นมากกว่านั้น - เป็นโครงการเพื่อกำหนด API ทั่วไปและระบบนิเวศสำหรับ JavaScript ส่วนหนึ่งของ CommonJS คือข้อมูลจำเพาะของโมดูล Node.js และ RingoJS เป็นรันไทม์ JavaScript ฝั่งเซิร์ฟเวอร์และใช่ทั้งคู่ใช้งานโมดูลตามข้อมูลจำเพาะของโมดูล CommonJS

AMD (คำจำกัดความของโมดูลอะซิงโครนัส) เป็นอีกหนึ่งข้อกำหนดสำหรับโมดูล RequireJSน่าจะเป็นที่นิยมใช้มากที่สุดของ AMD ความแตกต่างที่สำคัญอย่างหนึ่งจาก CommonJS คือ AMD ระบุว่าโมดูลนั้นโหลดแบบอะซิงโครนัสซึ่งหมายความว่าโมดูลนั้นจะถูกโหลดแบบขนานซึ่งต่างจากการบล็อกการดำเนินการโดยรอให้โหลดเสร็จ

โดยทั่วไปแล้วเอเอ็มดีจะใช้ในการพัฒนาจาวาสคริปต์ในฝั่งไคลเอ็นต์ (ในเบราว์เซอร์) และโมดูล CommonJS นั้นมักจะใช้ฝั่งเซิร์ฟเวอร์ อย่างไรก็ตามคุณสามารถใช้ข้อมูลจำเพาะของโมดูลในสภาพแวดล้อมใด ๆ - ตัวอย่างเช่น RequireJS เสนอเส้นทางสำหรับการทำงานใน Node.jsและbrowserifyเป็นการใช้งานโมดูล CommonJS ที่สามารถทำงานในเบราว์เซอร์

คำตอบสั้น ๆ คือ:

CommonJSและ AMDเป็นข้อกำหนด (หรือรูปแบบ) เกี่ยวกับวิธีที่โมดูลและการขึ้นต่อกันควรถูกประกาศในแอปพลิเคชันจาวาสคริปต์

RequireJSเป็นไลบรารีโหลดเดอร์สคริปต์ที่เป็นไปตามมาตรฐานของ AMD curljเป็นอีกตัวอย่างหนึ่ง

CommonJS เป็นไปตาม:

ที่นำมาจากหนังสือของ Addy Osmani

// package/lib is a dependency we require
var lib = require( "package/lib" );

// behavior for our module
function foo(){
    lib.log( "hello world!" );
}

// export (expose) foo to other modules as foobar
exports.foobar = foo;

สอดคล้องกับ AMD:

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

โมดูลอื่นสามารถใช้กับ:

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

พื้นหลังบางส่วน:

จริงๆแล้วCommonJSนั้นเป็นมากกว่าการประกาศ API และเป็นเพียงส่วนหนึ่งเท่านั้นที่เกี่ยวข้องกับสิ่งนั้น เอเอ็มดีเริ่มต้นเป็นข้อกำหนดร่างสำหรับรูปแบบโมดูลในรายการ CommonJS แต่ฉันทามติเต็มไม่ถึงและพัฒนาต่อไปของรูปแบบย้ายไปกลุ่ม amdjs ข้อโต้แย้งเกี่ยวกับรูปแบบที่ระบุว่า CommonJS พยายามครอบคลุมชุดของปัญหาที่กว้างขึ้นและเหมาะสำหรับการพัฒนาด้านเซิร์ฟเวอร์เนื่องจากลักษณะการซิงโครนัสและ AMD เหมาะสำหรับการพัฒนาฝั่งไคลเอ็นต์ (เบราว์เซอร์) เนื่องจากลักษณะอะซิงโครนัสและ ความจริงที่ว่ามันมีรากฐานในการดำเนินการประกาศโมดูลของ Dojo

แหล่งที่มา:

• RequireJS - ทำไมต้องเป็น AMD
• Addy Osmani - รูปแบบการออกแบบ JavaScript สำหรับการเรียนรู้ - รูปแบบการออกแบบ JavaScript โมดูลาร์ที่ทันสมัย

quoting

AMD :

• วิธีแรกในเบราว์เซอร์
• การเลือกพฤติกรรมแบบอะซิงโครนัสและความเข้ากันได้แบบย้อนหลังที่ง่ายขึ้น
• ไม่มีแนวคิดของ File I / O
• มันสนับสนุนวัตถุฟังก์ชันคอนสตรัคเตอร์สตริง JSON และโมดูลประเภทอื่น ๆ อีกมากมาย

CommonJS :

• วิธีแรกสำหรับเซิร์ฟเวอร์
• สมมติว่าพฤติกรรมแบบซิงโครนัส
• ครอบคลุมชุดของข้อกังวลที่กว้างขึ้นเช่น I / O, ระบบไฟล์, สัญญาและอื่น ๆ
• สนับสนุนโมดูลที่ไม่ได้เปิดใช้งานมันสามารถรู้สึกใกล้เคียงกับข้อกำหนดES.next/Harmonyเพียงเล็กน้อยช่วยให้คุณใช้ wrapper define () ที่AMDบังคับใช้
• สนับสนุนวัตถุเป็นโมดูลเท่านั้น

มันเป็นเรื่องปกติมากทีเดียวที่จะจัดระเบียบ JavaScript modular โปรแกรมลงในไฟล์หลายและการเรียกร้องจากchild-modulesmain js module

สิ่งนี้คือ JavaScript ไม่ได้ให้สิ่งนี้ แม้กระทั่งทุกวันนี้ใน Chrome และ FF เวอร์ชันล่าสุดของเบราว์เซอร์

แต่มีคำหลักใน JavaScript ที่เรียกโมดูล JavaScript อื่นหรือไม่

คำถามนี้อาจจะมีการยุบรวมของโลกสำหรับหลาย ๆ คนเพราะคำตอบคือไม่มี

ใน ES5 (ปล่อยตัวในปี 2009) มี JavaScript คำหลักที่ไม่เหมือนใครนำเข้า , รวมหรือต้อง

ES6 บันทึกวัน (เปิดตัวในปี 2015) เสนอคำหลักนำเข้า ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ) แต่ไม่มีเบราว์เซอร์ที่ใช้สิ่งนี้

หากคุณใช้ Babel 6.18.0 และ transpile พร้อมตัวเลือก ES2015 เท่านั้น

import myDefault from "my-module";

คุณจะได้รับrequireอีกครั้ง

"use strict";
var _myModule = require("my-module");
var _myModule2 = _interopRequireDefault(_myModule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

นี่เป็นเพราะrequireหมายถึงโมดูลจะถูกโหลดจาก Node.js Node.js จะจัดการทุกอย่างตั้งแต่การอ่านไฟล์ระดับระบบไปจนถึงการห่อฟังก์ชั่นลงในโมดูล

เพราะในฟังก์ชั่นจาวาสคริปต์เป็นเพียงเครื่องมือห่อหุ้มเพื่อเป็นตัวแทนโมดูล

ฉันสับสนมากเกี่ยวกับ CommonJS และ AMD ใช่ไหม

ทั้ง CommonJS และ AMD เป็นเพียงสองเทคนิคที่แตกต่างกันวิธีเอาชนะ JavaScript "ข้อบกพร่อง" เพื่อโหลดโมดูลสมาร์ท