jquery-pluginsPierwsze kroki z wtyczkami jquery


Uwagi

Wtyczka jQuery to po prostu nowa metoda, której używamy do rozszerzenia prototypowego obiektu jQuery. Rozszerzając obiekt prototypowy, umożliwiasz wszystkim obiektom jQuery odziedziczenie dodanych metod. Jak ustalono, za każdym razem, gdy wywołujesz jQuery() , tworzysz nowy obiekt jQuery, z odziedziczonymi wszystkimi metodami jQuery.

Ideą wtyczki jest zrobienie czegoś z kolekcją elementów. Możesz rozważyć każdą metodę dostarczoną z rdzeniem jQuery jako wtyczkę, taką jak .fadeOut() lub .addClass() .

Możesz tworzyć własne wtyczki i korzystać z nich prywatnie w kodzie lub udostępniać je publicznie. Istnieją tysiące wtyczek jQuery dostępnych online. Bariera tworzenia własnej wtyczki jest tak niska, że możesz łatwo ją stworzyć!

Podstawowa wtyczka zmieniająca kolor tekstu na zielony.

// plugin initialization
$.fn.greenify = function() {
    // within the function you can use any of the jQuery methods
    // and `this` context refers to jQuery object
    this.css( "color", "green" );
};
 
// apply plugin
$( "a" ).greenify(); 
 

Łańcuch

To działa, ale jest kilka rzeczy, które musimy zrobić, aby nasza wtyczka przetrwała w prawdziwym świecie. Jedną z funkcji jQuery jest łączenie łańcuchowe, gdy łączysz pięć lub sześć akcji na jednym selektorze. Osiąga się to poprzez to, że wszystkie metody obiektu jQuery zwracają oryginalny obiekt jQuery ponownie (istnieje kilka wyjątków: .width() bez parametrów zwraca szerokość wybranego elementu i nie jest możliwe jego łańcuchowanie). Aby nasza metoda wtyczek była łańcuchowa, wymaga jednego wiersza kodu:

$.fn.greenify = function() {
    this.css( "color", "green" );
    // return the reference for chaining
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );
 

Instalacja lub konfiguracja

Wtyczki jQuery są zazwyczaj instalowane przez NPM lub Yarn (jeśli są tam hostowane) lub odwołują się do zewnętrznego pliku skryptu zawierającego wtyczkę, czy to z katalogu względnego, czy z CDN.

<script type="text/javascript" src="/path/to/plugin.jquery.js"></script>
 

Obsługa opcji domyślnych

Możesz dostosować wtyczkę do własnych potrzeb, akceptując opcje.

$.fn.colourize = function(options) {

    // This is one method to support default options
    var style = $.extend({
        color: "green",
        backgroundColor: "white"
    }, options);

    // Set the colours on the current selection based on the option parameters
    return this.css({
        color: style.color,
        backgroundColor: style.backgroundColor
    });
};
 

Przykładowe użycie:

$("button").colourize({
    color: "orange"
});
 

Domyślna wartość opcji koloru „zielony” zostaje zastąpiona przez $.extend() i ma wartość „pomarańczowy”.

Typowa struktura wtyczek jQuery

Podczas gdy pisanie wtyczek jQuery jest proste, chcemy umieścić nasze wtyczki w lokalnym zasięgu. Pozwoli to uniknąć konfliktów przestrzeni nazw, a także zanieczyszczenie globalnej przestrzeni nazw, oprócz tego, że jQuery zostanie załadowany przed rozszerzeniem naszej wtyczki.

// Encapsulate our plugins in a local scope
(function($) {

    // Plugin definition
    $.fn.colourize = function() {

        // Plugin code

    };

// Pass the jQuery object into our local scope
}(jQuery));
 

Lokalne opakowanie zakresu można pominąć na innych przykładach, aby były proste i zwięzłe.

Korzystanie z metody each ()

Typowy obiekt jQuery będzie zawierał odwołania do dowolnej liczby elementów DOM, dlatego obiekty jQuery są często nazywane kolekcjami. Jeśli chcesz wykonywać manipulacje przy użyciu określonych elementów (np. Uzyskiwanie atrybutu danych, obliczanie określonych pozycji), musisz użyć .each (), aby przechodzić między elementami.

$.fn.myNewPlugin = function() { 
    return this.each(function() {
        // Do something to each element here.
    });
 
    // return the reference for chaining
    return this;
};