Share
I denne artikkelen skal vi bygge vår egen jQuery-plugin trinn for steg fra grunnen av; jQuery gjør denne oppgaven svært enkel for oss, og gir oss en enkel metode for å pakke opp våre skript og avsløre funksjonaliteten deres og oppmuntre til bruk av skalerbare og gjenbrukbare objektorienterte teknikker.
Slår kode som vi finner oss selv med å bruke gang på gang i et jQuery-plugin, er fornuftig. Det betyr at vi kan slippe skript til nettsteder og få dem til å jobbe med en gang med liten eller ingen tilpasning, og det betyr at vi kan dele vår kode med andre utviklere. På grunn av den vanlige syntaksen når du bruker jQuery-plugins, bør de fleste utviklere kunne plukke dem opp og bruke dem intuitivt, gitt noen enkel dokumentasjon som viser de konfigurerbare egenskapene.
Vårt plugin vil være en enkel bildelaster; Når en side er lastet, som kan være hjemmesiden eller en annen vanlig destinasjonsside, inn i vår side, laster vi inn en serie bilder. Disse bildene lagres i den besøkendes nettleservindu og kan derfor brukes over hele resten av nettstedet. De laster mye raskere enn normalt, så dette er en god måte å forhåndsinstallere store bilder, slik at den besøkende ikke må vente på at de skal gjengis når de åpner siden som inneholder dem.
Vi lager en ny katalog for å beholde alle nødvendige filer.
Nå som vi har alt på plass, kan vi starte skripting; i en ny fil i tekstredigeringsprogrammet, start med følgende kode:
(funksjon ($) // plugin kode vil gå her ...) (jQuery);
Lagre den nye filen i skriptmappen som jquery.jloader.js. Vi starter med å skape en anonym wrapper-funksjon som er selvutførende. Funksjonen aksepterer et enkelt argument som er dollarsymbolet. Funksjonen følges av et annet sett med parentes; Vi bruker disse til å sende jQuery-biblioteket til pluginet vårt. Dette betyr at vi kan bruke standard jQuery-funksjonalitet ved å bruke $ -tegnet som et alias. Dette andre settet av parentes er også det som gjør vår funksjon selvutførende.
Innenfor vår anonyme funksjon legger du til følgende kode:
$ .jLoader = standard: imgDir: "loaderImages /", imgContainer: "", imgTotal: 9, imgFormat: ".jpg", simpleFileNames: true;
Med denne koden oppretter vi et nytt objekt som legges til som en eiendom i jQuery-objektet. Nested innenfor dette objektet er et andre objekt som kalles standardverdier; Dette andre objektet brukes til å lagre de forskjellige konfigurasjonsinnstillingene for pluginet vårt. Disse innstillingene er egenskapene til pluginet og danner hovedgrensesnittet som det kan brukes programmatisk. Når pluginet er kodet, vises det i DOM-kategorien i Firebug som en egenskap av $ eller jQuery-objektene:
Deretter må vi legge til vår konstruktormetode til jQuery slik at vi kan målrette mot bestemte elementer eller grupper av elementer og bruke pluginet til dem. Direkte etter de konfigurerbare egenskapene legger du til følgende kode:
Accentsconagua
$ .fn.extend (jLoader: funksjon (config, filnavn) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr ("id"); .simpleFileNames == true)? simpleLoad (config): complexLoad (config, filnavn); returner dette;); jQuerys forlengelsesmetode tar et objekt og bruker dets egenskaper til et annet objekt. Når du gjør plugins, bruker vi objektet som representerer pluginet til fn-objektet, som er en spesiell jQuery-konstruksjon laget for å lage plugins.
Egenskapen jLoader i objektet vi søker på fn har en anonym funksjon som verdi; I denne funksjonen legger vi først til våre konfigurerbare egenskaper. Vi gjør dette ved hjelp av utvidelsesmetoden til jQuery igjen. Konstruktørfunksjonen vår aksepterer to valgfrie argumenter, et utviklingsskapet konfigurasjonsobjekt og en rekke filnavn.
Dette tillater oss å bruke standardegenskapene, men å akseptere et konfigurasjonsobjekt når vi kaller konstruktormetoden fra ekstern kode. Eventuelle egenskaper som leveres i konstruktørens konfigurasjonsobjekt, tilsidesetter verdiene til eventuelle matchende egenskaper i standardkonfigurasjonsobjektet.
Det er nyttig for andre utviklere å gi så mange konfigurerbare egenskaper som mulig for å gjøre pluginene mer robuste og tilpassbare. Det resulterende settet av egenskaper lagres i config-variabelen, slik at vi enkelt kan sende den videre til andre funksjoner.
Vi får ID for det valgte elementet, som vi kan få ved å spørre id-attributtet til det nåværende jQuery-objektet, som vil peke på elementet / elementene som vår konstruktørfunksjon er knyttet til.
Vi avgjør deretter om vi bruker enkle (numeriske) eller komplekse (alfanumeriske) filnavn; vi kan finne ut av egenskapen simpleFileNames i vårt config-objekt. Som standard er dette satt til ekte, slik at vi kontrollerer om verdien er fortsatt sant og ring den aktuelle funksjonen ved hjelp av standard JavaScript's ternære betingede utsagn. Hver funksjon er bestått konfigurasjonsobjektet slik at vi kan benytte seg av egenskapene inne i funksjonen, hvis vi ikke gjorde dette, ville vi ikke kunne få tilgang til noen av konfigurasjonsegenskapene fra våre metoder.
Til slutt bruker vi returmeldingen for å returnere plugin-objektet vårt; Dette er en viktig faktor i plugin-koden, og betyr at vi kan kjede ytterligere jQuery-metoder på slutten av samtalen til vår konstruktormetode slik at den oppfører seg akkurat som andre metoder internt til jQuery selv.
Vårt plugin har to ekstra metoder etter konstruktormetoden; Disse to metodene brukes internt av plugin og trenger ikke å bli kalt fra ekstern kode, tenk på dem som beskyttede metoder. Den første av disse er simpleLoad-metoden og består av følgende kode:
funksjon simpleLoad (config) for (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" image "+ x, src: config.imgDir + x + config.imgFormat, tittel:" Image "+ x). appendTo (" # "+ config.imgContainer) .css display: "none");; Ved hjelp av en standard JavaScript for loop kan vi opprette det nødvendige antall img-elementer i henhold til imgTotal-egenskapen, som vi satt til 9 i standardinnstillingen. Det kan virke tungvint å måtte fortelle plugin hvor mange bilder vi vil laste, men dessverre er det ingen måte å spørre mappen for innholdet ved hjelp av JavaScript. Denne egenskapen bidrar til å holde pluginet fra å kreve server side støtte.
Vi lager hvert bilde ved hjelp av jQuerys utmerkede DOM node-skapingsanlegg og angir de grunnleggende attributter som et bilde trenger; et id, src og en tittel. For å gjøre hvert elements ID unikt kan vi bruke tallvariabelen for vår forløp. Src av hvert nytt img-element er det mest komplekse; For denne egenskapen legger vi veien til banen til bildet ved hjelp av egenskapen imgDir. Med enkle filnavn kan vi også bruke tellevariabelen til å legge til hvert spesifisert bilde. Til slutt legger vi til filtypen ved hjelp av egenskapen imgFormat. Tittelattributtet samsvarer bare med id.
Når hvert bilde er opprettet og gitt de riktige attributter, legger vi det til beholderelementet som er angitt i imgContainer-egenskapen. De forhåndsbelastede bildene er ikke ment å bli sett på dette stadiet, så vi kan bruke jQuery's css-metode for å sette deres displayegenskaper til ingen. Den endelige funksjonen, complexLoad, benytter både det valgfrie konfigurasjonsobjektet og filnavnet array; koden skal vises som følger:
funksjon complexLoad (config, fileNames) for (var x = 0; x < fileNames.length; x++) $("![]()
") .attr (id: filnavn [x], src: config.imgDir + filnavn [x] + config.imgFormat, tittel:" The "+ filnavn [x] +" nebula ") .appendTo + config.imgContainer) .css (display: "none");; Vi bruker fortsatt en for-loop i denne metoden, selv om antall ganger det vil kjøre, er basert på antall elementer i filnavnet-arrayet i stedet for imgTotal-egenskapen. Vi lager fremdeles en serie img-elementer, og vi stiller de samme egenskapene til disse elementene som vi gjorde før, selv om vi bruker forskjellige verdier for attributter denne gangen.
ID for hvert nytt bilde er ganske enkelt satt til innholdet i det nåværende arrayelementet. Bildet lastes inn ved å sammenkoble stien, filnavnet og filutvidelsen sammen igjen, selv om denne gangen bruker vi innholdet i gjeldende arrayelement som filnavn i stedet for et heltall. Tittelattributtet har en litt mer detaljert verdi enn tidligere og igjen bruker oppsettelementet i stedet for en konfigurasjonsegenskap.
Vi har nå lagt til all koden som utgjør vårt plugin. Det er på tide å sette det på prøve. Opprett en tom HTML-fil som følgende:
jLoader Demo Page
Lagre denne siden i hovedprosjektmappen (jLoader) som noe som jLoader.demo.html. I siden av siden har vi våre to beholderelementer som vi vil fylle med de forhåndslastede bildene. Vi kobler til jQuery og til kildefilen for widgeten vår, og deretter følger vi to konstruktormetoder for pluginet vårt.
Den første get er simpleImageContainer ved hjelp av standard jQuery DOM retrieval-metoden, og kaller vårt plugin uten ekstra konfigurasjon. Dette påkaller standard implementering og skal fylle beholderen med de numerisk navngitte bildene. Du ser ikke dette på siden fordi vi setter dem alle til å vise: ingen, men du bør kunne se dem i Firebug:
Den andre konstruktormetoden bruker både et konfigurasjonsobjekt og filnavn-arrayet. Vi setter to egenskaper her; Først setter vi egenskapen simpleFileNames til falsk, slik at vår andre beskyttede metode i plugin brukes, for det andre setter vi imgContainer-egenskapen til elementets ID vi skal legge til bildene til. Vi gir så en rekke av alle bildefilnavnene vi vil forhåndsinstallere i strengformat. Igjen, du vil ikke se bildene; det er hele poenget, men Firebug vil bevise deres eksistens:
I denne opplæringen har vi sett på de enkelte trinnene som trengs for å lage et enkelt jQuery-plugin; vi så på hvordan du legger til egenskaper i API-modulen til plugin og hvordan du legger til metoder som utfører forskjellige oppføringer. Vi så også metodene som jQuery gir oss, for å gjøre forfatter plugins enklere og teknikker vi kan bruke for å gjøre våre kreasjoner mer robuste.
Sørg for å besøke jQuery-nettstedet for å se gjennom de tilgjengelige pluginene. Det er ingen bruk å gjenoppfinne hjulet med mindre du lærer!
Besøk artikkelen
"Noen ganger får vi det i hodene våre at en oppgave er for kompleks at vi bare ignorerer å gjøre det. Det har vært min tankegang når jeg tenker på å utvikle et plugin for jQuery. Jeg har alltid trodd at noen av kodene jeg utviklet ville være mer fornuftig som et plugin, men jeg hadde ikke tid til å finne ut det. "
Besøk artikkelen
"Så du var ute etter din søken for å finne svaret på livet, universet og alt, når du ble funnet, fant du jQuery. Ja, jeg vet at du ventet 42, men for all vår overraskelse var det jQuery. hva er neste? Bygg din egen plugin! "
Besøk artikkelen
