Share
Når du skriver et jQuery-plugin, bør samme konfliktforebyggingsrutine som brukes med vanlig, gammel jQuery-kode, implementeres. Med dette i bakhodet, bør alle plugins være inneholdt i et privat omfang hvor $ alias kan brukes uten frykt for konflikter eller overraskende resultater.
Kodingsstrukturen under skal se kjent som den brukes i nesten alle kodeeksempler i denne sesjonen.
Nye plugins er festet til jQuery.fn objekt, siden dette er en snarvei eller alias for jQuery.prototype. I vårt kodende eksempel nedenfor legger vi tellepluggen til jQuery.fn gjenstand. Ved å gjøre dette skaper vi vår egen tilpassede jQuery-metode som kan brukes på et innpakket sett med DOM-elementer.
I utgangspunktet er et plugin festet til jQuery.fn lar oss lage våre egne tilpassede metoder som ligner på hvilke som finnes i API. Dette skyldes at når vi legger til plugin-funksjonen til jQuery.fn, vår funksjon er inkludert i prototypekjeden-$ .fn.count = funksjon () -for jQuery-objekter opprettet ved hjelp av jQuery-funksjonen. Hvis det blåser opp, husk bare å legge til en funksjon til jQuery.fn betyr at søkeordet dette innsiden av plugin-funksjonen vil referere til selve jQuery-objektet.
Merknader: Ved å legge til et plugin til jQuery.fn objekt, vi sier i hovedsak at vårt plugin vil bruke jQuery-funksjonen til å velge en kontekst (DOM-elementer). Hvis pluginet ditt ikke krever en bestemt kontekst (med andre ord et sett med DOM-elementer) der det må operere, trenger du kanskje ikke å legge ved dette pluginet til $ .fn. Det kan være mer fornuftig å legge det til som en funksjon i jQuery-navneområdet.
Accentsconagua
dette Er et referanse til det nåværende jQuery-objektetNår du legger til et plugin i jQuery.fn objekt, søkeordet dette brukt inne i den vedlagte plugin-funksjonen, refererer til det nåværende jQuery-objektet.
Det er kritisk at du groker nøyaktig hva søkeordet dette refererer til i plugin-funksjonen.
dette søkeordVed hjelp av Hver(), Vi kan lage en implisitt iterasjon for pluginet vårt. Dette betyr at hvis innpakningssettet inneholder mer enn ett element, vil vår plugin-metode brukes på hvert element i innpakningssettet.
For å gjøre dette bruker vi jQuery-verktøyet Hver() funksjon, som er en generisk iterator for både objekter og arrayer, i utgangspunktet forenkler looping. I kodeseksempelet nedenfor bruker vi funksjonen til å iterere over selve jQuery-objektet. Innsiden av funksjonen som overføres til Hver(), søkeordet dette vil referere til elementene i jQuery wrapper settet.
Bruker Hver() funksjonen er viktig hvis du vil at et plugin skal bruke implisitt iterasjon.
Vanligvis returnerer de fleste plugins selve jQuery-objektet slik at pluggen ikke bryter kjeden. Med andre ord, hvis et plugin ikke spesifikt trenger å returnere en verdi, bør den fortsette kjeden slik at ytterligere metoder kan brukes på innpakningssettet. I koden nedenfor returnerer vi jQuery-objektet med returnere dette; uttalelse slik at kjetting ikke vil bli ødelagt. Legg merke til at jeg kjeder på ordnede () og føye () metoder etter at jeg ringer til telle() plugg inn.
Merknader: Det er mulig å gjøre plugin en destruktiv metode ved ikke å returnere jQuery-objektet.
Plugins inneholder vanligvis standardalternativer som vil fungere som baseline standardkonfigurasjon for plugins logikk. Disse alternativene brukes når plugin er påkalt. I koden nedenfor lager jeg en defaultOptions objekt som inneholder en enkelt eiendom (startCount) og verdi (0). Dette objektet lagres på tellefunksjonen $ .fn.count.defaultOptions. Vi gjør dette slik at alternativene kan konfigureres fra utenfor plugin.
Vanligvis kan standard plugin-alternativene overskrives med egendefinerte alternativer. I koden under, passerer jeg i en customOptions objekt som en parameter til plugin-funksjonen. Dette objektet er kombinert med defaultOptions objekt å lage en singel opsjoner gjenstand. Vi bruker jQuery-verktøymetoden forlenge() å kombinere flere objekter i et enkelt objekt. De forlenge() Metoden gir det perfekte verktøyet for å overskrive et objekt med nye egenskaper. Med denne koden på plass, kan plugin-modulen nå tilpasses når den blir påkalt. I eksemplet passerer vi telle plugg et eget nummer (500) som skal brukes som utgangspunkt for tellingen. Dette tilpassede alternativet overstyrer standardalternativet (0).
Siden standardalternativer er tilgjengelige fra utenfor et plugin, er det mulig å tilbakestille standardalternativer før du påkaller plugin. Dette kan være nyttig når du vil definere dine egne alternativer uten å endre selve plugin-koden. Hvis du gjør det, kan du forenkle plugininvitasjoner fordi du på en måte kan sette opp pluginet til din smak uten å forklare den originale pluginkoden selv.
Avhengig av pluginets natur kan det være kritisk at en plugin kalles både normalt (via DOM-elementer og hendelser) så vel som programmatisk. Tenk på en dialogboks. Det vil være ganger at modal / dialog åpnes basert på brukerarrangementer. Andre ganger må en dialog åpnes basert på miljø- eller systemhendelser. I disse situasjonene kan du fortsatt påkalle pluginet ditt uten noen elementer i DOM ved å lage et element i farten for å påkalle plugin. I koden nedenfor påkaller jeg dialog () plugin på sidebelastning ved først å opprette et element for å påkalle pluginet mitt.
dialog, si hei dialog, si farvel
Tydeligvis kan det være mye variasjon av dette mønsteret, avhengig av opsjonene, kompleksiteten og funksjonaliteten til plugin. Poenget her er at plugins kan bli kalt via eksisterende DOM-elementer, så vel som de som er opprettet på fluen.
Når du forbereder jQuery-plugins, er det en god idé å gi tilbakeringingsfunksjoner som et alternativ, og for å overføre disse funksjonene sammenhenger av dette når tilbakeringingen er påkalt. Dette gir et kjøretøy for ytterligere behandling av elementer i et innpakningssett. I koden nedenfor overfører vi et tilpasset alternativ til outAndInFade () plugin-metode som er en funksjon, og skal kalles når animasjonen er fullført. Tilbakeringingsfunksjonen blir bestått av verdien av dette når det blir påkalt. Dette gjør at vi kan bruke dette Verdien inne i funksjonen vi definerte. Når tilbakeringingsfunksjonen påberopes, vil søkeordet dette referere til en av DOM-elementene som finnes i wrapper-settet.
Ut og i utseendeUt og i utseende
