Nevýhody bežného zaťaženia JS
Rozhranie musí začať renderovať po načítaní js
Ak existujú závislosti medzi js, musia byť načítané v poradí podľa závislostí. Ak sú závislosti zložité, je náročnejšie napísať a udržiavať kód
Tak require.js vzniklo v hlase širokých mas ľudu.
Úloha require.js
Implementujte asynchrónne načítavanie js, aby ste predišli neodpovedi na stránku
Spravovať závislosti medzi modulmi na uľahčenie písania a údržby kódu
require.js nakladanie
Najprv choďte na [oficiálnu webovú stránku] http://requirejs.org/ stiahnite si najnovšiu verziu
Uložte stiahnutý alebo skopírovaný require.js do adresára projektu
Načítajte require.js na požadovanú stránku
Direct load: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynchrónne načítavanie: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Poznámka: async znamená, že tento súbor musí byť načítaný asynchrónne, aby sa zabránilo tomu, že webová stránka prestane reagovať. IE nepodporuje asynchru, takže načítajte atribút odloženia;
Keď je require.js načítaný, ďalším krokom je načítať náš vlastný kód. Predpokladajme, že náš vlastný kódový súbor je main.js, tiež umiestnený pod adresárom js. Takže stačí napísať nasledovné: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funkciou atribútu data-main je špecifikovať hlavný modul webového programu. V uvedenom príklade sa tento súbor najskôr načíta require.js main.js v adresári js. Keďže require.js predvolená prípona súboru je js, môžeš main.js skratkou na main.
Ako napísať hlavný modul
main.js z predchádzajúcej sekcie sa nazýva hlavný modul. To znamená spôsob vstupu do celého modulu.
Ako písať main.js
Metódy písané priamo do main.js bez spoliehania sa na iné moduly
main.function()
Hlavný modul závisí od iných modulov, preto použite funkciu require()
main.js
vyžadovať(['moduleA', 'moduleB', 'moduleC'], funkciu (moduleA, moduleB, moduleC){
Nejaký kód tu
});
Funkcia require() prijíma dva parametre:
Prvým parametrom je pole, ktoré reprezentuje moduly, na ktorých záleží
Druhým parametrom je callback funkcia, ktorá sa volá po načítaní všetkých modulov uvedených na začiatku. Pridané moduly sa odovzdávajú vo forme parametrov, aby ich bolo možné použiť vo funkcii callback.
Načítanie modulov
Príklad: Ak závislý modul hlavného modulu (main.js) je ['jquery', 'crypto-js', 'čokoľvek']
Predvolené načítavanie
Ak sú súbory týchto troch závislých modulov jquery.js, crypto-js.js, anything.js a main.js v rovnakom adresári, môžu byť automaticky načítané podľa predchádzajúcej sekcie
Config load require.config()
require.config() je zapísaný v hlave hlavného modulu (main.js).
Ako sa píšu moduly AMD
require.js načítaný modul podľa špecifikácie AMD. To znamená, že modul musí byť napísaný v súlade s predpismi AMD.
Konkrétne, moduly musia byť definované konkrétnou funkciou define(). Ak modul nezávisí od iných modulov, môže byť definovaný priamo vo funkcii define()
Predpokladajme, že teraz existuje math.js súbor, ktorý definuje matematický modul. Potom math.js napíšte:
Tu je návod, ako načítať:
Ak modul závisí aj od iných modulov, potom prvým argumentom funkcie define() musí byť pole, ktoré indikuje závislosti modulu.
Keď funkcia requir() načíta vyššie uvedený modul, najskôr načíta myLib.js súbor.
Načítajte moduly mimo AMD
Na trhu je mnoho modulov, ktoré nespĺňajú špecifikáciu AMD, require.js sa dajú načítať
Predtým, než sa tieto moduly môžu načítať, musia byť nastavené na require.config() na definovanie niektorých ich charakteristík
Napríklad noamd.js a noamddeps.js oba moduly nie sú AMD, a ak ich chcete načítať, musíte definovať ich charakteristiky:
require.js prijíma konfiguračný objekt, ktorý okrem vlastnosti paths má aj vlastnosť shim špeciálne na konfiguráciu modulov mimo AMD.
Konkrétne každý modul definuje:
- exports value (názov výstupnej premennej): označuje názov modulu, keď je volaný externe
- DEPS pole: označuje závislosti tohto modulu
Napríklad plugin jQuery môže byť definovaný takto:
require.js plugin
require.js tiež ponúka množstvo pluginov, ktoré implementujú niektoré špeciálne funkcie
Plugin domready umožňuje, aby funkcia callback bežala po načítaní štruktúry stránky DOM:
Textové a obrázkové pluginy, ktoré umožňujú require.js načítať textové a obrázkové súbory:
Podobné pluginy zahŕňajú JSON a MDOWN na načítavanie JSON a Markdown súborov.
|
Zverejnené 11. 10. 2017 9:31:50
|
|
|
