web-gelistirme-sc.com

CommonJS, AMD ve RequireJS arasındaki ilişki?

CommonJS, AMD ve RequireJS hakkında hala çok kafam karıştı. Çok okuduktan sonra bile.

Dil tarayıcının dışında kullanıldığında, CommonJS'nin (önceki adıyla ServerJS) bazı JavaScript özelliklerini (yani modülleri) tanımlayan bir grup olduğunu biliyorum. CommonJS modülleri teknik özellikleri, Node.js veya RingoJS gibi bir uygulamaya sahiptir, değil mi?

CommonJS, Asenkron Modül Tanımı (AMD) ve RequireJS arasındaki ilişki nedir? RequireJS, CommonJS modül tanımının bir uygulaması mıdır? Eğer evet ise, AMD nedir?

javascriptmodulerequirejsamdcommonjs
788
gremo

RequireJS ,AMDAPI (kaynak) öğesini uygular.

CommonJS , modül içeriğini tanımlayan exports nesnesinin yardımıyla modülleri tanımlamanın bir yoludur. Basitçe söylemek gerekirse, bir CommonJS uygulaması şöyle çalışabilir:

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

Temel olarak CommonJS, bağımlılıkları getirmek için bir require() işlevine, modül içeriğini dışa aktarmak için bir exports değişkenine ve bağımlılıkları talep etmek için kullanılan bir modül tanımlayıcısına (bu modülle ilgili söz konusu modülün konumunu açıklayan) sahip olmanız gerektiğini belirtir. ( kaynak ). CommonJS, bahsettiğiniz Node.js dahil çeşitli uygulamalara sahiptir.

CommonJS özellikle tarayıcılar düşünülerek tasarlanmamıştır, bu yüzden tarayıcı ortamına çok iyi uymuyor (Gerçekten bunun için hiçbir kaynağım yok - sadece RequireJS sitesi de dahil olmak üzere her yerde yazıyor)) Görünüşe göre, bunun asenkron yükleme vb. İle ilgisi var.

Öte yandan, RequireJS, tarayıcı ortamına ( kaynak ) uyacak şekilde tasarlanmış AMD'yi uygulamaktadır. Anlaşılan, AMD CommonJS Transport formatının bir parçası olarak başladı ve kendi modül tanımı API'sine dönüştü. Dolayısıyla ikisi arasındaki benzerlikler. AMD'deki yeni özellik, modülün yüklenmeden önce bağımlılıklarını bildirmesini sağlayan define() işlevidir. Örneğin, tanım şöyle olabilir:

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

Dolayısıyla, CommonJS ve AMD, JavaScript farklı uygulamalara sahip modül tanımı API'leridir, ancak ikisi de aynı kökenlerden gelir.

  • AMDtarayıcı bağımlılığı için daha uygundur, çünkü modül bağımlılıklarının zaman uyumsuz yüklenmesini destekler.
  • RequireJS ,AMDuygulamasının bir uygulamasıdır, aynı zamanda CommonJS (esas olarak modül tanımlayıcılarında) ruhunu korumaya çalışır.

Daha da fazla sizi şaşırtmak için, RequireJS, bir AMD uygulaması iken, bir CommonJS sarıcı sunar, böylece CommonJS modülleri RequireJS ile kullanılmak üzere neredeyse doğrudan ithal edilebilir.

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

Umarım bu işleri netleştirmeye yardımcı olur!

733
jakee

CommonJS bundan daha fazlası - JavaScript için ortak bir API ve ekosistem tanımlayan bir proje. CommonJS'nin bir kısmı Modül özelliğidir. Node.js ve RingoJS sunucu tarafında JavaScript çalışma süreleridir ve evet, ikisi de CommonJS Modül özelliğine göre modüller uygular.

AMD (Asenkron Modül Tanımı) modüller için başka bir özelliktir. RequireJS muhtemelen AMD'nin en popüler uygulamasıdır. CommonJS'den en büyük farklardan biri, AMD'nin modüllerin asenkronize - yüklendiğini belirtmesidir; bu, modüllerin bir yükün bitmesini bekleyerek yürütmeyi engellemek yerine paralel olarak yüklendiği anlamına gelir.

AMD genellikle bundan dolayı istemci tarafı (tarayıcı içi) JavaScript geliştirmede kullanılır ve CommonJS Modülleri genellikle sunucu tarafında kullanılır. Ancak, her iki ortamda da modül özelliklerini kullanabilirsiniz - örneğin, RequireJS teklifleri Node.js'de çalıştırma talimatları ve browserify tarayıcıda çalışabilen bir CommonJS Modülü uygulamasıdır.

194
Nate

Kısa cevap şöyle olurdu:

COMMONJSveAMD, modüllerin ve bağımlılıklarının javascript uygulamalarında nasıl bildirilmesi gerektiğine ilişkin spesifikasyonlar (veya formatlar).

REQUIREJS, AMD uyumlu bir betik yükleyici kitaplığıdır, curljs başka bir örnektir.

CommonJS uyumlu:

Addy Osmani'nin kitabı 'dan alınmıştır.

// 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 uyumlu:

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

Başka bir yerde modül aşağıdakilerle kullanılabilir:

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

Bazı arka plan:

Aslında, CommonJS , bir API bildiriminden çok daha fazlasıdır ve bunun yalnızca bir kısmı bununla ilgilenir. AMD, CommonJS listesindeki modül formatı için taslak şartname olarak başladı, ancak tam bir uzlaşmaya varılmadı ve formatın daha da geliştirilmesi amdjs group 'e taşındı. Hangi formatın daha iyi olduğu konusundaki argümanlar, CommonJS'in daha geniş bir endişeler dizisini kapsamaya çalıştığını ve senkronize olması nedeniyle sunucu tarafı gelişimi için daha uygun olduğunu ve eşzamanlı olmayan doğası ve AMD'nin istemci tarafı (tarayıcı) gelişimi için daha uygun olduğunu belirtir Dojo'nun modül bildirgesinin uygulanmasında kökleri olduğu gerçeği.

Kaynaklar:

181
mmutilva

Alıntı yapmak

AMD:

  • Bir tarayıcı ilk yaklaşımı
  • Eşzamansız davranış ve basitleştirilmiş geriye dönük uyumluluk seçimi
  • Herhangi bir Dosya G/Ç kavramı yoktur.
  • Nesneleri, işlevleri, yapıcıları, dizeleri, JSON ve diğer birçok modül türünü destekler.

CommonJS :

  • Bir sunucu-ilk yaklaşım
  • Eşzamanlı davranış varsayımı
  • G/Ç, Dosya sistemi, Sözler ve daha fazlası gibi daha geniş kapsamlı endişeleri kapsar.
  • Sarılmamış modülleri destekliyorsa, ES.next/Harmony spesifikasyonlarına biraz daha yakın hissedebilir, sizi AMD tarafından zorunlu tutulan define () paketinden kurtarır.
  • Nesneleri sadece modüller olarak destekler.
24
zangw

JavaScript programını modüler olarak birkaç dosya halinde düzenlemek ve child-modules adresinden main js module işlevini çağırmak normaldir.

Mesele şu ki, JavaScript bunu sağlamıyor. Bugün bile Chrome ve FF'nin en yeni tarayıcı sürümlerinde.

Ancak, başka bir JavaScript modülünü çağırmak için JavaScript’te herhangi bir anahtar kelime var mı?

Bu soru dünyanın çoğu için çöküşü olabilir çünkü cevap Hayır.

ES5’te (2009’da yayınlandı) JavaScript’in import, dahil veya zorunlu gibi anahtar kelimeleri yoktu.

ES6, ({2015'te yayınlandı) gününü, import anahtar sözcüğünü ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ) önererek kaydeder hiçbir tarayıcı bunu uygulamaz.

Babel 6.18.0 kullanıyorsanız ve yalnızca ES2015 seçeneğiyle

import myDefault from "my-module";

tekrar require alacaksınız.

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

Bunun nedeni, require modülünün Node.js. dosyasından yükleneceği anlamına gelir. Node.js, sistem düzeyinde okunan dosyadan modüle sarma işlevlerine kadar her şeyi işleyecektir.

Çünkü JavaScript'te fonksiyonlar, modülleri temsil eden tek paketleyicidir.

CommonJS ve AMD konusunda kafam çok karıştı mı?

Hem CommonJS hem de AMD, akıllı modülleri yüklemek için JavaScript "kusurunun" üstesinden nasıl gelineceği sadece iki farklı tekniktir.

12
prosti