- - - - - CommonJS vs AMD vs RequireJS vs ES6 Modules - - - - -

Ennen kuin astuin modulaariseen osaan, tutustu ystävällisesti ainutlaatuiseen vertailuonii, jätteiden keräys vs. automaattinen viitelaskenta.

JavaScript-moduulit viittaavat pieniin yksiköihin riippumattomia, uudelleenkäytettäviä koodeja. Niillä on selkeä toiminnallisuus, joka mahdollistaa niiden lisäämisen, poistamisen häiritsemättä järjestelmää. Näyttää jäljittelevän kuinka luokkia käytetään Java- tai Python-ohjelmissa.

Moduulit ovat itsenäisiä. Moduulin päivittäminen on paljon helpompaa, jos se on irrotettu muista koodiosista. Tämä rohkaisee ohjelmoijaa läpikäymään ohjelman paljon vähemmän pelottelevana. Se ratkaisee nimitilan epäselvyydet ja sallii myös objektien luomisen julkisesti saatavissa olevissa nimitiloissa samalla, kun sen toiminnot pysyvät yksityisinä. Moduuleja voidaan käyttää uudelleen, poistamalla päällekkäiset kooditiedot, mikä säästää paljon aikaa.
Ennen moduulien saapumista Paljastava moduulimalli oli tottu.

var revealingModule = (toiminto () {
    var privateVar = "Ben Thomas";
    toiminto setNameFn (strName) {
        privateVar = strName;
    }
palauta {
        setName: setNameFn,
    };
}) ();
revealingModule.setName ("Paul Adams");

Tässä ohjelmassa julkiset toiminnot paljastetaan, kun taas yksityiset ominaisuudet ja menetelmät kapseloidaan.

Useita moduuleja voidaan määritellä yhdessä tiedostossa, mutta alamäet ovat, että moduulien asynkroninen lataaminen ei ole mahdollista, eivätkä voi tuoda moduuleja ohjelmallisesti.

CommonJS

He keksivat erillisen lähestymistavan olla vuorovaikutuksessa moduulijärjestelmän kanssa avainsanat vaativat ja vienti. vaatia on toiminto, jota käytetään toimintojen tuontiin toisesta moduulista. vienti on esine, josta kaikki siihen sijoitetut toiminnot viedään.

// ------ maksut.js ------
var customerStore = vaadi ('myymälä / asiakas'); // tuontimoduuli
// ------ myymälä / asiakas.js ------
vienti = toiminto () {
    palauta customers.get ('myymälä');
}

Yllä olevassa esimerkissä customerStore tuodaan Payment.js-tiedostoon. Toiminto, joka asetetaan vientiobjektille asiakasmoduulissa, ladataan maksutiedostoon.

Nämä moduulit on suunniteltu palvelimien kehittämistä varten ja nämä ovat synchronous.ie., Tiedostot ladataan yksi kerrallaan tiedoston sisällä järjestyksessä.

SolmuJS-toteutus

CommonJS-eritelmä vaikuttaa niihin voimakkaasti. Suurin ero syntyy vientikohteessa. NodeJS-moduulit käyttävät moduulia.exports objektina viedäkseen, kun taas CommonJS käyttää vain vientimuuttujaa.

//payments.js
var customerStore = vaadi ('myymälä / asiakas'); // tuontimoduuli
//store/customer.js
toiminto customerStore () {
    palauta customers.get ('myymälä');
}
moduulit.exports = asiakaskauppa;

Ne ovat myös luonteeltaan synkronisia. Parametri, joka on siirretty vaatimaan moduulin nimen tarkistamista node_modules-hakemistossa. Pyöreitä riippuvuuksia tuetaan ja kehittäjä voi helposti ymmärtää käsitteet. Miinukset ovat vain yksi tiedosto moduulia kohti, vain objektit tehdään moduuleina, eikä selaimet voi käyttää näitä moduuleja suoraan ilman transpilointia.

Mutta äskettäin Browserify, jota käytetään koodin niputtamiseen moduuleista, käyttää tätä menetelmää selaimessa. Webpack käsittelee myös lähteen muunnosten monimutkaisia ​​putkistoja, jotka sisältävät CommonJS-moduulit.

Asynkronisen moduulin määritelmä (AMD)

AMD syntyi, koska CommonJS ei sovi selaimille jo varhain. Kuten nimestä voi päätellä, se tukee asynkronista moduulin lataamista.

määritä (['moduuli1', ', moduuli2'], toiminto (moduuli1, moduuli2) {
  console.log (module1.setName ());
});

Toiminto kutsutaan vasta kun pyydettyjen moduulien lataus on valmis. Määritä funktio vie ensimmäisen argumentin ryhmänä riippuvuusmoduuleja. Nämä moduulit ladataan esteettömästi taustalla ja kun lataus on suoritettu loppuun, takaisinsoitto suoritetaan.

Se on suunniteltu käytettäväksi selaimissa paremman käynnistysajan saavuttamiseksi, ja nämä moduulit voivat olla esineitä, toimintoja, rakentajia, merkkijonoja, JSON: ta jne. Moduulit voidaan jakaa useisiin tiedostoihin, jotka ovat yhteensopivia vaatimusten kanssa ja vientiä sekä pyöreitä riippuvuuksia tuetaan hyvin.

RequireJS toteuttaa AMD-sovellusliittymän. Se lataa tavalliset JavaScript-tiedostot ja moduulit tavallisilla komentotunnisteilla. Se sisältää optimointityökalun, jota voidaan käyttää samalla kun asennamme koodimme parempaan suorituskykyyn.

Tämä on ainoa koodi, jota tarvitaan tiedostojen sisällyttämiseen RequireJS-tiedostoon. Tieto-pääominaisuus määrittelee alustuksen ja etsii skriptejä ja riippuvuuksia.

Kuten todennäköisesti huomasit, mikään yllä olevista moduuleista ei ollut JavaScriptin kotoisin. Yritimme jäljitellä moduulijärjestelmää moduulikuvion, CommonJS: n ja AMD: n avulla. Onneksi ECMAScript 6 on ottanut käyttöön sisäänrakennetut moduulit, jotka vievät sen seuraavaan ja viimeiseen osaan.

ECMAScript 6 -moduulit (alkuperäinen JavaScript)

ECMAScript 6 a.k.a., ES6 a.ka., ES2015 tarjoaa mahdollisuuksia tuoda ja viedä moduuleja, jotka ovat yhteensopivia sekä synkronisen että asynkronisen toimintatavan kanssa.

// ------ lib.js ------
vienti const sqrt = Math.sqrt;
vientitoiminto neliö (x) {
    paluu x * x;
}
vientitoiminto diag (x, y) {
    paluu sqrt (neliö (x) + neliö (y));
}
// ------ main.js ------
Tuo {neliö, diag} tiedostosta 'lib';
console.log (neliö (11)); // 121
konsoli.logi (diag (4, 3)); // 5

Tuontilausetta käytetään moduulien tuomiseen nimitilaan. Se ei ole dynaaminen, sitä ei voida käyttää missä tahansa tiedoston osassa. Tämä on toisin kuin vaatia ja määritellä. Vientilausunto julkistaa elementit. Tämä staattinen käyttäytyminen saa staattiset analysaattorit rakentamaan riippuvuuksien puun niputtamalla tiedostoa ajamatta koodia. Tätä käytetään nykyaikaisissa JavaScript-kehyksissä, kuten ReactJS, EmberJS, jne. Haittapuolena on, että sitä ei ole toteutettu kokonaan selaimissa ja se vaatii Babelin kaltaisen siirtäjän, jotta se toimittaisi tuetuissa selaimissa.

Jos aiot aloittaa uuden moduulin tai projektin, ES2015 on oikea tapa edetä ja CommonJS / Node on edelleen palvelimen valinta.

Kiitos käsittelystä.
Jos nautit tästä artikkelista, paina vapaasti napituspainiketta auttaaksesi muita löytämään sen.
Seuraa minua osoitteessa https://medium.com/@mohanesh