RequireJS on tehokas tapa parantaa JavaScript-koodin nopeutta ja laatua, mikä tekee siitä paljon helpommin luettavia ja helpommin ylläpitäviä.

Tässä artikkelissa esitän teille RequireJS: n ja miten voit aloittaa sen käytön. Menemme läpi vaatimalla tiedostoja ja määrittelemällä moduulin ja jopa kosketelemaan optimointia.

Yksinkertaisesti sanottuna require.js on skriptin lataaja, jonka avulla voit siirtää JavaScript-koodisi tiedostoiksi ja moduuleiksi siten hallinnoidaksesi kunkin mallin riippuvuuksia.

Vaatii tiedostoja

Jotta voisimme aloittaa yhdessä RequireJS: n ja sen asynkronisen moduulin määritelmän (AMD) kanssa, meidän on ensin ladata sitten linkki require.js-tiedostoon asiakirjan otsikossa niin kuin:

Saatat ihmetellä, mikä kyseinen data-pääominaisuus on, ja tarvitsemalla RequireJS: tä, tarkoittaa, että kun soitat vaativat asiakirjan päästä, joka yhdistää myös JavaScript-sovelluksen päätiedostoon, data-pääominaisuus on linkki tärkein JavaScript-tiedosto sovelluksestasi, tässä tapauksessa main.js. (Huomaa, että RequireJS lisää automaattisesti .js tiedostonimen lopussa.)

Tässä main.js-tiedostossa asetat RequireJS: n kokoonpanon, ladataan moduuleihin ja määritellään peruspolku käytettäväksi, kun vaaditaan tiedostoja.

Vaatimus

RequireJS käyttää yksinkertaista vaatia funktiota ladata komentosarjoissa, tässä esimerkissä RequireJS lataa jQuery:

require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});

Yksi RequireJS: n parhaista asioista on se, että se on erittäin luettavissa, jos katsot kyseistä koodilohkoa, näet, että ensin vaaditaan nappikuultava tiedosto jquery.js: n nimellä ja se ohittaa nimettömän toiminnon jQueryn $ parametrilla , kun se on tehty voit käyttää kaikkia JQuery-koodia.

Nyt sinulla ei yleensä ole jquery.js-nimistä jQuery-kirjastoa, kuten useimpien laajennusten ja kehysten tavoin, yleensä ladata sitten GitHubista tai Google CDN: stä, ja siksi meidän on määritettävä polut niin että he osoittavat oikeaan paikkaan:

require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});

Tämä tarkoittaa, että voit vaatia jQueryä Googlen kautta ja käyttää sitä ongelmitta. (Huomaa, että olen käyttänyt nimeä "jquery" tässä esimerkissä, mutta voit kutsua sitä mitä haluat.)

Moduulin määrittäminen

AMD-mallin käyttäminen tarkoittaa, että koodimme voidaan jäsentää moduuleissa; nämä mallit ovat vain bittejä koodeja, jotka tekevät jotain sovelluksessamme. Voit sijoittaa kaksi riviä koodia moduulissa tai 100, riippuen vain siitä, mitä haluat moduulin tekemään.

Moduulin määrittelemiseksi käytämme tätä kaltaista koodia:

define(function () {function add (x,y) {return x + y;}});

Tässä esimerkissä olen luonut yksinkertaisen lisätoiminnon, jossa ei ole riippuvuuksia, mutta jos tämä funktio tarvitsee jQueryä toimimaan oikein, määrittelyfunktio rakennettaisiin seuraavasti:

define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});

Tämän syntaksin avulla kerromme JavaScriptiä, että pääsemme ensin jQueryn käyttöön ja suoritamme koodin niin, että jQuery on saatavilla tarvittaessa. Voimme käyttää tätä myös JavaScript-tiedostojen kirjoittamissa moduuleissa, mutta se ei ole rajoitettu kehyksiä tai lisäosia.

optimointi

Kuten näet, RequireJS on erinomainen työkalu tiedostojen järjestämiseen moduuleihin ja vain lataamalla mitä tarvitset. Haittapuoli on se, että liian monet JavaScript-tiedostot aiheuttavat huonoja latausaikoja, minkä vuoksi RequireJS sisältää Optimizer kerätä tiedot kaikista tiedostoista ja sijoittaa ne yhteen minimoitu tiedostoon.

Kaiken kaikkiaan RequireJS on yksi parhaista tavoista järjestää ja optimoida JavaScript-sovelluksesi nykyaikaiselle web-sivustolle.

Oletko käyttänyt RequireJS: ää projektissa? Onko se parantanut työnkulkuasi? Kerro meille kommentit.

Esitetty kuva / pikkukuva, laatikko kuva kautta Shutterstock.