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

CommonJS (eski adıyla ServerJS ), dil tarayıcı dışında kullanıldığında bazı JavaScript özelliklerini (yani modülleri) tanımlamak için bir grup olduğunu biliyorum . CommonJS modülleri belirtiminde Node.js veya RingoJS gibi bazı uygulamalar var , 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 ? Evet ise, AMD nedir?

RequireJS , AMD API'sini (kaynak) uygular .

CommonJS , exportsmodül içeriğini tanımlayan bir nesne yardımıyla modülleri tanımlamanın bir yoludur . Basitçe söylemek gerekirse, bir CommonJS uygulaması şu şekilde ç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, require()bağımlılıkları getirmek için bir işleve, exportsmodül içeriğini dışa aktarmak için bir değişkene ve bağımlılıkları ( kaynak olarak söz konusu modülle ilgili söz konusu modülün konumunu açıklayan) bir modül tanımlayıcısına ( kaynaka ihtiyaç duyduğunu) belirtmeniz gerektiğini belirtir. ). CommonJS, bahsettiğiniz Node.js de dahil olmak üzere çeşitli uygulamalara sahiptir .

CommonJS özellikle tarayıcılar göz önünde bulundurularak tasarlanmadı, bu yüzden tarayıcı ortamına çok iyi uymuyor ( bunun için hiçbir kaynağım yok - sadece RequireJS sitesi de dahil olmak üzere her yerde söylüyor . ) Görünüşe göre, bunun bir şeyleri var eşzamansız yükleme vb. ile yapın.

Öte yandan, RequireJS, tarayıcı ortamına ( kaynak ) uyacak şekilde tasarlanmış AMD'yi uygular . Görünüşe göre AMD, CommonJS Transport formatının bir parçası olarak başladı ve kendi modül tanımı API'sine dönüştü. Bu yüzden ikisi arasındaki benzerlikler. AMD'nin yeni özelliği define(), modülün yüklenmeden önce bağımlılıklarını bildirmesine izin veren işlevdir. Örneğin, tanım şunlar olabilir:

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

Bu nedenle, CommonJS ve AMD, farklı uygulamaları olan JavaScript modülü tanımlama API'larıdır, ancak her ikisi de aynı kökenlidir.

• AMD tarayıcı için daha uygundur, çünkü modül bağımlılıklarının eşzamansız yüklenmesini destekler.
• RequireJS , AMD'nin bir uygulamasıdır , aynı zamanda CommonJS'in ruhunu korumaya çalışır (esas olarak modül tanımlayıcılarında).

Sizi daha da karıştırmak için, bir AMD uygulaması olarak RequireJS, bir CommonJS sarmalayıcısı sunar, böylece CommonJS modülleri neredeyse doğrudan RequireJS ile kullanılmak üzere içe aktarılabilir.

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

Umarım bu bir şeyleri netleştirmeye yardımcı olur!

CommonJS bundan daha fazlasıdır - JavaScript için ortak bir API ve ekosistem tanımlamak için bir projedir. CommonJS'nin bir kısmı Modül belirtimidir. Node.js ve RingoJS sunucu tarafı JavaScript çalışma zamanlarıdır ve evet, her ikisi de CommonJS Module spesifikasyonlarına 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 önemli bir fark, AMD'nin modüllerin eşzamansız olarak yüklendiğini belirtmesidir - bu, bir yükün bitmesini bekleyerek yürütmeyi engellemenin aksine modüllerin paralel olarak yüklendiği anlamına gelir.

AMD genellikle bu nedenle istemci tarafı (tarayıcı içi) JavaScript geliştirmede daha çok 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 Node.js'de çalıştırmak için yönergeler sunar ve browserify , tarayıcıda çalışabilen bir CommonJS Modülü uygulamasıdır.

Kısa cevap:

CommonJS ve AMD , modüllerin ve bağımlılıklarının javascript uygulamalarında nasıl bildirilmesi gerektiğine ilişkin spesifikasyonlardır (veya formatlardır).

RequireJS , AMD uyumlu bir script yükleyici kütüphanesidir, curljs başka bir örnektir.

CommonJS uyumlu:

Alındığı Addy Osmani adlı kitabında .

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

Modül başka bir yerde kullanılabilir:

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

Bazı bilgiler:

Aslında, CommonJS bir API bildiriminden çok daha fazlasıdır ve yalnızca bir kısmı bununla ilgilenir. AMD, CommonJS listesindeki modül formatı için taslak şartname olarak başladı, ancak tam konsensüse ulaşılmadı ve formatın daha da geliştirilmesi amdjs grubuna taşındı . Hangi biçimin daha iyi olduğu konusundaki argümanlar, CommonJS'nin daha geniş bir dizi endişeyi kapsamaya çalıştığını ve senkronize doğası göz önüne alındığında sunucu tarafı gelişimi için daha uygun olduğunu ve AMD'nin asenkron yapısı ve bunun kökleri Dojo'nun modül beyanı uygulamasındadır.

Kaynaklar:

• RequireJS - Neden AMD?
• Addy Osmani - JavaScript Tasarım Desenlerini Öğrenme - Modern Modüler JavaScript Tasarım Desenleri

Alıntı yapmak

AMD :

• İlk tarayıcı yaklaşımı
• Zaman uyumsuz davranışı ve basitleştirilmiş geriye dönük uyumluluğu seçme
• Herhangi bir Dosya G / Ç konsepti yoktur.
• Nesneleri, işlevleri, yapıcıları, dizeleri, JSON ve diğer birçok modül türünü destekler.

CommonJS :

• İlk sunucu yaklaşımı
• Eşzamanlı davranış varsayımı
• G / Ç, Dosya sistemi, Vaatler ve daha fazlası gibi daha geniş bir endişeyi kapsar.
• Sarılmamış modülleri destekler, ES.next/Harmony spesifikasyonlarına biraz daha yakın hissedebilir ve sizi AMDzorlayan define () sargısını serbest bırakır .
• Nesneleri yalnızca modül olarak destekleyin.

JavaScript programını modüler olarak birkaç dosya halinde düzenlemek child-modulesve main js module.

Aslında JavaScript bunu sağlamaz. Bugün bile Chrome ve FF'nin en son tarayıcı sürümlerinde değil.

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

Bu soru birçokları için dünyanın tamamen çökmesi olabilir, çünkü cevap Hayır .

ES5'te (2009'da piyasaya sürüldü) JavaScript'in içe aktarma , dahil etme veya gereksinim gibi anahtar kelimeleri yoktu .

ES6, içe aktarma anahtar sözcüğünü ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ) önererek günü (2015 yılında piyasaya sürüldü) kaydeder , ancak bunu tarayıcı uygulamaz.

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

import myDefault from "my-module";

requiretekrar alacaksın .

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

Bunun nedeni requiremodülün Node.js'den yükleneceği anlamına gelir. Node.js, sistem düzeyinde dosya okumadan sarma işlevlerine modüle kadar her şeyi işleyecektir.

Çünkü JavaScript işlevlerinde modülleri temsil eden tek sarmalayıcılar vardır.

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

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