Share
Bij het schrijven van een jQuery-plug-in moet dezelfde conflictpreventieroutine die wordt gebruikt met normale, oude jQuery-code worden geïmplementeerd. Met dit in gedachten moeten alle plug-ins binnen een privébereik worden gehouden waar het $ alias kan worden gebruikt zonder angst voor conflicten of verrassende resultaten.
De onderstaande codeerstructuur moet er bekend uitzien, omdat deze in bijna elk codevoorbeeld in deze sessie wordt gebruikt.
Nieuwe plug-ins zijn gekoppeld aan de jQuery.fn object, omdat dit een snelkoppeling of een alias is jQuery.prototype. In ons coderingsvoorbeeld hieronder voegen we de count-plugin toe aan de jQuery.fn voorwerp. Door dit te doen, creëren we onze eigen aangepaste jQuery-methode die kan worden gebruikt op een omwikkelde reeks DOM-elementen.
Kort gezegd, een plug-in gekoppeld jQuery.fn stelt ons in staat om onze eigen aangepaste methoden te maken die vergelijkbaar zijn met die welke in de API worden gevonden. Dit komt omdat wanneer we onze plugin-functie koppelen aan jQuery.fn, onze functie is opgenomen in de prototypeketen-$ .fn.count = function () -voor jQuery-objecten gemaakt met de functie jQuery. Als dat je opvalt, bedenk dan dat het toevoegen van een functie aan jQuery.fn betekent dat het sleutelwoord deze in de plugin-functie verwijst naar het jQuery-object zelf.
Opmerkingen: Door een plug-in toe te voegen aan de jQuery.fn object, we zeggen in feite dat onze plug-in de functie jQuery zou willen gebruiken om een context (DOM-elementen) te selecteren. Als uw plug-in geen specifieke context vereist (met andere woorden een set DOM-elementen) waarin deze moet worden uitgevoerd, hoeft u deze plug-in mogelijk niet aan de plug-in toe te voegen $ .fn. Het kan logischer zijn om het toe te voegen als een functie in de jQuery-naamruimte.
Accentsconagua
deze Is een verwijzing naar het huidige jQuery-objectWanneer u een plug-in bijvoegt jQuery.fn object, het sleutelwoord deze gebruikt binnen de bijgevoegde plugin-functie verwijst naar het huidige jQuery-object.
Het is van cruciaal belang dat u precies weet wat het zoekwoord is deze verwijst naar in de plugin-functie.
deze keywordGebruik makend van elk(), we kunnen een impliciete iteratie maken voor onze plug-in. Dit betekent dat als de wrapper-set meer dan één element bevat, onze pluginmethode wordt toegepast op elk element in de wrapperset.
Om dit te doen, gebruiken we het hulpprogramma jQuery elk() function, wat een generieke iterator is voor zowel objecten als arrays, in feite het vereenvoudigen van looping. In het onderstaande codevoorbeeld gebruiken we de functie om het jQuery-object zelf te herhalen. Binnen in de functie die wordt doorgegeven elk(), het sleutelwoord deze verwijst naar de elementen in de jQuery-wikkelset.
De ... gebruiken elk() De functie is van cruciaal belang als u wilt dat een plug-in impliciete iteratie gebruikt.
Doorgaans retourneren de meeste plug-ins het jQuery-object zelf, zodat de plug-in de keten niet verbreken. Met andere woorden, als een plug-in niet specifiek een waarde hoeft terug te geven, moet deze de keten voortzetten zodat aanvullende methoden kunnen worden toegepast op de wikkelset. In de onderstaande code retourneren we het jQuery-object met de geef dit terug; verklaring zodat de keten niet wordt verbroken. Merk op dat ik aan het ketenen ben ouder() en toevoegen () methoden nadat ik de telling () inpluggen.
Opmerkingen: Het is mogelijk om van de plug-in een destructieve methode te maken door eenvoudigweg niet het jQuery-object te retourneren.
Plug-ins bevatten meestal standaardopties die fungeren als de basislijn-standaardconfiguratie voor de logica van de plug-ins. Deze opties worden gebruikt wanneer de plug-in wordt aangeroepen. In de onderstaande code maak ik een defaultOptions object met een enkele eigenschap (startCount) en waarde (0). Dit object wordt opgeslagen op de telfunctie $ .fn.count.defaultOptions. We doen dit zodat de opties kunnen worden geconfigureerd van buiten de plug-in.
Doorgaans kunnen de standaard plugin-opties worden overschreven met aangepaste opties. In de onderstaande code geef ik a customOptions object als een parameter voor de plugin-functie. Dit object wordt gecombineerd met de defaultOptions object om een single te maken opties voorwerp. We gebruiken de jQuery-gebruiksmethode uitbreiden() om meerdere objecten te combineren in een enkel object. De uitbreiden() methode biedt het perfecte hulpprogramma voor het overschrijven van een object met nieuwe eigenschappen. Met deze code kan de plug-in nu worden aangepast wanneer deze wordt opgeroepen. In het voorbeeld passeren we de tellen plug-in een aangepast nummer (500) dat moet worden gebruikt als startpunt voor de telling. Deze aangepaste optie heeft voorrang boven de standaardoptie (0).
Omdat standaardopties toegankelijk zijn van buiten een plug-in, is het mogelijk om de standaardopties opnieuw in te stellen voordat de plug-in wordt opgeroepen. Dit kan handig zijn als u uw eigen opties wilt definiëren zonder de plugincode zelf te wijzigen. Als u dit wel doet, kunnen invoegtoepassingen voor plug-ins worden vereenvoudigd, omdat u de plug-in in zekere zin globaal naar wens kunt instellen zonder de oorspronkelijke plug-incode zelf te verzwijgen..
Afhankelijk van de aard van de plug-in, kan het van cruciaal belang zijn dat een plug-in zowel normaal (via DOM-elementen en gebeurtenissen) als programmatisch wordt aangeroepen. Overweeg een dialoogplug-in. Er zullen momenten zijn dat de modale / dialoog zal worden geopend op basis van gebruikersgebeurtenissen. Andere keren moet een dialoogvenster worden geopend op basis van milieu- of systeemgebeurtenissen. In deze situaties kun je nog steeds je plugin aanroepen zonder elementen in de DOM door een element on the fly te maken om de plug-in op te roepen. In de onderstaande code roep ik de dialoogvenster () plugin op pagina laden door eerst een element te maken om mijn plug-in op te roepen.
dialoogvenster, zeg hallo-dialoogvenster, zeg dag
Vanzelfsprekend kan er veel variatie in dit patroon zijn, afhankelijk van de opties, complexiteit en functionaliteit van de plug-in. Het punt is hier dat plug-ins kunnen worden aangeroepen via bestaande DOM-elementen, evenals die welke tijdens de vlucht worden gemaakt.
Bij het maken van jQuery-plug-ins is het een goed idee om callback-functies als een optie op te geven en deze functies door te geven in de context van deze wanneer de callback wordt aangeroepen. Dit verschaft een vehikel voor aanvullende behandeling van elementen in een wikkelset. In de onderstaande code geven we een aangepaste optie door aan de outAndInFade () plugin-methode die een functie is en moet worden aangeroepen zodra de animatie is voltooid. De callback-functie wordt de waarde van doorgegeven deze wanneer het wordt aangeroepen. Dit stelt ons in staat om vervolgens de deze waarde binnen de functie die we hebben gedefinieerd. Wanneer de callback-functie wordt aangeroepen, verwijst het sleutelwoord dit naar een van de DOM-elementen in de wrapset.
Out And In FadeOut And In Fade
