Share
In dit artikel zullen we onze eigen jQuery-plug-in stap-voor-stap helemaal opnieuw opbouwen; jQuery maakt deze taak uitzonderlijk eenvoudig voor ons, geeft ons een eenvoudige methode om onze scripts in te pakken en hun functionaliteit bloot te leggen, en het gebruik van schaalbare en herbruikbare objectgerichte technieken aan te moedigen.
Draaiende code die we telkens weer gebruiken in een jQuery-plugin is logisch; het betekent dat we scripts in sites kunnen laten vallen en ze meteen kunnen laten werken met weinig of geen aanpassingen. Dit betekent dat we onze code kunnen delen met andere ontwikkelaars. Vanwege de gemeenschappelijke syntaxis bij het gebruik van jQuery-plug-ins, moeten de meeste ontwikkelaars ze kunnen ophalen en intuïtief gebruiken, met een paar eenvoudige documentatie met de configureerbare eigenschappen.
Onze plug-in zal een eenvoudige image-loader zijn; Zodra een pagina is geladen, wat de startpagina of een andere gemeenschappelijke bestemmingspagina op onze site zou kunnen zijn, laden we een reeks afbeeldingen. Deze afbeeldingen worden opgeslagen in de browsercache van de bezoeker en zijn daarom bruikbaar op de rest van de site. Ze laden veel sneller dan normaal, dus dit is een goede manier om grote afbeeldingen vooraf te laden, zodat de bezoeker niet hoeft te wachten totdat ze worden weergegeven bij het openen van de pagina die ze bevat.
We zullen een nieuwe map maken om alle benodigde bestanden in te bewaren.
Nu we alles op zijn plaats hebben, kunnen we beginnen met scripten; in een nieuw bestand in je teksteditor begin je met de volgende code:
(functie ($) // plugin-code zal hier naartoe gaan ...) (jQuery);
Sla het nieuwe bestand op in de scriptmap als jquery.jloader.js. We beginnen met het maken van een anonieme wrapper-functie die zichzelf uitvoert. De functie accepteert één enkel argument, het dollarteken. De functie wordt gevolgd door een tweede reeks haakjes; we gebruiken deze om de jQuery-bibliotheek door te geven aan onze plug-in. Dit betekent dat we elke standaard jQuery-functionaliteit kunnen gebruiken met behulp van het $ -teken als een alias. Deze tweede reeks haakjes maakt ook dat onze functie zichzelf uitvoert.
Voeg binnen onze anonieme functie de volgende code toe:
$ .jLoader = default: imgDir: "loaderImages /", imgContainer: "", imgTotal: 9, imgFormat: ".jpg", simpleFileNames: true;
Met deze code maken we een nieuw object dat wordt toegevoegd als een eigenschap aan het jQuery-object. Genest binnen dit object is een tweede object dat standaardwaarden wordt genoemd; dit tweede object wordt gebruikt om de verschillende configuratie-instellingen voor onze plug-in op te slaan. Deze instellingen zijn eigenschappen van onze plug-in en vormen de hoofd-API waarmee deze programmatisch kan worden gebruikt. Zodra de plug-in is gecodeerd, verschijnt deze op het tabblad DOM van Firebug als een eigenschap van de objecten $ of jQuery:
Vervolgens moeten we onze constructormethode aan jQuery toevoegen, zodat we specifieke elementen of groepen elementen kunnen targeten en onze plug-in daarop kunnen toepassen. Direct na de configureerbare eigenschappen voegt u de volgende code toe:
Accentsconagua
$ .fn.extend (jLoader: function (config, fileNames) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr ("id"); (config .simpleFileNames == true)? simpleLoad (config): complexLoad (config, fileNames); stuur dit terug;); De uitbreidingsmethode jQuery neemt een object en past de eigenschappen ervan toe op een ander object. Bij het maken van plug-ins passen we het object dat onze plug-in vertegenwoordigt toe op het fn-object, een speciaal jQuery-construct gemaakt voor authoring-plug-ins.
De jLoader-eigenschap in het object dat we toepassen op fn heeft als waarde een anonieme functie; binnen deze functie voegen we eerst onze configureerbare eigenschappen toe. We doen dit opnieuw met de methode extend van jQuery. Onze constructorfunctie accepteert twee optionele argumenten, een door ontwikkelaars gemaakt configuratieobject en een reeks bestandsnamen.
Hierdoor kunnen we de standaardeigenschappen gebruiken, maar ook een configuratieobject accepteren als we de constructormethode aanroepen vanuit de externe code. Alle eigenschappen die in het configuratieobject van de constructor worden geleverd, overschrijven de waarden van alle overeenkomende eigenschappen in het standaardconfiguratieobject.
Het is nuttig voor andere ontwikkelaars om zoveel mogelijk configureerbare eigenschappen te bieden om onze plug-ins robuuster en aanpasbaar te maken. De resulterende set eigenschappen wordt opgeslagen in de config-variabele, zodat we deze eenvoudig kunnen doorgeven aan andere functies.
We krijgen de id van het geselecteerde element, die we kunnen verkrijgen door het id-kenmerk van het huidige jQuery-object te ondervragen, dat verwijst naar het element (of de elementen) waaraan onze constructorfunctie is gekoppeld.
Vervolgens bepalen we of we eenvoudige (numerieke) of complexe (alfanumerieke) bestandsnamen gebruiken; we kunnen uit de eigenschap simpleFileNames van ons config-object achterhalen. Standaard is dit ingesteld op true, dus we controleren of de waarde nog steeds waar is en roep de juiste functie aan met behulp van de standaardtermatieverklaring van standaard JavaScript. Elke functie wordt het configuratieobject doorgegeven, zodat we de eigenschappen ervan binnen de functie kunnen gebruiken. Als we dit niet doen, hebben we geen toegang meer tot de configuratie-eigenschappen vanuit onze methoden.
Ten slotte gebruiken we de return-instructie om ons plugin-object te retourneren; dit is een belangrijke factor in de plugin-code en betekent dat we aanvullende jQuery-methoden aan het einde van de aanroep kunnen koppelen aan onze constructormethode, waardoor deze zich exact gedraagt als andere interne methoden voor jQuery zelf.
Onze plug-in bevat twee extra methoden volgens de constructormethode; deze twee methoden worden intern gebruikt door de plug-in en hoeven niet te worden aangeroepen vanuit externe code, denk aan hen als beschermde methoden. De eerste hiervan is de simpleLoad-methode en bestaat uit de volgende code:
function simpleLoad (config) for (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" image "+ x, src: config.imgDir + x + config.imgFormat, title:" Image "+ x). appendTo (" # "+ config.imgContainer) .css ( Geen weergeven" ); ; Met behulp van een standaard JavaScript voor lus kunnen we het vereiste aantal img-elementen maken volgens de eigenschap imgTotal, die we instellen op 9 in ons standaardobject. Het lijkt misschien lastig om de plug-in te vertellen hoeveel afbeeldingen we willen laden, maar helaas is er geen manier om de map te vragen om de inhoud met behulp van JavaScript. Deze eigenschap helpt voorkomen dat de plug-in ondersteuning van de server vereist.
We maken elke afbeelding met behulp van de uitstekende DOM-knooppuntcreatie-faciliteit van jQuery en stellen de basisattributen in die elke afbeelding nodig heeft; een id, src en een titel. Om de id van elk element uniek te maken, kunnen we de telvariabele van onze for-lus gebruiken. De src van elk nieuw img-element is het meest complex; voor dit kenmerk voegen we vist het pad naar de afbeelding toe met behulp van de eigenschap imgDir. Met eenvoudige bestandsnamen kunnen we ook de telvariabele gebruiken om elke opgegeven afbeelding toe te voegen. Ten slotte voegen we de bestandsextensie toe met behulp van de eigenschap imgFormat. Het titelkenmerk komt eenvoudig overeen met de id.
Nadat elke afbeelding is gemaakt en de juiste kenmerken heeft gekregen, voegen we deze toe aan het containerelement dat is opgegeven in de eigenschap imgContainer. De vooraf geladen afbeeldingen zijn in dit stadium niet bedoeld om gezien te worden, dus we kunnen de css-methode van jQuery gebruiken om hun weergave-eigenschap in te stellen op none. De laatste functie, complexLoad, maakt gebruik van zowel het optionele configuratie-object als de array bestandsnamen; de code zou als volgt moeten verschijnen:
functie complexLoad (config, bestandsnamen) for (var x = 0; x < fileNames.length; x++) $("![]()
") .attr (id: bestandsnamen [x], src: config.imgDir + bestandsnamen [x] + config.imgFormat, titel:" De "+ bestandsnamen [x] +" nevel "). appendTo (" # " + config.imgContainer) .css (display: "none");; We gebruiken nog steeds een for-lus in deze methode, hoewel het aantal malen dat deze wordt uitgevoerd, is gebaseerd op het aantal items in de array bestandsnamen in plaats van de eigenschap imgTotal. We maken nog steeds een reeks img-elementen en we hebben dezelfde kenmerken ingesteld voor deze elementen die we eerder hebben gebruikt, hoewel we deze keer andere waarden gebruiken voor de kenmerken.
De id van elke nieuwe afbeelding wordt eenvoudig ingesteld op de inhoud van het huidige array-item. De afbeelding wordt geladen door het pad, de bestandsnaam en de bestandsextensie opnieuw samen te voegen, hoewel we deze keer de inhoud van het huidige arrayitem gebruiken als de bestandsnaam in plaats van een geheel getal. Het titelkenmerk heeft een iets meer gedetailleerde waarde dan voorheen en maakt opnieuw gebruik van het arrayitem in plaats van een configuratie-eigenschap.
We hebben nu alle code toegevoegd waaruit onze plug-in bestaat. Het is tijd om het op de proef te stellen. Maak een leeg HTML-bestand zoals de volgende:
jLoader Demopagina
Sla deze pagina op in de hoofdprojectmap (jLoader) als iets als jLoader.demo.html. In de body van de pagina hebben we onze twee containerelementen die we zullen invullen met de vooraf geladen afbeeldingen. We linken naar jQuery en naar het bronbestand voor onze widget en vervolgens volgen we twee constructormethodes voor onze plug-in.
De eerste krijgt de simpleImageContainer met behulp van de standaard jQuery DOM ophaalmethode en roept onze plug-in zonder aanvullende configuratie. Dit roept de standaardimplementatie op en moet de container vullen met de numeriek genoemde afbeeldingen. U ziet dit niet op de pagina omdat we ze allemaal hebben ingesteld om weer te geven: geen, maar u moet ze wel in Firebug kunnen zien:
De tweede constructormethode maakt gebruik van zowel een configuratieobject als de array bestandsnamen. We hebben hier twee eigenschappen ingesteld; eerst stellen we de eigenschap simpleFileNames in op false, zodat onze tweede beschermde methode in onze plug-in wordt gebruikt, ten tweede stellen we de eigenschap imgContainer in op de id van het element waaraan we de afbeeldingen willen toevoegen. Vervolgens bieden we een array van alle afbeeldingsbestandsnamen die we in serieopmaak vooraf willen laden. Nogmaals, je zult de afbeeldingen niet zien; dat is het hele punt, maar Firebug zal hun bestaan bewijzen:
In deze zelfstudie hebben we gekeken naar de afzonderlijke stappen die nodig zijn om een eenvoudige jQuery-plug-in te maken; We hebben gekeken hoe we eigenschappen kunnen toevoegen aan de API van onze plug-in en hoe we methoden kunnen toevoegen die verschillend gedrag vertonen. We zagen ook de methoden die jQuery ons geeft om authoring-plug-ins gemakkelijker te maken en technieken die we kunnen gebruiken om onze creaties robuuster te maken.
Zorg ervoor dat u de jQuery-site bezoekt om de beschikbare plug-ins te bekijken. Het heeft geen zin om het wiel opnieuw uit te vinden, tenzij je leert!
Bezoek artikel
"Soms komen we tot de ontdekking dat een taak te complex is, dat we het gewoon negeren. Dat is mijn denkwijze geweest bij het ontwikkelen van een plug-in voor jQuery. Ik heb altijd gedacht dat een deel van de code die ik heb ontwikkeld logischer zou zijn als plug-in, maar ik had gewoon geen tijd om het uit te zoeken. "
Bezoek artikel
"Dus je was op zoek naar het antwoord op het leven, het universum en alles, als je blam, je vond jQuery. Ja, ik weet het, je verwachtte 42, maar ook al onze verrassing, het was jQuery. wat is de volgende stap? Bouw je eigen plug-in! "
Bezoek artikel
