jquery-pluginsAan de slag met jquery-plug-ins


Opmerkingen

Een jQuery-plug-in is gewoon een nieuwe methode die we gebruiken om het prototype-object van jQuery uit te breiden. Door het prototypeobject uit te breiden, kunt u alle jQuery-objecten alle methoden die u toevoegt, overerven. Zoals vastgesteld, maakt u telkens wanneer u jQuery() aanroept, een nieuw jQuery-object, waarbij alle methoden van jQuery zijn overgenomen.

Het idee van een plug-in is om iets te doen met een verzameling elementen. U kunt elke methode die bij de jQuery-kern .fadeOut() , als een plug-in beschouwen, zoals .fadeOut() of .addClass() .

U kunt uw eigen plug-ins maken en deze privé gebruiken in uw code of u kunt ze vrijgeven voor het publiek. Er zijn duizenden jQuery-plug-ins online beschikbaar. De barrière voor het maken van een eigen plug-in is zo laag dat je er eenvoudig een kunt maken!

Basis plug-in die de tekstkleur groen maakt.

// 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

Dit werkt, maar er zijn een paar dingen die we moeten doen om onze plug-in in de echte wereld te laten overleven. Een van de functies van jQuery is chaining, wanneer u vijf of zes acties aan één selector koppelt. Dit wordt bereikt door alle jQuery- .width() het oorspronkelijke jQuery-object opnieuw te laten retourneren (er zijn een paar uitzonderingen: .width() aangeroepen zonder parameters retourneert de breedte van het geselecteerde element en kan niet worden gekoppeld). Om onze plug-in-methode ketenbaar te maken, is er één regel code nodig:

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

Installatie of instellingen

jQuery-plug-ins worden doorgaans geïnstalleerd via NPM of Yarn (indien daar gehost), of verwijzend naar een extern scriptbestand dat de plug-in bevat, hetzij uit een relatieve map of een CDN.

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

Ondersteunende opties met standaardinstellingen

U kunt uw plug-in aanpasbaar maken door opties te accepteren.

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

Voorbeeld gebruik:

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

De standaardwaarde voor de kleuroptie "groen" wordt vervangen door $.extend() en wordt "oranje".

Typische jQuery-pluginstructuur

Hoewel het schrijven van jQuery-plug-ins eenvoudig is, willen we onze plug-ins in een lokale scope plaatsen. Dit voorkomt naamruimteconflicten en vervuilt de wereldwijde naamruimte, en zorgt er bovendien voor dat jQuery wordt geladen voordat onze plug-in deze uitbreidt.

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

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

        // Plugin code

    };

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

De lokale scope-wrapper kan in andere voorbeelden worden weggelaten om ze eenvoudig en beknopt te houden.

Met de methode each ()

Uw typische jQuery-object bevat verwijzingen naar een willekeurig aantal DOM-elementen en daarom worden jQuery-objecten vaak collecties genoemd. Als u wilt manipuleren met specifieke elementen (bijvoorbeeld een gegevenskenmerk verkrijgen, specifieke posities berekenen), moet u .each () gebruiken om de elementen te doorlopen.

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