Wady normalnego obciążenia JS
Interfejs musi rozpocząć renderowanie po załadowaniu js
Jeśli istnieją zależności między js, muszą być załadowane w kolejności zgodnie z zależnościami. Jeśli zależności są złożone, pisanie i utrzymanie kodu jest trudniejsze.
Tak więc require.js powstał w głosie szerokich mas ludu.
Rola require.js
Implementuj asynchroniczne ładowanie js, aby uniknąć braku odpowiedzi na strony
Zarządzanie zależnościami między modułami, aby ułatwić pisanie i utrzymanie kodu
require.js załadunku
Najpierw wejdź na [oficjalną stronę] http://requirejs.org/ pobierz najnowszą wersję
Zdepremnuj pobrany lub skopiowany require.js do katalogu projektu
Załaduj require.js na wybranej stronie
Bezpośredni wciąg: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynchroniczne ładowanie: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Uwaga: asynchronicznie oznacza, że plik ten musi być ładowany asynchronicznie, aby strona nie stała się nieresponsywna. IE nie obsługuje asynchronii, więc załaduje atrybut odroczenia;
Gdy require.js zostanie załadowany, kolejnym krokiem jest załadowanie własnego kodu. Załóżmy, że nasz własny plik kodu jest main.js, również umieszczony w katalogu js. Więc po prostu napisz następująco: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funkcją atrybutu data-main jest określenie głównego modułu programu webowego. W powyższym przykładzie plik ten zostanie najpierw załadowany require.js main.js w katalogu js. Ponieważ require.js domyślnym sufiksem pliku jest js, możesz main.js skrótem do main.
Jak napisać główny moduł
main.js z poprzedniej sekcji nazywany jest modułem głównym. Chodzi o metodę wprowadzania do całego modułu.
Jak pisać main.js
Metody zapisane bezpośrednio na main.js bez polegania na innych modułach
main.function()
Główny moduł zależy od innych modułów, więc użyj funkcji wymagaj()
main.js
wymagaj(['moduleA', 'moduleB', 'moduleC'], funkcji (moduleA, moduleB, moduleC){
Trochę kodu tutaj
});
Funkcja wymagań() akceptuje dwa parametry:
Pierwszym parametrem jest tablica reprezentująca moduły, od których zależymy
Drugi parametr to funkcja callback, która zostanie wywołana po załadowaniu wszystkich modułów określonych na początku. Dodane moduły są przekazywane w formie parametrów, aby mogły być używane wewnątrz funkcji callback.
Ładowanie modułów
Przykład: Jeśli zależnym modułem głównego modułu (main.js) jest ['jquery', 'crypto-js', 'anything']
Domyślne ładowanie
Jeśli pliki tych trzech zależnych modułów są jquery.js, crypto-js.js, anything.js i main.js w tym samym katalogu, mogą być automatycznie ładowane zgodnie z poprzednią sekcją
Config load require.config()
require.config() jest zapisany w głowie głównego modułu (main.js).
Jak są pisane moduły AMD
require.js załadowany moduł, według specyfikacji AMD. Oznacza to, że moduł musi być napisany zgodnie z przepisami AMD.
Konkretnie, moduły muszą być zdefiniowane przez konkretną funkcję definie(). Jeśli moduł nie zależy od innych modułów, można go zdefiniować bezpośrednio w funkcji definie()
Załóżmy, że teraz istnieje plik math.js, który definiuje moduł matematyczny. Następnie math.js napisz:
Oto jak załadować:
Jeśli moduł zależy także od innych modułów, to pierwszym argumentem funkcji define() musi być tablica wskazująca zależności modułu.
Gdy funkcja wymaga() ładuje powyższy moduł, najpierw załaduje myLib.js plik.
Ładowanie modułów nie-AMD
Na rynku jest wiele modułów, które nie spełniają specyfikacji AMD, require.js można je załadować
Zanim te moduły będą mogły się załadować, muszą być ustawione tak, aby wymagały pliku require.config() do zdefiniowania niektórych ich cech
Na przykład noamd.js i noamddeps.js oba moduły to moduły nie-AMD, a jeśli chcesz je załadować, musisz zdefiniować ich cechy:
require.js akceptuje obiekt konfiguracyjny, który oprócz właściwości ścieżek posiada także właściwość podkładki specjalnie do konfigurowania modułów spoza AMD.
Konkretnie, każdy moduł definiuje:
- wartość eksportu (nazwa zmiennej wyjściowej): wskazuje nazwę modułu, gdy jest wywoływany zewnętrznie
- tablica DEPS: wskazuje zależności tego modułu
Na przykład wtyczkę jQuery można zdefiniować w następujący sposób:
require.js wtyczka
require.js oferuje także szereg wtyczek z dodatkowymi funkcjami
Wtyczka domready pozwala na uruchomienie funkcji callback po załadowaniu struktury DOM strony:
Wtyczki tekstowe i obrazowe, które pozwalają require.js ładować pliki tekstowe i obrazowe:
Podobne wtyczki to JSON i MDOWN do ładowania plików JSON i Markdown.
|
Opublikowano 11.10.2017 09:31:50
|
|
|
