Normaalin JS-kuormituksen haitat
Rajapinnan täytyy alkaa renderöidä, kun js on ladattu
Jos js:n välillä on riippuvuuksia, ne täytyy ladata riippuvuuksien mukaan järjestyksessä. Jos riippuvuudet ovat monimutkaisia, koodin kirjoittaminen ja ylläpito on hankalampaa
Niinpä require.js syntyi laajojen kansan äänellä.
Rooli require.js
Toteuta js:n asynkroninen lataus sivun vastaamattomuuden välttämiseksi
Hallinnoi moduulien välisiä riippuvuuksia koodin kirjoittamisen ja ylläpidon helpottamiseksi
require.js lataus
Ensiksi mene [viralliselle verkkosivustolle] http://requirejs.org/ lataa uusin versio
Talleta ladattu tai kopioitu require.js projektihakemistoon
Lataa require.js halutulle sivulle
Suora lataus: Kirjoita <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynkroninen lataus: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Huomautus: asynkronisointi tarkoittaa, että tiedosto täytyy ladata asynkronisesti, jotta verkkosivu ei tule vastaamattomaksi. IE ei tue asynkronia, joten lataa delay-attribuutti;
Kun require.js on ladattu, seuraava vaihe on ladata oma koodimme. Oletetaan, että oma kooditiedostomme on main.js, myös js-hakemistossa. Kirjoita siis vain seuraava: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Data-pääattribuutin tehtävänä on määrittää web-ohjelman päämoduuli. Yllä olevassa esimerkissä tämä tiedosto ladataan ensin require.js main.js js-hakemistossa. Koska require.js oletustiedoston päätte on js, voit lyhentää main.js mainiksi.
Kuinka kirjoittaa päämoduuli
Edellisen osion main.js kutsutaan päämoduuliksi. Eli koko moduulin sisääntulotapa.
Kuinka kirjoittaa main.js
Metodit, jotka on kirjoitettu suoraan main.js ilman muita moduuleja
main.function()
Päämoduuli riippuu muista moduuleista, joten käytä require()-funktiota
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Vähän koodia tässä
});
Require()-funktio hyväksyy kaksi parametria:
Ensimmäinen parametri on taulukko, joka edustaa moduuleja, joihin on riippuvainen
Toinen parametri on callback-funktio, joka kutsutaan sen jälkeen, kun kaikki edessä mainitut moduulit on ladattu. Lisätyt moduulit välitetään parametreina, jotta niitä voidaan käyttää callback-funktion sisällä.
Moduulien kuormitus
Esimerkki: Jos päämoduulin (main.js) riippuva moduuli on ['jquery', 'crypto-js', 'anything']
Lataus oletuksena
Jos näiden kolmen riippuvaisen moduulin tiedostot ovat jquery.js, crypto-js.js, anything.js ja main.js samassa hakemistossa, ne voidaan automaattisesti ladata edellisen osion mukaisesti
Config load require.config()
require.config() kirjoitetaan päämoduulin (main.js) päälle.
Miten AMD-moduulit kirjoitetaan
require.js ladattu moduuli, käyttäen AMD:n määrittelyä. Eli moduulin on kirjoitettava AMD:n sääntöjen mukaisesti.
Erityisesti moduulit täytyy määritellä tietyllä define()-funktiolla. Jos moduuli ei riipu muista moduuleista, se voidaan määritellä suoraan define()-funktiolla
Oletetaan, että nyt on olemassa math.js-tiedosto, joka määrittelee matematiikan moduulin. Sitten math.js kirjoittaa:
Näin lataat:
Jos moduuli riippuu myös muista moduuleista, define()-funktion ensimmäisen argumentin täytyy olla taulukko, joka ilmaisee moduulin riippuvuudet.
Kun require()-funktio lataa yllä mainitun moduulin, se lataa ensin myLib.js tiedoston.
Lataa ei-AMD-moduuleja
Markkinoilla on monia moduuleja, jotka eivät täytä AMD:n vaatimuksia, require.js voidaan ladata
Ennen kuin nämä moduulit voivat ladata, ne täytyy asettaa vaatimaan require.config() määrittelemään joitakin niiden ominaisuuksia
Esimerkiksi noamd.js ja noamddeps.js molemmat moduulit ovat ei-AMD-moduuleja, ja jos haluat ladata ne, sinun täytyy määritellä niiden ominaisuudet:
require.js hyväksyy konfiguraatioobjektin, jolla polut-ominaisuuden lisäksi on myös shim-ominaisuus erityisesti ei-AMD-moduulien konfigurointiin.
Tarkemmin sanottuna jokainen moduuli määrittelee:
- exports-arvo (output variable name): ilmaisee moduulin nimen, kun sitä kutsutaan ulkoisesti
- deps-taulukko: ilmaisee tämän moduulin riippuvuudet
Esimerkiksi jQuery-lisäosa voidaan määritellä näin:
require.js lisäosa
require.js tarjoaa myös valikoiman lisäosia, jotka toteuttavat joitakin erityisominaisuuksia
domready-lisäosa sallii callback-toiminnon suorittaa sivun DOM-rakenteen latautumisen jälkeen:
teksti- ja kuvalisäosat, jotka mahdollistavat require.js teksti- ja kuvatiedostojen lataamisen:
Samankaltaisia lisäosia ovat JSON ja MDOWN JSON- ja Markdown-tiedostojen lataamiseen.
|
Julkaistu 11.10.2017 9.31.50
|
|
|
