jquery-pluginsInizia con jquery-plugins


Osservazioni

Un plugin jQuery è semplicemente un nuovo metodo che utilizziamo per estendere l'oggetto prototipo di jQuery. Estendendo l'oggetto prototipo si abilita tutti gli oggetti jQuery ad ereditare qualsiasi metodo aggiunto. Come stabilito, ogni volta che chiami jQuery() stai creando un nuovo oggetto jQuery, con tutti i metodi di jQuery ereditati.

L'idea di un plugin è di fare qualcosa con una collezione di elementi. Potresti considerare ogni metodo fornito con il nucleo jQuery come plugin .fadeOut() o .addClass() .

Puoi creare i tuoi plugin e utilizzarli privatamente nel tuo codice o puoi renderli pubblici. Ci sono migliaia di plugin jQuery disponibili online. La barriera per creare un tuo plug-in è così bassa che puoi crearne uno facilmente!

Plugin di base che cambia il colore del testo in verde.

// 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(); 
 

chaining

Funziona, ma ci sono un paio di cose che dobbiamo fare affinché il nostro plugin sopravviva nel mondo reale. Una delle caratteristiche di jQuery è concatenare, quando si collegano cinque o sei azioni su un solo selettore. Ciò si ottiene facendo in modo che tutti i metodi dell'oggetto jQuery restituiscano di nuovo l'oggetto jQuery originale (vi sono alcune eccezioni: .width() chiamato senza parametri restituisce la larghezza dell'elemento selezionato e non è concatenabile). Rendere il nostro metodo plugin concatenabile richiede una riga di codice:

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

Installazione o configurazione

I plug-in jQuery vengono generalmente installati tramite NPM o Yarn (se ospitato lì) o facendo riferimento a un file di script esterno contenente il plug-in, sia da una directory relativa che da una CDN.

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

Opzioni di supporto con valori predefiniti

Puoi rendere personalizzabile il tuo plug-in accettando le opzioni.

$.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
    });
};
 

Esempio di utilizzo:

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

Il valore predefinito per l'opzione colore "verde" viene sovrascritto da $.extend() per essere "arancione".

Tipica struttura del plugin jQuery

Mentre scrivere i plugin jQuery è semplice, vogliamo racchiudere i nostri plugin in un ambito locale. Ciò eviterà conflitti nello spazio dei nomi e inquinerà lo spazio dei nomi globale, oltre a garantire che jQuery venga caricato prima che il nostro plugin lo estenda.

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

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

        // Plugin code

    };

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

Il wrapper scope locale può essere omesso su altri esempi per mantenerli semplici e concisi.

Usando il metodo each ()

Il tuo tipico oggetto jQuery conterrà riferimenti a qualsiasi numero di elementi DOM, ed è per questo che gli oggetti jQuery vengono spesso chiamati collezioni. Se vuoi fare manipolazioni con elementi specifici (es. Ottenere un attributo dati, calcolare posizioni specifiche), allora devi usare .each () per scorrere gli elementi.

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