Wymagaj JS to skuteczny sposób na poprawę szybkości i jakości kodu JavaScript, dzięki czemu jest on bardziej czytelny i łatwiejszy w utrzymaniu.
W tym artykule przedstawię ci RequireJS i jak zacząć go używać. Przejdziemy przez wymagające pliki i zdefiniujemy moduł, a nawet dotkniemy optymalizacji.
W prostych słowach require.js to program do ładowania skryptów, który umożliwia wstawianie kodu JavaScript do plików i modułów, a tym samym zarządzanie zależnościami poszczególnych modeli.
Aby rozpocząć pracę z RequireJS i jego asynchroniczną definicją modułu (AMD), musimy najpierw pobieranie to, a następnie link do pliku require.js w nagłówku naszego dokumentu, jak na przykład:
Być może zastanawiasz się, co to jest główny atrybut danych , a użycie RequireJS oznacza, że gdy wywołujesz żądanie w nagłówku dokumentu, łączysz się również z głównym plikiem aplikacji JavaScript, atrybutem danych jest link do główny plik JavaScript dla twojej aplikacji, w tym przypadku main.js. (Zauważ, że RequireJS automatycznie dodaje .js na końcu nazwy pliku.)
W tym pliku main.js umieścisz konfigurację RequireJS, wczytasz moduły i zdefiniujesz ścieżkę podstawową do użycia, gdy będziesz wymagać plików.
RequireJS używa prostej funkcji wymagającej do załadowania skryptów, w tym przykładzie RequireJS ładuje jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Jedną z najlepszych rzeczy w RequireJS jest to, że jest bardzo czytelna, jeśli spojrzysz na ten blok kodu, zobaczysz, że pierwsze wymaga pobrania pliku o nazwie jquery.js i przekazuje anonimową funkcję z parametrem $ jQuery jako parametrem , kiedy to zrobisz, możesz używać całego kodu JQuery, który Ci odpowiada.
Teraz normalnie biblioteka jQuery nie będzie przechowywana w pliku o nazwie jquery.js, tak jak w przypadku większości wtyczek i frameworków, zazwyczaj ładujemy ją z GitHub lub Google CDN, a do tego musimy tak skonfigurować ścieżki, aby że wskazują na właściwe miejsce:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Oznacza to, że możesz wymagać jQuery za pośrednictwem Google i używać go bez problemu. (Zauważ, że użyłem w tym przykładzie nazwy "jquery", ale możesz nazwać to, co chcesz.)
Używanie wzorca AMD oznacza, że nasz kod może być zbudowany z modułów; te modele to tylko fragmenty kodu, które robią coś w naszej aplikacji. Możesz umieścić dwie linie kodu w module lub 100, to zależy od tego, co chcesz zrobić.
Aby zdefiniować moduł, używamy następującego kodu:
define(function () {function add (x,y) {return x + y;}});W tym przykładzie utworzyłem prostą funkcję dodawania bez żadnych zależności, ale jeśli ta funkcja wymaga prawidłowego działania jQuery, funkcja define będzie miała następującą strukturę:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Używając tej składni, mówimy JavaScript, aby najpierw uzyskać jQuery, a następnie uruchom ten kod, aby jQuery był dostępny w razie potrzeby. Możemy również użyć tego w modułach, które napisaliśmy w plikach JavaScript, nie ogranicza się to do frameworków i wtyczek.
Jak widać, RequireJS to świetne narzędzie do porządkowania plików w moduły i ładowania tylko tego, czego potrzebujesz. Minusem jest to, że zbyt wiele plików JavaScript powoduje skrócenie czasu ładowania, dlatego też RequireJS zawiera optymalizator aby zebrać dane ze wszystkich plików i umieścić je w jednym zminimalizowanym pliku.
Podsumowując, RequireJS to jeden z najlepszych sposobów na uporządkowanie i optymalizację JavaScriptu w nowoczesnych sieciach.
Czy używałeś RequireJS w projekcie? Czy usprawnił twój przepływ pracy? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz pudełka przez Shutterstock.