Share
I den här artikeln kommer vi att bygga vårt eget jQuery-plugin steg för steg från början, jQuery gör denna uppgift utomordentligt lätt för oss, vilket ger oss en enkel metod att förpacka upp våra skript och avslöja deras funktionalitet och uppmuntra användningen av skalbara och återanvändbara objektorienterade tekniker.
Omvandlingskod som vi finner oss att använda gång på gång i ett jQuery-plugin är meningsfullt; det betyder att vi kan släppa skript på webbplatser och få dem att fungera genast med liten eller ingen anpassning, och det innebär att vi kan dela vår kod med andra utvecklare. På grund av den vanliga syntaxen när du använder jQuery-plugins, borde de flesta utvecklare kunna hämta dem och använda dem intuitivt med tanke på en enkel dokumentation som visar de konfigurerbara egenskaperna.
Vår plugin kommer att vara en enkel bildlastare; När en sida har laddats, som kan vara hemsidan eller en annan vanlig målsida på vår webbplats laddar vi en serie bilder. Dessa bilder sparas i besökarens webbläsare cache och kan därför användas över hela resten av webbplatsen. De laddas mycket snabbare än normalt, så det här är ett bra sätt att förinstallera stora bilder så att besökaren inte behöver vänta på att de ska göra när de öppnar sidan som innehåller dem.
Vi skapar en ny katalog för att behålla alla nödvändiga filer.
Nu när vi har allt på plats kan vi börja skripta; i en ny fil i din textredigerare börja med följande kod:
(funktion ($) // plugin-kod kommer att gå här ...) (jQuery);
Spara den nya filen i skriptmappen som jquery.jloader.js. Vi börjar med att skapa en anonym wrapper-funktion som är självkörande. Funktionen accepterar ett enda argument som är dollarnsymbolen. Funktionen följs av en andra uppsättning parentes; Vi använder dessa för att skicka jQuery-biblioteket till vårt plugin. Det innebär att vi kan använda en vanlig jQuery-funktionalitet med $-tecknet som ett alias. Denna andra uppsättning parentes är också det som gör vår funktion självförverkligande.
Inom vår anonyma funktion lägg till följande kod:
$ .jLoader = standardvärden: imgDir: "loaderImages /", imgContainer: "", imgTotal: 9, imgFormat: ".jpg", simpleFileNames: true;
Med den här koden skapar vi ett nytt objekt som läggs till som en egenskap för jQuery-objektet. Nested inom detta objekt är ett andra objekt som kallas standardvärden; det här andra objektet används för att lagra de olika konfigurationsinställningarna för vårt plugin. Dessa inställningar är egenskaper för vårt plugin och utgör det huvudsakliga API som det kan användas programmatiskt. När plugin har kodats visas den i fliken DOM i Firebug som egenskap för $ eller jQuery-objekten:
Därefter måste vi lägga till vår konstruktormetod till jQuery så att vi kan rikta in specifika element eller grupper av element och tillämpa vårt plugin på dem. Direkt efter de konfigurerbara egenskaperna lägger du till följande kod:
Accentsconagua
$ .fn.extend (jLoader: funktion (config, fileNames) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr ("id"); .simpleFileNames == true)? simpleLoad (config): complexLoad (config, fileNames); returnera detta;); jQuerys utökningsmetod tar ett objekt och tillämpar dess egenskaper på ett annat objekt. När vi gör plugins applicerar vi objektet som representerar vårt plugin till fn-objektet, vilket är en speciell jQuery-konstruktion som skapats för att skapa plugins.
Egenskapen jLoader i objektet vi ansöker om fn har en anonym funktion som dess värde. inom denna funktion lägger vi först till våra konfigurerbara egenskaper. Vi gör det här med hjälp av förlängningsmetoden för jQuery igen. Våra konstruktörsfunktioner accepterar två valfria argument, ett utvecklingsskapande konfigurationsobjekt och en rad filnamn.
Detta tillåter oss att använda standardegenskaperna, men att även acceptera ett konfigurationsobjekt när vi kallar konstruktormetoden från extern kod. Eventuella egenskaper som levereras i konstruktörens konfigurationsobjekt överskrider värdena för alla matchande egenskaper i standardkonfigurationsobjektet.
Det är användbart för andra utvecklare att tillhandahålla så många konfigurerbara egenskaper som möjligt för att göra våra plugins robusta och anpassningsbara. Den resulterande uppsättningen egenskaper lagras i config-variabeln så att vi enkelt kan vidarebefordra den till andra funktioner.
Vi får identifieringen av det valda elementet, vilket vi kan få genom att fråga id-attributet för det aktuella jQuery-objektet, vilket kommer att peka på det element (er) som vår konstruktörsfunktion är kopplad till.
Vi bestämmer då om vi använder enkla (numeriska) eller komplexa (alfanumeriska) filnamn; vi kan ta reda på egenskapen simpleFileNames i vårt config-objekt. Som standard är detta satt till sant så vi kontrollerar om dess värde fortfarande är sant och ring lämplig funktion med standard JavaScript-ternära villkorligt uttalande. Varje funktion passerar konfigurationsobjektet så att vi kan använda dess egenskaper inuti funktionen, om vi inte gjorde det skulle vi inte kunna komma åt någon av konfigurationsegenskaperna inom våra metoder.
Slutligen använder vi returavkastningen för att returnera vårt pluginobjekt; Detta är en viktig faktor i plugin-koden och innebär att vi kan kedja ytterligare jQuery-metoder i slutet av samtalet till vår konstruktormetod som gör att den beter sig exakt som andra metoder för att jQuery själv.
Vårt plugin har två ytterligare metoder efter konstruktormetoden. Dessa två metoder används internt av plugin och behöver inte kallas från extern kod, tänk på dem som skyddade metoder. Den första av dessa är simpleLoad-metoden och består av följande kod:
funktion simpleLoad (config) for (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" bild "+ x, src: config.imgDir + x + config.imgFormat, titel:" Image "+ x). appendTo (" # "+ config.imgContainer) .css display: "none");; Med hjälp av en standard JavaScript för loop kan vi skapa det önskade antalet img-element enligt den imgTotal-egenskapen, som vi satte till 9 i vårt standardvärdeobjekt. Det kan verka svårt att berätta för plugin hur många bilder vi vill ladda, men tyvärr finns det inget sätt att fråga mappen för innehållet med JavaScript. Den här egenskapen hjälper till att hålla plugin från att kräva support på serversidan.
Vi skapar varje bild med jQuerys utmärkta DOM-nod skapande anläggning och ange de grundläggande attribut som någon bild behöver ett id, src och en titel. För att göra varje elements id unikt kan vi använda räknevariabeln för vår för-loop. Src av varje nytt img-element är det mest komplexa; För detta attribut lägger vi näven till sökvägen till bilden med egenskapen imgDir. Med enkla filnamn kan vi också använda räknevariabeln för att lägga till varje specificerad bild. Slutligen lägger vi till filtillägget med egenskapen imgFormat. Titelattributet matchar helt enkelt id.
När varje bild har skapats och givet de lämpliga attributen lägger vi sedan till det behållarelement som anges i egenskapen imgContainer. De förbelastade bilderna är inte avsedda att ses på detta stadium så vi kan använda jQuerys css-metod för att ställa in deras visningsegenskaper till ingen. Den slutliga funktionen, complexLoad, använder både det frivilliga konfigurationsobjektet och filenNames array; koden ska visas som följer:
funktion complexLoad (config, fileNames) for (var x = 0; x < fileNames.length; x++) $("![]()
") .attr (id: filnamn [x], src: config.imgDir + filnamn [x] + config.imgFormat, titel:" The "+ filnamn [x] +" nebula "). AppendTo + config.imgContainer) .css (display: "none");; Vi använder fortfarande en för loop i den här metoden, även om antalet gånger det kommer att köras är baserat på antalet poster i filenNames array istället för egenskapen imgTotal. Vi skapar fortfarande en serie img-element och vi ställer samma attribut på dessa element som vi gjorde tidigare, även om vi använder olika värden för attributen denna gång.
ID för varje ny bild är helt enkelt inställd på innehållet i det aktuella array-objektet. Bilden laddas genom att sammanfoga vägen, filnamnet och filtillägget tillsammans igen, även om den här gången använder vi innehållet i det aktuella arrayobjektet som filnamnet istället för ett heltal. Titelattributet har ett något mer detaljerat värde än tidigare och använder sig av alternativet istället för en konfigurationsegenskap.
Vi har nu lagt till all koden som utgör vårt plugin. Det är dags att prova det. Skapa en tom HTML-fil som följande:
jLoader Demo Page
Spara den här sidan i huvudprojektmappen (jLoader) som något liknande jLoader.demo.html. I sidans kropp har vi våra två behållarelement som vi kommer att fylla i med de förinstallerade bilderna. Vi länkar till jQuery och till källfilen för vår widget och sedan följer vi två konstruktormetoder för vårt plugin.
Den första geten är simpleImageContainer med standard jQuery DOM-hämtningsmetoden och kallar vårt plugin utan ytterligare konfiguration. Detta åberopar standardinställningen och bör fylla behållaren med de numeriskt namngivna bilderna. Du kommer inte se detta på sidan eftersom vi ställer in alla för att visa dem: ingen, men du borde kunna se dem i Firebug:
Den andra konstruktormetoden använder både ett konfigurationsobjekt och filenNames-arrayen. Vi ställer in två egenskaper här; först ställer vi egenskapen simpleFileNames till falsk så att vår andra skyddade metod i vårt plugin används, för det andra ställer vi egenskapen imgContainer till elementets id som vi ska lägga till bilderna till. Vi tillhandahåller sedan en uppsättning av alla bildfilnamn som vi vill förinställa i strängformat. Återigen ser du inte bilderna; Det är hela poängen, men Firebug kommer att bevisa sin existens:
I denna handledning har vi tittat på de enskilda stegen som behövs för att göra ett enkelt jQuery-plugin; vi tittade på hur man lägger till egenskaper i vårt plugin API och hur man lägger till metoder som utför olika beteenden. Vi såg också de metoder som jQuery ger oss för att göra författnings plugins enklare och tekniker vi kan använda för att göra våra skapelser mer robusta.
Var säker på att besöka jQuery-webbplatsen för att granska de tillgängliga plugin-programmen. Det går inte att uppfinna hjulet om du inte lär dig!
Besök artikeln
"Ibland får vi det i våra huvuden att en uppgift är för komplicerad att vi bara ignorerar att göra det. Det har varit min tankegång när jag tänkte på att utveckla ett plugin för jQuery. Jag har alltid trott att en del av koden jag utvecklade skulle ge större mening som ett plugin men jag hade bara inte tid att räkna ut det. "
Besök artikeln
"Så du var ute efter din strävan att hitta svaret på livet, universum och allt, när du blommade, hittade du jQuery. Ja, jag vet att du förväntade dig 42, men för all vår förvåning var det jQuery. vad är nästa? bygg din egen plugin! "
Besök artikeln
