A normál JS terhelés hátrányai
Az interfésznek a js betöltése után kell elkezdenie a renderelést
Ha a js között vannak függőségek, akkor a függőségek szerint kell betölteni őket. Ha a függőségek összetettek, a kód megírása és karbantartása nehezebb
Így require.js a nép széles tömegeinek hangjában született.
A require.js szerepe
Valósítsd meg aszinkron js betöltést az oldal választalanságának elkerülése érdekében
A modulok közötti függőségek kezelése a kódírás és karbantartás megkönnyítése érdekében
require.js betöltés
Először menj el a [hivatalos weboldalra] http://requirejs.org/ töltsd le a legfrissebb verziót
Tegyék be a letöltött vagy másolt require.js a projekt könyvtárába
Töltsd be require.js a kívánt oldalra
Direct load: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynchronous loading: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Megjegyzés: az aszinkron azt jelenti, hogy ezt a fájlt aszinkronban kell betölteni, hogy elkerüljük, hogy a weboldal nem reagáljon. Az IE nem támogatja aszinkron, ezért töltsd be a delay attribútumot;
Miután a require.js betöltött volt, a következő lépés a saját kódunk betöltése. Tegyük fel, hogy a saját kódfájlunk main.js, szintén a js könyvtár alatt helyezkedik el. Tehát egyszerűen írd meg a következőt: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Az adat-fő attribútum funkciója, hogy meghatározza a webprogram fő modulját. A fenti példában ez a fájl töltődik be először require.js a main.js a js könyvtárban. Mivel require.js alapértelmezett fájl utótagja js, rövidítheted main.js a main-ra.
Hogyan írjuk meg a fő modult
Az előző szakasz main.js fő modulnak nevezik. Ez az egész modul belépési módszerét jelenti.
Hogyan írjunk main.js
A metódok közvetlenül a main.js-hez írtak anélkül, hogy más modulokra hagyatkoznának
main.function()
A fő modul más moduloktól függ, ezért használd a require() függvényt
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Itt egy kis kód
});
A require() függvény két paramétert fogad el:
Az első paraméter egy tömb, amely a modulokat jelöli, amelyekre támaszkodni kell
A második paraméter egy visszahívási függvény, amelyet akkor hívnak meg, amikor az elöl megadott összes modul betöltésre kerül. A hozzáadott modulokat paraméterek formájában adják át, így a visszahívási függvényen belül használhatók.
Modulok betöltése
Példa: Ha a fő modul (main.js) függő modulja ['jquery', 'crypto-js', 'bármi']
Alapértelmezett betöltés
Ha e három függő modul fájljai ugyanabban a könyvtárban találhatók jquery.js, crypto-js.js, anything.js és main.js, akkor automatikusan betölthetők az előző szakasz szerint
Config load require.config()
a require.config() a fő modul fejében (main.js) van írva.
Hogyan írják az AMD modulokat
require.js betöltött modul, AMD specifikációval rendelkezik. Vagyis a modult az AMD előírásainak megfelelően kell megírni.
Konkrétan a modulokat egy specifikus define() függvény határozza meg. Ha egy modul nem függ más moduloktól, akkor közvetlenül definiálható a define() függvényben
Tegyük fel, hogy most van egy math.js fájl, amely egy matematikai modult definiál. Ezután math.js írni:
Íme, hogyan töltheted be:
Ha a modul más moduloktól is függ, akkor a define() függvény első argumentumának egy olyan tömbnek kell lennie, amely jelzi a modul függőségeit.
Amikor a require() függvény betölti a fenti modult, először myLib.js fájlt tölti be.
A nem AMD modulok betöltése
Sok modul van a piacon, amelyek nem felelnek meg az AMD specifikációinak, require.js be lehet tölteni
Mielőtt ezek a modulok betöltődhetnének, be kell állítani őket a require.config() módra, hogy meghatározzák néhány jellemzőjüket
Például noamd.js és noamddeps.js mindkét modul nem AMD modul, és ha be akarod tölteni őket, meg kell határoznod a jellemzőiket:
require.js elfogad egy konfigurációs objektumot, amely az útvonalak tulajdonságán túl kifejezetten nem AMD modulok konfigurálására szolgáló shim tulajdonsággal is rendelkezik.
Konkrétan minden modul a következőket definiálja:
- exportálási érték (kimeneti változó neve): jelzi a modul nevét, amikor külsőleg hívják
- deps tömb: jelzi ennek a modulnak a függőségeit
Például a jQuery plugin így definiálható:
require.js plugin
require.js különféle plugineket is kínál, amelyek bizonyos speciális funkciókat valósítanak meg
A domready plugin lehetővé teszi, hogy a callback függvény futhasson a page DOM struktúra betöltése után:
szöveg- és képbővítmények, amelyek lehetővé teszik require.js szöveg- és képfájlok betöltését:
Hasonló pluginok közé tartozik a JSON és a MDOWN a JSON és Markdown fájlok betöltésére.
|
Közzétéve 2017. 10. 11. 9:31:50
|
|
|
