Share
När du skriver ett jQuery-plugin ska samma rutin för förebyggande av konflikter användas med regelbunden, gammal jQuery-kod. Med tanke på detta borde alla plugins innehålla en privat räckvidd där $ alias kan användas utan rädsla för konflikter eller överraskande resultat.
Kodningsstrukturen nedan bör se ut som den används i nästan alla kodexempel i denna session.
Nya plugins är anslutna till jQuery.fn objekt, eftersom det här är en genväg eller ett alias för jQuery.prototype. I vårt kodande exempel nedan lägger vi till pluginpluggen till jQuery.fn objekt. Genom att göra detta skapar vi vår egen anpassade jQuery-metod som kan användas på en förpackad uppsättning DOM-element.
I grund och botten är ett plugin kopplat till jQuery.fn tillåter oss att skapa egna anpassade metoder som liknar alla som finns i API: n. Detta beror på att när vi bifogar vår plugin-funktion till jQuery.fn, vår funktion ingår i prototypkedjan-$ .fn.count = funktion () -för jQuery-objekt som skapats med jQuery-funktionen. Om det blåser upp dig, kom bara ihåg att lägga till en funktion till jQuery.fn betyder att sökordet detta Inne i plugin-funktionen kommer att referera till själva jQuery-objektet.
Anmärkningar: Genom att lägga till ett plugin till jQuery.fn objekt, vi säger i huvudsak att vårt plugin skulle vilja använda jQuery-funktionen för att välja ett sammanhang (DOM-element). Om ditt plugin inte kräver ett specifikt sammanhang (med andra ord en uppsättning DOM-element) där den behöver fungera, kanske du inte behöver bifoga det här pluginet till $ .fn. Det kan vara mer meningsfullt att lägga till det som en verktygsfunktion i jQuery-namnrymden.
Accentsconagua
detta Är en referens till det aktuella jQuery-objektetNär du bifogar ett plugin till jQuery.fn objekt, sökordet detta används inuti den bifogade pluginfunktionen kommer att referera till det aktuella jQuery-objektet.
Det är viktigt att du gropar precis vad sökordet detta hänvisar till i plugin-funktionen.
detta NyckelordAnvänder sig av varje(), Vi kan skapa en implicit iteration för vårt plugin. Detta innebär att om inpakningssatsen innehåller mer än ett element, kommer vår plugin-metod att appliceras på varje element i omslagssatsen.
För att göra detta använder vi jQuery-verktyget varje() funktion, som är en generisk iterator för både objekt och arrays, i grund och botten förenklar loopning. I kodexemplet nedan använder vi funktionen att iterera över själva jQuery-objektet. Inne i funktionen som skickas till varje(), sökordet detta kommer att referera till elementen i jQuery wrappersatsen.
Använda varje() funktionen är kritisk om du vill att ett plugin ska använda implicit iteration.
Vanligtvis returnerar de flesta plugins själva jQuery-objektet så att plugin inte bryter kedjan. Med andra ord, om ett plugin inte specifikt behöver returnera ett värde, borde det fortsätta kedjan så att ytterligare metoder kan appliceras på omslagssatsen. I koden nedan returnerar vi jQuery-objektet med returnera detta; uttalande så att kedjan inte kommer att brytas. Lägg märke till att jag kedjar på förälder() och bifoga() metoder när jag kallar räkna() plugin.
Anmärkningar: Det är möjligt att göra plugin en destruktiv metod genom att helt enkelt inte returnera jQuery-objektet.
Plugins innehåller vanligtvis standardalternativ som fungerar som baslinjens standardkonfiguration för plugins logik. Dessa alternativ används när plugin-programmet är påkallat. I koden nedan skapar jag en defaultOptions objekt som innehåller en enda egenskap (startCount) och värde (0). Detta objekt lagras på räknefunktionen $ .fn.count.defaultOptions. Vi gör det så att alternativen kan konfigureras från utsidan av plugin.
Vanligtvis kan standardinställningsalternativen skrivas över med anpassade alternativ. I koden nedan passerar jag i en customOptions objekt som en parameter till plugin-funktionen. Detta objekt kombineras med defaultOptions objekt för att skapa en enda alternativ objekt. Vi använder jQuery-verktygsmetoden förlänga() att kombinera flera objekt i ett enda objekt. De förlänga() Metoden ger det perfekta verktyget för att skriva över ett objekt med nya egenskaper. Med den här koden på plats kan plugin nu anpassas när den åberopas. I exemplet passerar vi räkna plugg ett anpassat nummer (500) som ska användas som startpunkt för räkningen. Det här anpassade alternativet åsidosätter standardalternativet (0).
Eftersom standardalternativ är tillgängliga från utsidan av ett plugin kan du återställa standardalternativen innan du anropar pluginprogrammet. Detta kan vara användbart när du vill definiera dina egna alternativ utan att ändra pluginkoden själv. Om du gör det kan du förenkla plugininvitationer eftersom du på ett sätt globalt kan ställa in pluginet som du vill utan att förkroppsliga den ursprungliga pluginkoden själv.
Beroende på pluginets typ kan det vara kritiskt att en plugin kallas både normalt (via DOM-element och händelser) såväl som programmässigt. Tänk på en dialog plugin. Det kommer att finnas tillfällen att modal / dialogrutan kommer att öppnas baserat på användarhändelser. Andra gånger måste en dialog öppnas baserat på miljö- eller systemhändelser. I dessa situationer kan du fortfarande anropa din plugin utan några element i DOM genom att skapa ett element i farten för att kunna aktivera plugin. I koden nedan åberopar jag dialog() plugin på sidbelastning genom att först skapa ett element för att anropa mitt plugin.
dialog, säg hej dialog, säg hejdå
Självfallet kan det finnas mycket variation av detta mönster beroende på alternativen, komplexiteten och funktionaliteten för plugin. Poängen här är att plugins kan ringas via befintliga DOM-element, liksom de som skapas i flygningen.
När du skapar jQuery-plugins är det en bra idé att tillhandahålla återuppringningsfunktioner som ett alternativ, och för att skicka dessa funktioner sammanhanget detta när återkallelsen är påkallad. Detta ger ett fordon för ytterligare behandling av element i en omslagssats. I koden nedan överför vi ett anpassat alternativ till outAndInFade () plugin-metod som är en funktion och ska kallas när animationen är klar. Återuppringningsfunktionen skickas till värdet av detta när det åberopas. Detta gör att vi kan använda detta värdet inuti den funktion som vi definierade. När återuppringningsfunktionen är påkallad kommer sökordet att referera till ett av DOM-elementen som ingår i omslagssatsen.
Ut och i blekUt och i blek
