Most, hogy megértettük a beépülő modulok fejlesztésének alapjait, egy kicsit elmélyülhetünk. Mivel egy plugin végső soron egy függvény, ez biztosítja számunkra a szervezéshez szükséges területet. Emlékszel, amikor rendbe hoztuk a házunkat, amikor a sablonokról tanultunk? Használhatunk ugyanezeket a fogalmakat egy beépülő modulban.
De először is azt gondolom, hogy a jQuery plugin architektúrának előnye származhat valamilyen kazánlap kódból. Talán ismeri a HTML5 Boilerplate-t, amely egy csomó intelligens alapértelmezett értéket kínál. A jQuery Plugin kazán ugyanaz a fajta dolog. Megtakarít némi gépelést, és elindul az intelligens fejlődés útján.
Találkoztam egy szó szerint jQuery Boilerplate nevű projekttel, amelyről azt hiszem, jó. De nem sokat ástam bele. Ehelyett nagyon szeretem Doug Neiner Starterjét. Megad egy nevet, néhány alapértelmezést és néhány választási lehetőséget, és ez generálja az Ön számára ezt a kazánszerkezetet.
Úgy döntünk, hogy elkészítünk egy lodgeSlider nevű csúszkát egy egyszerű sebességparaméterrel, és ezt a kódot kapjuk:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Sok ilyennek ismerősnek kell lennie. Van egy IIFE, amely a biztonság érdekében csomagolja a bővítményt. Van egy funkció, amelyet a jQuery objektumból hoztak létre. Van egy init funkció, amelyet azonnal meghívnak. Van egy olyan módszer, amely a jQuery objektumból jött létre, amely egy jQuery objektumot ad vissza. Vannak olyan változók, amelyek gyorsítótár-referenciákat hoztak létre, amelyeket valószínűleg újra felhasználunk. Többnyire olyan dolgok, amiket már láttunk.
Talán két új dolog. Az egyik az ott található opcióobjektum. Láthatja a keményen kódolt 300 értéket. De lásd a vonalat is $.extend(). Ez egy jQuery függvény, amely két objektumot egyesít az egyikben, az egyik elsőbbséget élvez a másikkal szemben. Amikor meghívjuk a bővítményt, talán így:
$("#slider-1").lodgeslider();Nem adunk át opciókat, és ez az üres objektum összekapcsolódik a hardkódolt objektumunkkal, és az alapértelmezett értékek a beépülő modulban érhetők el. De nevezhetnénk így is:
$("#slider-1").lodgeslider(( speed: 500 ));Paraméterként átadunk egy objektumot. Ez az objektum összekapcsolódik a nehezen kódolt objektumunkkal, elsőbbséget élvez, és az általunk átadott érték lesz a pluginban elérhető érték. Elég jó.
A másik új dolog az a furcsa kicsit .data(). Létrehoztuk az alapváltozót, hogy hivatkozhassunk magára a függvényre, amelyet újból létrehozunk minden olyan elemre, amelyre a plugint hívják. Tegyük fel például, hogy a plugint bekapcsoltuk $(".slider")- két olyan elem lehet az oldalon, amelynek osztályneve slider. Minden hurok fut, és két példány készül a lodgeSlider függvényről. Mindegyikben hivatkozást fűzünk hozzá magához az elemhez. Így belső plugin módszereket hívhatunk az adott elem bármely referenciájából.
Mint talán:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Csak annyit ad nekünk, hogy szükség esetén plugin módszereket használhatunk.
Nem jutottunk óriási távolságra ebben a pluginépítési kalandban:
Lásd: Chris Coyier (@chriscoyier) a tollat, amely csúszkát épít a Scratch-ból a CodePen-en
Őszintén szólva a világnak valószínűleg nincs szüksége újabb csúszka beépülő modulra. De láthatja, milyen bonyolulttá válhatnak. Íme néhány ötlet:
- Lehetnek visszahívási funkciók (vagy egyedi események) a dia megváltoztatása előtt és után, a csúszka beállítása után, lebontása után stb.
- A szélesség lehet százalékos és újraszámítható, amikor a böngésző ablaka megváltozik.
- A navigációt dinamikusan lehet építeni, ahelyett, hogy a jelölésben megkövetelné.
- Az ID-k és a #hash href-ek dinamikusan is létrehozhatók.
- Érintéses eseményeket, például csúsztatásokat lehet hozzáadni a csúszka érintésbarátabbá tételéhez (a kis pontok nem érintésbarátak).
Minél többet csinál ezekből, annál nagyobb lesz a bővítmény. Ezért olyan trükkös a funkciók, a praktikum, a teljesítmény és a méret közötti egyensúly megteremtése, ahol olyan sok különféle plugin van, amelyek végül ugyanazt teszik.