- - - - - CommonJS vs AMD vs RequireJS vs ES6 moduly - - - - -

Než vstoupím do modulární sekce, laskavě se podívejte na mé jedinečné srovnání, Garbage Collection vs Automatické počítání referencí.

Moduly JavaScriptu odkazují na malé jednotky nezávislého opakovaně použitelného kódu. Mají zřetelnou funkčnost, která umožňuje jejich přidání, odstranění bez narušení systému. Zdá se, že napodobuje, jak se třídy používají v Javě nebo Pythonu.

Moduly jsou samostatné. Aktualizace modulu je mnohem jednodušší, pokud je odpojen od jiných částí kódu. To povzbuzuje programátora, aby program prošel mnohem méně zastrašujícím způsobem. Řeší také dvojznačnost oboru názvů a umožňuje vytváření objektů ve veřejně přístupných oborech názvů, zatímco funkce v něm zůstávají soukromé. Moduly lze znovu použít a eliminovat duplicitní části kódu, čímž se šetří obrovské množství času.
Než moduly dorazily, začal se používat model Odhalující moduly.

var revealingModule = (function () {
    var privateVar = "Ben Thomas";
    funkce setNameFn (strName) {
        privateVar = strName;
    }
vrátit se {
        setName: setNameFn,
    };
}) ();
revealingModule.setName ("Paul Adams");

V tomto programu jsou veřejné funkce vystaveny, zatímco soukromé vlastnosti a metody jsou zapouzdřeny.

V jednom souboru lze definovat více modulů, ale downslides je, že asynchronní načtení modulů není možné, nelze programově importovat moduly.

CommonJS

Přišli se samostatným přístupem k interakci s modulovým systémem pomocí klíčových slov, která vyžadují a exportují. požadavek je funkce používaná k importu funkcí z jiného modulu. export je objekt, do kterého se exportuje jakákoli funkce do něj vložená.

// ------ payments.js ------
var customerStore = vyžadovat ('obchod / zákazník'); // importní modul
// ------ store / customer.js ------
export = function () {
    návrat customers.get ('store);
}

Ve výše uvedeném příkladu je customerStore importován do plateb.js. Funkce, která je nastavena na exportovaný objekt v zákaznickém modulu, se načte do souboru plateb.

Tyto moduly jsou návrhářem pro vývoj serverů a jedná se o synchronní soubory.ie.

Implementace NodeJS

Jsou silně ovlivněny specifikací CommonJS. Hlavní rozdíl vzniká v exportním objektu. Moduly NodeJS používají jako objekt k exportu moduly modu.exports, zatímco CommonJS používá pouze proměnnou exportu.

//payments.js
var customerStore = vyžadovat ('obchod / zákazník'); // importní modul
//store/customer.js
function customerStore () {
    návrat customers.get ('store);
}
modules.exports = customerStore;

Jsou také synchronní povahy. Parametr předaný požadavku kontroluje název modulu uvnitř adresáře node_modules. Kruhové závislosti jsou podporovány a vývojář snadno rozumí konceptům. Nevýhody jsou pouze jeden soubor na modul, pouze objekty jsou vytvořeny jako moduly a prohlížeče nemohou tyto moduly používat přímo bez převádění.

Ale nedávno prohlížeč, který se používá ke svazku kódu z modulů, používá tuto metodu v prohlížeči. Webpack také zpracovává komplexní potrubí zdrojových transformací, které zahrnují moduly CommonJS.

Definice asynchronního modulu (AMD)

AMD se narodil jako CommonJS nebyl vhodný pro prohlížeče brzy. Jak název napovídá, podporuje asynchronní načítání modulu.

define (['module1', ', module2'], function (module1, module2) {
  console.log (module1.setName ());
});

Funkce je volána, pouze když jsou požadované moduly dokončeny načítání. Funkce define bere první argument jako řadu modulů závislostí. Tyto moduly jsou na pozadí načítány neblokujícím způsobem a jakmile je načítání dokončeno, je vykonána funkce zpětného volání.

Je navržen pro použití v prohlížečích pro lepší časy spuštění a tyto moduly mohou být objekty, funkce, konstruktory, řetězce, JSON atd. Moduly lze rozdělit do několika souborů, které jsou kompatibilní pro potřeby a export a kruhové závislosti jsou podporovány jako studna.

RequireJS implementuje API AMD. Načte soubory prostého JavaScriptu i moduly pomocí značek prostého skriptu. Obsahuje optimalizační nástroj, který lze spustit při nasazení našeho kódu pro lepší výkon.

Toto je jediný kód vyžadovaný pro zahrnutí souborů do RequireJS. Atribut data-main definuje inicializaci a hledá skripty a závislosti.

Jak jste si pravděpodobně všimli, žádný z výše uvedených modulů nebyl nativní pro JavaScript. Pokusili jsme se napodobit modulový systém pomocí modulového vzoru, CommonJS a AMD. ECMAScript 6 naštěstí zavedl vestavěné moduly, které jej posouvají do další a závěrečné části.

Moduly ECMAScript 6 (nativní JavaScript)

ECMAScript 6 a.k.a., ES6 a.ka., ES2015 nabízí možnosti pro import a export modulů kompatibilních se synchronním i asynchronním provozním režimem.

// ------ lib.js ------
export const sqrt = Math.sqrt;
exportní funkční čtverec (x) {
    návrat x * x;
}
export funkce diag (x, y) {
    návrat sqrt (čtverec (x) + čtverec (y));
}
// ------ main.js ------
importovat {square, diag} z 'lib';
console.log (čtverec (11)); // 121
console.log (diag (4, 3)); // 5

Příkaz import se používá k převedení modulů do oboru názvů. Není dynamický, nelze jej použít kdekoli v souboru. To je v rozporu s požadavkem a definováním. Vývozní prohlášení tyto prvky zveřejňuje. Toto statické chování způsobuje, že statické analyzátory vytvářejí strom závislostí při svazování souboru bez spuštění kódu. Používají je moderní rámce JavaScriptu, jako jsou ReactJS, EmberJS atd. Nevýhodou je, že není plně implementován v prohlížečích a vyžaduje, aby se v nepodporovaných prohlížečích vykreslil překladač jako Babel.

Pokud se chystáte zahájit nový modul nebo projekt, ES2015 je tou správnou cestou a CommonJS / Node zůstává pro server volbou.

Děkuji za přečtení.
Pokud se vám tento článek líbil, neváhejte stisknout tlačítko tleskání a pomozte ostatním jej najít.
Následujte mě na adrese https://medium.com/@mohanesh