Nevýhody běžného zatížení JS
Rozhraní musí začít vykreslovat po načtení js
Pokud existují závislosti mezi js, musí být načteny v pořadí podle závislostí. Pokud jsou závislosti složité, je obtížnější kód psát a udržovat
Tak vznikl require.js hlasem širokých mas lidu.
Role require.js
Implementujte asynchronní načítání js, aby se zabránilo nereagující stránce
Správa závislostí mezi moduly pro usnadnění psaní kódu a údržby
require.js nakládání
Nejprve jděte na [oficiální web] http://requirejs.org/ stáhněte si nejnovější verzi
Uložte stažené nebo zkopírované require.js do adresáře projektu
Načíst require.js na požadovanou stránku
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>
Poznámka: asynchronní znamená, že tento soubor musí být načítán asynchronně, aby webová stránka nereagovala. IE nepodporuje asynchru, proto načte atribut odkladu;
Jakmile je require.js načtená, dalším krokem je načíst vlastní kód. Předpokládejme, že náš vlastní kódový soubor je main.js, který je také umístěn pod adresářem js. Takže stačí napsat následující: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funkcí atributu data-main je specifikovat hlavní modul webového programu. V uvedeném příkladu bude tento soubor nejprve načten require.js main.js v js adresáři. Protože require.js výchozí přípona souboru je js, můžete main.js zkratkou na main.
Jak napsat hlavní modul
main.js z předchozí části se nazývá hlavní modul. Tím myslím způsob vstupu do celého modulu.
Jak psát main.js
Metody psané přímo do main.js bez závislosti na jiných modulech
main.function()
Hlavní modul závisí na jiných modulech, proto použijte funkci require()
main.js
požadovat(['moduleA', 'moduleB', 'moduleC'], funkce (moduleA, moduleB, moduleC){
Trochu kódu tady
});
Funkce požadavek() přijímá dva parametry:
Prvním parametrem je pole, které reprezentuje moduly, na kterých je závislé
Druhým parametrem je funkce zpětného volání, která bude vyvolána poté, co jsou načteny všechny moduly uvedené na začátku. Přidané moduly jsou předávány ve formě parametrů, aby mohly být použity uvnitř funkce callback.
Načítání modulů
Příklad: Pokud je závislý modul hlavního modulu (main.js) ['jquery', 'crypto-js', 'cokoli']
Načítání ve výchozím nastavení
Pokud jsou soubory těchto tří závislých modulů jquery.js, crypto-js.js, anything.js a main.js ve stejném adresáři, mohou být automaticky načteny podle předchozí sekce
Config load require.config()
require.config() je zapsán v hlavě hlavního modulu (main.js).
Jak jsou napsány moduly AMD
require.js načtený modul podle specifikace AMD. To znamená, že modul musí být napsán v souladu s předpisy AMD.
Konkrétně musí být moduly definovány specifickou funkcí define(). Pokud modul nezávisí na jiných modulech, lze jej definovat přímo ve funkci define()
Předpokládejme, že nyní existuje math.js soubor, který definuje matematický modul. Pak math.js napsat:
Tady je návod, jak načíst:
Pokud modul závisí i na jiných modulech, pak prvním argumentem funkce define() musí být pole, které indikuje závislosti modulu.
Když funkce požadavek() načte výše uvedený modul, nejprve načte myLib.js soubor.
Načítání modulů mimo AMD
Na trhu je mnoho modulů, které nesplňují specifikaci AMD, require.js lze je načítat
Než se tyto moduly načtou, musí být nastaveny tak, aby vyžadovaly .config() pro definování některých jejich charakteristik
Například noamd.js a noamddeps.js oba moduly nejsou od AMD, a pokud je chcete načítat, musíte definovat jejich charakteristiky:
require.js přijímá konfigurační objekt, který kromě vlastnosti paths má také vlastnost shim speciálně pro konfiguraci modulů mimo AMD.
Konkrétně každý modul definuje:
- exports value (název výstupní proměnné): označuje název modulu při jeho externím volání
- DEPS pole: označuje závislosti tohoto modulu
Například plugin jQuery lze definovat takto:
require.js plugin
require.js také nabízí řadu pluginů, které implementují některé speciální funkce
Plugin domready umožňuje spuštění callback funkce po načtení struktury DOM stránky:
Textové a obrazové pluginy, které umožňují require.js načítat textové a obrazové soubory:
Podobné pluginy zahrnují JSON a MDOWN pro načítání souborů JSON a Markdown.
|
Zveřejněno 11.10.2017 9:31:50
|
|
|
