- - - - - CommonJS vs AMD vs RequireJS vs ES6 mát - - - - -

Áður en ég stíga inn í máthlutann skaltu vinsamlega kíkja á minn einstaka samanburð, Sorpsöfnun vs Sjálfvirk viðmiðunartalning

JavaScript mát vísa til litla eininga af óháðum, endurnýtanlegum kóða. Þeir hafa sérstaka virkni, sem gerir þeim kleift að bæta við, fjarlægja án þess að trufla kerfið. Það virðist líkja eftir því hvernig flokkar eru notaðir í Java eða Python.

Einingar eru sjálfstætt. Það er miklu auðveldara að uppfæra eining ef hún er aftengd frá öðrum kóða. Þetta hvetur forritarann ​​til að fara í gegnum forritið mun minna hræðandi. Það leysir tvíræðni nafnsrýmisins og gerir það kleift að búa til hluti í aðgengilegum nafnrýmum meðan aðgerðirnar í því eru áfram persónulegar. Hægt er að endurnýta einingar og útrýma afritum af kóða og spara þannig mikinn tíma.
Áður en einingarnar komu, var The Revealing Module Pattern að venjast.

var avslealingModule = (fall () {
    var privateVar = "Ben Thomas";
    fall setNameFn (strName) {
        privateVar = strName;
    }
snúa aftur {
        setName: setNameFn,
    };
}) ();
revealingModule.setName ("Paul Adams");

Í þessu forriti eru opinberar aðgerðir afhjúpaðar meðan einkaeignirnar og aðferðirnar eru innilokaðar.

Hægt er að skilgreina margar einingar í einni skrá en niðurbrotin eru þau að ósamstilltur hleðsla á einingum er ekki möguleg, ekki er hægt að flytja einingar daglega inn.

CommonJS

Þeir komu upp með sérstaka nálgun til að hafa samskipti við mátakerfið með því að nota lykilorð sem krefjast og útflutnings. krefjast er aðgerð sem notuð er til að flytja inn aðgerðir úr annarri einingu. útflutningur er hlutur þar sem hvaða aðgerð sem sett er í hann verður flutt út.

// ------ greiðslur.js ------
var customerStore = þurfa ('verslun / viðskiptavinur'); // innflutningseining
// ------ verslun / customer.js ------
útflutningur = fall () {
    skila viðskiptavinum.get ('verslun);
}

Í ofangreindu dæmi er customerStore flutt inn á pays.js. Aðgerðin sem er stillt á útflutnings hlutinn í viðskiptavinareiningunni er hlaðin í greiðsluskrá.

Þessar einingar eru hönnuðar fyrir þróun netþjóna og þetta eru synchronous.ie., Skrárnar eru hlaðnar saman í röð í skránni.

NodeJS framkvæmd

Þeir eru undir miklum áhrifum af CommonJS forskriftinni. Helsti munurinn verður á útflutnings hlutnum. NodeJS einingar nota module.exports sem hlut til að flytja út á meðan CommonJS notar bara útflutningsbreytuna.

//payments.js
var customerStore = þurfa ('verslun / viðskiptavinur'); // innflutningseining
//store/customer.js
virka customerStore () {
    skila viðskiptavinum.get ('verslun);
}
modules.exports = customerStore;

Þau eru einnig samstillt að eðlisfari. Færibreytan sem er send til kröfunnar krefst þess að heiti einingarinnar sé inni í möppunni node_modules. Stuðlað er við hringháð og verktaki getur auðveldlega skilið hugtökin. Gallarnir eru aðeins ein skrá á hverja einingu, aðeins hlutir eru búnir til sem einingar og vafrarnir geta ekki notað þessar einingar beint án flæði.

En nýlega notar Browserify, notað til að búta kóða úr einingunum, þessa aðferð í vafranum. Webpack meðhöndlar einnig flóknar leiðslur umbreytingar uppspretta sem inniheldur CommonJS einingar.

Ósamstilltur einingaskilgreining (AMD)

AMD fæddist þar sem CommonJS hentaði ekki snemma á vafra. Eins og nafnið gefur til kynna styður það ósamstilltur hleðslu á einingum.

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

Aðgerðin er aðeins kölluð þegar umbeðnum einingum er lokið við fermingu. Skilgreina aðgerðin tekur fyrstu röksemdafærsluna sem fjölda ósjálfstæðiseininga Þessar einingar eru hlaðnar án hindrunar í bakgrunni og þegar hleðslunni er lokið er svarhringingaraðgerðin framkvæmd.

Það er hannað til að nota í vöfrum fyrir betri gangsetningu tíma og þessir einingar geta verið hlutir, aðgerðir, framkvæmdaaðilar, strengir, JSON osfrv. Hægt er að skipta einingum í margar skrár, sem eru samhæfðar fyrir kröfur og útflutningur og hringháð eru studdir sem jæja.

RequireJS útfærir AMD API. Það hleður venjulegar JavaScript skrár sem og einingar með því að nota venjuleg handritsmerki. Það felur í sér hagræðingarverkfæri sem hægt er að keyra á meðan dreifingarkóðanum er beitt til að ná betri árangri.

Þetta er eini kóðinn sem þarf til að innihalda skrár í RequireJS. Helstu eiginleiki gagna skilgreinir frumstillingu og það er útlit fyrir forskriftir og ósjálfstæði.

Eins og þú hefur sennilega tekið eftir var enginn eininganna hér að ofan innfæddur JavaScript. Við reyndum að líkja eftir einingakerfi með því að nota einingamynstrið, CommonJS og AMD. Sem betur fer hefur ECMAScript 6 kynnt innbyggðar einingar sem taka það til næsta og loka kafla.

ECMAScript 6 einingar (Native JavaScript)

ECMAScript 6 a.k.a., ES6 a.ka., ES2015 býður upp á möguleika til að flytja inn og flytja út einingar sem eru samhæfar bæði samstilltum og ósamstilltum aðgerðum.

// ------ lib.js ------
útflutningur const sqrt = stærðfræði.sqrt;
útflutningsaðgerð ferningur (x) {
    skila x * x;
}
útflutningsaðgerð (x, y) {
    skila sqrt (fermetra (x) + fermetra (y));
}
// ------ main.js ------
flytja {square, diag} frá 'lib';
hugga.log (ferningur (11)); // 121
hugga.log (dagbog (4, 3)); // 5

Innflutningsyfirlýsingin er notuð til að koma einingum inn í nafnrýmið. Það er ekki kraftmikið, ekki hægt að nota það hvar sem er í skránni. Þetta er í mótsögn við kröfu og skilgreina. Útflutningsyfirlýsingin gerir þættina opinbera. Þessi kyrrstæð hegðun gerir það að verkum að kyrrstættir greiningaraðilar byggja tré ósjálfstæðis meðan skráin er bundin án þess að keyra kóða. Þetta er notað af nútíma JavaScript ramma eins og ReactJS, EmberJS osfrv. Gallinn er sá að það er ekki að fullu útfært í vöfrunum og það þarf flutningstæki eins og Babel til að birta í vafra sem ekki eru studdir.

Ef þú ert að horfa á að hefja nýja einingu eða verkefni, þá er ES2015 rétta leiðin og CommonJS / Node er áfram val á netþjóninum.

Takk fyrir að lesa.
Ef þú hafðir gaman af þessari grein skaltu hika við að klappa á hnappinn til að hjálpa öðrum að finna hana.
Fylgdu mér á https://medium.com/@mohanesh