Teraz, gdy rozumiemy podstawy tworzenia wtyczek, możemy poszukać trochę głębiej. Ponieważ ostatecznie wtyczka jest funkcją, zapewnia nam zakres, który musimy zorganizować. Pamiętasz, jak uporządkowaliśmy nasz dom, kiedy uczyliśmy się o tworzeniu szablonów? Możemy użyć niektórych z tych samych koncepcji we wtyczce.
Ale najpierw myślę, że architektura wtyczki jQuery może skorzystać na pewnym standardowym kodzie. Być może znasz już Boilerplate HTML5, który zawiera kilka inteligentnych ustawień domyślnych. Standardowy schemat wtyczki jQuery to ten sam rodzaj rzeczy. Oszczędza trochę pisania i pozwala podążać ścieżką inteligentnego rozwoju.
Natknąłem się na projekt dosłownie nazwany jQuery Boilerplate, który, jak sądzę, jest dobry. Ale nie zagłębiłem się w to zbytnio. Zamiast tego podoba mi się Starter autorstwa Douga Neinera. Podajesz nazwę, niektóre wartości domyślne i kilka opcji, a to wygeneruje dla Ciebie tę standardową strukturę.
Postanawiamy zrobić suwak o nazwie lodgeSlider z prostym parametrem prędkości i kończymy na tym kodzie:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Wiele z nich powinno wyglądać znajomo. W celu zapewnienia bezpieczeństwa wtyczkę otacza IIFE. Istnieje funkcja utworzona z obiektu jQuery. Natychmiast wywoływana jest funkcja init. Istnieje metoda utworzona na podstawie obiektu jQuery, która zwraca obiekt jQuery. Istnieją zmienne utworzone w buforowaniu odniesień, których prawdopodobnie użyjemy ponownie. Głównie rzeczy, które widzieliśmy wcześniej.
Może dwie nowe rzeczy. Jednym z nich jest obiekt opcji. Możesz zobaczyć zakodowaną wartość 300. Ale zobacz też linię z $.extend(). To funkcja jQuery, która łączy dwa obiekty w jeden, przy czym jeden ma pierwszeństwo przed drugim. Kiedy nazywamy wtyczkę, być może w ten sposób:
$("#slider-1").lodgeslider();Nie przekazujemy żadnych opcji i ten pusty obiekt zostaje połączony z naszym zakodowanym obiektem, a wartości domyślne są dostępne wewnątrz wtyczki. Ale możemy to też nazwać tak:
$("#slider-1").lodgeslider(( speed: 500 ));Przekazujemy tam obiekt jako parametr. Ten obiekt jest łączony z naszym zakodowanym obiektem, ma pierwszeństwo, a przekazana wartość staje się wartością dostępną we wtyczce. Całkiem fajne.
Inną nową rzeczą jest to dziwne z .data(). Stworzyliśmy zmienną bazową, aby odwołać się do samej funkcji, która jest tworzona od nowa dla każdego elementu, do którego jest wywoływana wtyczka. Na przykład załóżmy, że wywołaliśmy wtyczkę $(".slider")- na stronie mogą znajdować się dwa elementy o nazwie klasy slider. Każda pętla jest uruchamiana i tworzone są dwa wystąpienia funkcji lodgeSlider. W każdym z nich dołączamy odniesienie do niego do samego elementu. W ten sposób możemy wywołać wewnętrzne metody wtyczki z dowolnego odwołania do tego elementu.
Jak może:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Po prostu daje nam dobry sposób na użycie metod wtyczek, jeśli zajdzie taka potrzeba.
Nie zaszliśmy zbyt daleko w tej przygodzie z budowaniem wtyczek:
Zobacz Pen Building a Slider from Scratch autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Szczerze mówiąc, świat prawdopodobnie nie potrzebuje kolejnej wtyczki suwaka. Ale możesz zobaczyć, jak skomplikowane mogą się stać. Oto kilka pomysłów:
- Mogą istnieć funkcje zwrotne (lub zdarzenia niestandardowe) przed i po zmianie slajdu, po ustawieniu suwaka, po jego zerwaniu itp.
- Szerokości mogą być oparte na procentach i obliczane ponownie, gdy zmieni się okno przeglądarki.
- Nawigacja może być budowana dynamicznie, zamiast być wymagana w znacznikach.
- Identyfikatory i #hash href można również tworzyć dynamicznie.
- Można dodać zdarzenia dotykowe, takie jak przeciągnięcia, aby suwak był bardziej przyjazny dla dotyku (małe kropki nie są przyjazne dla dotyku).
Im więcej tych rzeczy robisz, tym większy rozmiar wtyczki. Dlatego osiągnięcie równowagi między funkcjami, praktycznością, wydajnością i rozmiarem jest tak trudne i istnieje tak wiele różnych wtyczek, które ostatecznie robią to samo.