840

मैं कॉमनजस , एएमडी और रिक्जेस्ट के बारे में अभी भी बहुत उलझन में हूं , बहुत कुछ पढ़ने के बाद भी।

मुझे पता है कि CommonJS (पूर्व ServerJS ) कुछ परिभाषित करने के लिए एक समूह है जावास्क्रिप्ट विनिर्देशों (यानी मॉड्यूल) जब भाषा ब्राउज़र के बाहर किया जाता है। CommonJS मॉड्यूल विनिर्देशन में Node.js या RingoJS जैसे कुछ कार्यान्वयन हैं , है ना?

बीच का रिश्ता क्या है CommonJS , अतुल्यकालिक मॉड्यूल परिभाषा (एएमडी) और RequireJS ?

है RequireJS के एक कार्यान्वयन CommonJS मॉड्यूल परिभाषा? यदि हाँ, तो AMD क्या है ?

— gremo
स्रोत

31

रीडिंग जरूरी jj.org.org/docs/whyamd.html बहुत कुछ स्पष्ट कर देगा क्योंकि इसमें उन सभी का उल्लेख है। (इसे एक टिप्पणी के रूप में पोस्ट करना क्योंकि मैं इसे पूर्ण उत्तर नहीं मानता हूं)।

— एममुटिल्वा

5

क्या मैं अधिक पूछ या जोड़ सकता हूं; कैसे या कहाँ ES2015 आयात बयान इन सभी में फिट बैठता है; उदाहरण के लिए 'एम्बर' से एम्बर आयात करें;

— testndtv

एक systemjs भी है जो किसी भी समर्थित जेएस मॉड्यूल फॉर्मेट को लोड करता है जैसे (CommonJS, UMD, AMD, ES6)।

— एंडी

770

आवश्यकताएं AMD एपीआई (स्रोत) को लागू करती हैं ।

कॉमनजस एक की मदद से मॉड्यूल को परिभाषित करने का एक तरीका हैexports वस्तु , जो मॉड्यूल सामग्री को परिभाषित करता है। सीधे शब्दों में कहें, एक कॉमन जेजेएस कार्यान्वयन इस तरह काम कर सकता है:

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

मूल रूप से, कॉमनजेएस निर्दिष्ट करता है कि आपको require()निर्भरता लाने के लिए एक फ़ंक्शन होना चाहिए, exportsमॉड्यूल सामग्री निर्यात करने के लिए एक चर और एक मॉड्यूल पहचानकर्ता (जो इस मॉड्यूल के संबंध में प्रश्न में मॉड्यूल के स्थान का वर्णन करता है) जो निर्भरता की आवश्यकता के लिए उपयोग किया जाता है ( स्रोत )। CommonJS में विभिन्न कार्यान्वयन हैं, जिनमें Node.js शामिल हैं , जिनका आपने उल्लेख किया है।

कॉमनजेएस को विशेष रूप से ब्राउज़र को ध्यान में रखते हुए डिज़ाइन नहीं किया गया था, इसलिए यह ब्राउज़र के वातावरण में बहुत अच्छी तरह से फिट नहीं होता है ( मेरे पास वास्तव में इसके लिए कोई स्रोत नहीं है - यह सिर्फ हर जगह ऐसा कहता है, जिसमें आवश्यकताएं भी शामिल हैं । ) जाहिर है, इसमें कुछ है। अतुल्यकालिक लोडिंग के साथ करते हैं, आदि।

दूसरी ओर, आवश्यकताएँ जेएमडी एएमपी को लागू करता है, जिसे ब्राउज़र वातावरण ( स्रोत ) के अनुरूप बनाया गया है । जाहिरा तौर पर, एएमडी ने कॉमनजेएस ट्रांसपोर्ट प्रारूप के स्पिनऑफ के रूप में शुरू किया और अपने स्वयं के मॉड्यूल परिभाषा एपीआई में विकसित हुआ। इसलिए दोनों में समानता है। एएमडी में नई सुविधा define()फ़ंक्शन है जो लोड होने से पहले मॉड्यूल को अपनी निर्भरता घोषित करने की अनुमति देता है। उदाहरण के लिए, परिभाषा यह हो सकती है:

define('module/id/string', ['module', 'dependency', 'array'], 
function(module, factory function) {
  return ModuleContents;  
});

तो, CommonJS और AMD हैं जावास्क्रिप्ट मॉड्यूल परिभाषा एपीआई हैं जिनके अलग-अलग कार्यान्वयन हैं, लेकिन दोनों एक ही मूल से आते हैं।

एएमडी ब्राउज़र के लिए अधिक अनुकूल है, क्योंकि यह मॉड्यूल निर्भरता के अतुल्यकालिक लोडिंग का समर्थन करता है।
RequireJS के एक कार्यान्वयन है एएमडी जबकि एक ही समय की भावना रखने की कोशिश कर, CommonJS (मुख्य रूप से मॉड्यूल पहचानकर्ता में)।

आपको और भी अधिक भ्रमित करने के लिए, एएमजे के कार्यान्वयन के दौरान, एनईआरजेएस, एक कॉमनजेएस आवरण प्रदान करता है, इसलिए कॉमनजेएस मॉड्यूल को लगभग सीधे जेईजेजेएस के साथ उपयोग के लिए आयात किया जा सकता है।

define(function(require, exports, module) {
  var someModule = require('someModule'); // in the vein of node    
  exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});

मुझे आशा है कि यह चीजों को स्पष्ट करने में मदद करता है!

— jakee
स्रोत

7

बाहर की जाँच करें uRequire.org परियोजना जो 2 स्वरूपों के अंतराल को पाटती है - या तो (या दोनों) में लिखें, दो में से किसी एक या सरल <script> पर आधारित

— Angelos Pikoulas

51

FYI करें ब्राउज़र अब आपको ब्राउज़र में कॉमनज का उपयोग करने देगा।

— Eruant

9

@ लेकिन, यह अभी भी एएमडी के रूप में अतुल्यकालिक प्रकृति नहीं है।

— इनक गमूस

8

आवश्यकता के कारण कॉमनजस ब्राउज़र में फिट नहीं होता है, जैसा कि रिक्जेस्ट डॉक्स में कहा गया है - " कॉमनजस आवश्यकता () एक तुल्यकालिक कॉल है, यह तुरंत मॉड्यूल को वापस करने की उम्मीद है। यह ब्राउज़र में अच्छी तरह से काम नहीं करता है" । अधिक जानकारी यहाँ ।

— एमएसनी

4

@aaaaaa आप उपयोगकर्ता के अनुरोध के आधार पर कुछ सुविधाओं को सक्षम करना चाहते हैं; इसलिए एएमडी का एसिंक्रियस नेचर काम आ सकता है।

— इनक गमूस

199

कॉमनजेएस इससे अधिक है - यह जावास्क्रिप्ट के लिए एक सामान्य एपीआई और पारिस्थितिकी तंत्र को परिभाषित करने के लिए एक परियोजना है। CommonJS का एक हिस्सा मॉड्यूल विनिर्देश है। Node.js और रिंगोजेएस सर्वर-साइड जावास्क्रिप्ट रनटाइम हैं, और हां, ये दोनों कॉमनजस मॉड्यूल मॉड्यूल के आधार पर मॉड्यूल को लागू करते हैं।

एएमडी (एसिंक्रोनस मॉड्यूल परिभाषा) मॉड्यूल के लिए एक और विनिर्देश है। आवश्यकताएँ जेएमडी शायद एएमडी का सबसे लोकप्रिय कार्यान्वयन है। कॉमनजस से एक बड़ा अंतर यह है कि एएमडी निर्दिष्ट करता है कि मॉड्यूल एसिंक्रोनस रूप से लोड किए गए हैं - इसका मतलब है कि मॉड्यूल समानांतर में लोड किए गए हैं, जैसा कि लोड को समाप्त करने के लिए इंतजार करके निष्पादन को अवरुद्ध करने का विरोध किया गया है।

एएमडी आमतौर पर क्लाइंट-साइड (इन-ब्राउज़र) जावास्क्रिप्ट विकास के कारण अधिक उपयोग किया जाता है, और कॉमन जेएस मॉड्यूल आमतौर पर सर्वर-साइड का उपयोग किया जाता है। उदाहरण के लिए, RequireJS प्रदान करता है - हालांकि, आप या तो माड्यूल विवरण या तो वातावरण में उपयोग कर सकते हैं दिशाओं Node.js में चलाने के लिए और browserify एक CommonJS मॉड्यूल कार्यान्वयन कि ब्राउज़र में चलाया जा सकता है।

— नैट
स्रोत

20

कॉमनजेएस होमपेज इतना भयानक क्यों है ... मैं सिर्फ ऑफिशियल कल्पना को देखने की कोशिश कर रहा हूं। इसमें सिंटैक्स त्रुटियां हैं, अधूरा प्रलेखन और विकी पृष्ठ हल नहीं है।

— टैको

7

यही कारण है कि यह मॉड्यूल को अतुल्यकालिक रूप से लोड करने का मतलब नहीं है। आप गतिशील / आलसी लोडिंग के बारे में बात कर रहे होंगे। Async के साथ, आप लोड करने के लिए एक फ़ाइल का सुझाव देते हैं और फिर कुछ समय बाद जब यह लोड हो रहा है तो वापस कॉल करेगा। सिंक के साथ, आप एक फ़ाइल को लोड करने के लिए सुझाव देते हैं और फिर उस फ़ाइल को लोड होने तक पूरे थ्रेड ब्लॉक करते हैं; फ़ाइल लोड होने तक कोई और कोड निष्पादित नहीं होता है। पूर्व अप्रत्याशितता की कीमत पर बेहतर प्रदर्शन कर सकता है, जबकि उत्तरार्द्ध हर बार एक ही परिणाम दे सकता है और इस प्रकार अधिक पूर्वानुमान है। ध्यान दें कि इन quirks को विभिन्न अनुकूलन के उपयोग से कम किया जा सकता है।

— पेरी

जवाब के लिए धन्यवाद। अब जब मॉड्यूल JS201 में ES2015 के साथ आधिकारिक हैं, तो क्या इसका मतलब यह है कि वे AMD या आम JS से अधिक हैं?

— अखोय

इसका मतलब यह नहीं है कि उन्हें पसंद किया जाता है। यह डेवलपर की जरूरतों तक है। मुझे नहीं लगता कि कोई विकल्प नहीं छोड़ना और ईएस 6 मॉड्यूल के लिए जाना विशेष रूप से अच्छा विचार है। अच्छा UMD का उपयोग करते हुए, आप उस समस्या का सामना कर सकते हैं। लोड हो रहा है कॉमनजस बंडल एएमडी के साथ सिंक किया गया एक सामान्य (सर्वश्रेष्ठ) विचार है (प्रदर्शन खातिर सुधार के लिए)। यदि आपको लगता है कि आपको अधिक नियंत्रण रखना चाहिए, तो जाहिर है। और आपको चाहिए।

— मैकीज सिटको

187

संक्षिप्त उत्तर होगा:

कॉमन जेजेएस और एएमडी विनिर्देश (या प्रारूप) हैं कि कैसे जावास्क्रिप्ट अनुप्रयोगों में मॉड्यूल और उनकी निर्भरता घोषित की जानी चाहिए।

EssentialJS एक स्क्रिप्ट लोडर लाइब्रेरी है जो एएमडी आज्ञाकारी है, कर्लज एक और उदाहरण है।

कॉमनजेएस अनुपालन:

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;

एएमडी अनुपालन:

// 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();
});

कुछ पृष्ठभूमि:

वास्तव में, कॉमनजस एपीआई घोषणा की तुलना में बहुत अधिक है और इसका केवल एक हिस्सा इससे संबंधित है। एएमडी ने कॉमनजस सूची में मॉड्यूल प्रारूप के लिए एक मसौदा विनिर्देश के रूप में शुरू किया था, लेकिन पूर्ण सहमति नहीं हुई थी और प्रारूप का आगे विकास अमदजस समूह में चला गया । किस प्रारूप के आसपास तर्क बेहतर स्थिति में है कि कॉमन जेएस ने व्यापक रूप से चिंताओं को कवर करने का प्रयास किया है और यह सर्वर साइड डेवलपमेंट के लिए अपने सिंक्रोनस प्रकृति को देखते हुए बेहतर अनुकूल है, और यह कि एएमडी ग्राहक पक्ष (ब्राउज़र) के विकास के लिए बेहतर है और इसकी अतुल्यकालिक प्रकृति को देखते हुए और तथ्य यह है कि इसकी जड़ें डोजो के मॉड्यूल घोषणा कार्यान्वयन में हैं।

सूत्रों का कहना है:

— mmutilva
स्रोत

1

विवरण के बजाय कोड को देखने से मदद मिलती है! :) AMD compliantवास्तव में आवश्यकता है, सही?

— असिम केटी

क्या मुझे कुछ याद आ रहा है, या कुछ गलत है? आप "पैकेज / परिवाद" को परिभाषित करते हैं, लेकिन फिर "पैकेज / मायमॉडल" की आवश्यकता होती है।

— रुलडॉग

मैं हमेशा इतिहास के बारे में थोड़ा पढ़ना पसंद करता हूं कि कुछ ऐसा क्यों है! उस पृष्ठभूमि को प्रदान करने के लिए धन्यवाद!

— एंडरू

@RullDawg नहीं, "पैकेज / लीबी" को यहां परिभाषित नहीं किया गया है, यह यहां इस्तेमाल किया गया एक 3 पार्टी निर्भरता है।

— रॉबर्ट सिएमर 14

28

का हवाला देते हुए

AMD :

एक ब्राउज़र-पहला तरीका
अतुल्यकालिक व्यवहार का अनुकूलन और पीछे की ओर सरलीकृत संगतता
इसमें फ़ाइल I / O की कोई अवधारणा नहीं है।
यह ऑब्जेक्ट्स, फ़ंक्शंस, कंस्ट्रक्टर्स, स्ट्रिंग्स, JSON और कई अन्य प्रकार के मॉड्यूल का समर्थन करता है।

आम :

एक सर्वर-पहला दृष्टिकोण
समकालिक व्यवहार मान लेना
I / O, फ़ाइल सिस्टम, वादे और अधिक जैसे चिंताओं का एक व्यापक सेट कवर करें।
अलिखित मॉड्यूल का समर्थन करता है, यह ES.next/Harmony विनिर्देशों के थोड़ा अधिक करीब महसूस कर सकता है , जो आपको परिभाषित () आवरण से मुक्त AMDकरता है।
केवल मॉड्यूल के रूप में वस्तुओं का समर्थन करते हैं।

— zangw
स्रोत

17

यह कई फाइलों में और कॉल करने के लिए JavaScript कार्यक्रम मॉड्यूलर व्यवस्थित करने के लिए काफी सामान्य है child-modulesसे main js module।

बात जावास्क्रिप्ट यह प्रदान नहीं करता है। क्रोम और एफएफ के नवीनतम ब्राउज़र संस्करणों में आज भी नहीं।

लेकिन, क्या जावास्क्रिप्ट में कोई अन्य जावास्क्रिप्ट मॉड्यूल कॉल करने के लिए कोई कीवर्ड है?

यह प्रश्न कई लोगों के लिए दुनिया का कुल पतन हो सकता है क्योंकि उत्तर नहीं है ।

ES5 में (2009 में जारी) जावास्क्रिप्ट में आयात , शामिल , या आवश्यकता जैसे कोई कीवर्ड नहीं थे ।

ES6 आयात खोजशब्द ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ) का प्रस्ताव करते हुए दिन (2015 में जारी) बचाता है , लेकिन कोई भी ब्राउज़र इसे लागू नहीं करता है।

यदि आप बाबेल 6.18.0 का उपयोग करते हैं और केवल 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 के बारे में बहुत उलझन में हूं?

कॉमनजेएस और एएमडी दोनों ही दो अलग-अलग तकनीकें हैं जो मॉड्यूल को स्मार्ट लोड करने के लिए जावास्क्रिप्ट "दोष" को दूर करने के लिए कैसे करें।

— prosti
स्रोत

3

अपने उत्तर को अपडेट करना चाहिए क्योंकि अब सभी आधुनिक ब्राउज़र समर्थन करते हैं import

— vsync

@vsync, हाँ, मेरे उत्तर को संपादित करने के लिए स्वतंत्र महसूस करें, क्योंकि मैंने कुछ समय के लिए इस खंड का पालन नहीं किया है।

— प्रोस्टि

कॉमनजेएस, एएमडी और रिक्जेजेएस के बीच संबंध?

संक्षिप्त उत्तर होगा:

कॉमनजेएस अनुपालन:

एएमडी अनुपालन:

कुछ पृष्ठभूमि:

सूत्रों का कहना है: