Dabar, kai suprantame įskiepių kūrimo pagrindus, galime šiek tiek įsigilinti. Kadangi papildinys galiausiai yra funkcija, jis suteikia mums sritį, kurią turime organizuoti. Pamenate, kai sutvarkėme savo namus, kai mokėmės apie šablonus? Kai kurias tas pačias sąvokas galime naudoti įskiepyje.
Bet pirmiausia, manau, kad „jQuery“ įskiepių architektūrai gali būti naudingas tam tikras katilinės kodas. Galbūt esate susipažinęs su „HTML5 Boilerplate“, kuriame pateikiama daugybė protingų numatytųjų nustatymų. „JQuery Plugin“ katilinė yra tas pats dalykas. Sutaupoma šiek tiek spausdinimo ir leidžia žengti protingo tobulėjimo keliu.
Aš susidūriau su projektu, pavadinimu „jQuery Boilerplate“, kuris, manyčiau, yra geras. Bet aš to labai nesigilinau. Užtat man visai patinka Dougo Neinerio „Starter“. Jūs pateikiate vardą, keletą numatytųjų ir keletą pasirinkimų, ir tai sukurs tą katilo struktūrą jums.
Mes nusprendėme sukurti slankiklį pavadinimu „lodgeSlider“ su paprastu greičio parametru ir galų gale gausime šį kodą:
(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);Daugelis iš jų turėtų atrodyti pažįstami. Saugumui įskiepį įvynioja IIFE. Yra funkcija, sukurta ne „jQuery“ objekte. Yra inicijavimo funkcija, iškart vadinama. Yra metodas, sukurtas naudojant „jQuery“ objektą, kuris grąžina „jQuery“ objektą. Yra kintamųjų, sukurtų talpyklos nuorodų, kurias greičiausiai naudosime dar kartą. Dažniausiai tai, ką matėme anksčiau.
Galbūt du nauji dalykai. Vienas iš jų yra parinkčių objektas. Galite pamatyti sunkiai užkoduotą 300 vertę. Bet taip pat pamatyti liniją su $.extend(). Tai yra „jQuery“ funkcija sujungti du objektus į vieną, pirmenybę teikiant kitiems. Kai skambiname įskiepiui, galbūt taip:
$("#slider-1").lodgeslider();Mes nepateikiame jokių galimybių, o tuščias objektas sujungiamas su mūsų užkoduotu objektu, o numatytosios vertės yra prieinamos papildinio viduje. Bet mes taip pat galėtume tai pavadinti:
$("#slider-1").lodgeslider(( speed: 500 ));Mes perduodame objektą kaip parametrą ten. Tas objektas sujungiamas su mūsų užkoduotu objektu, turi viršenybę, o mūsų perduota vertė tampa įskiepio verte. Gana kietas.
Kitas naujas dalykas yra tas keistas dalykas .data(). Sukūrėme pagrindinį kintamąjį, kad būtų galima nurodyti pačią funkciją, kuri sukuriama iš naujo kiekvienam elementui, į kurį kreipiamasi įskiepio. Pavyzdžiui, tarkime, kad paskambinome papildinį $(".slider")- puslapyje gali būti du elementai, kurių klasės pavadinimas yra slider. Kiekviena kilpa eina ir atliekami du „lodgeSlider“ funkcijos egzemplioriai. Kiekviename jų pridedame nuorodą į patį elementą. Tokiu būdu mes galime vadinti vidinius papildinių metodus iš bet kokių nuorodų, kurias turime tam elementui.
Patinka galbūt:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Tiesiog kinda suteikia mums gerą būdą naudoti papildinių metodus, jei to reikia.
Nepavyko nepaprastai toli šiame įskiepių kūrimo nuotykyje:
Žr. Chriso Coyierio (@chriscoyier) „CodePen“ rašiklį, kuriame pastatytas slankiklis nuo nulio
Sąžiningai, pasauliui tikriausiai nereikia kito slankiklio papildinio. Bet jūs galite pamatyti, kaip sudėtingi jie galėtų tapti. Štai tik kelios idėjos:
- Prieš ir po skaidrių pakeitimų, po to, kai nustatomas slankiklis, po to, kai jis yra nugriautas ir tt, gali būti atgalinio ryšio funkcijos (arba pasirinktiniai įvykiai).
- Pločiai gali būti pagrįsti procentais ir perskaičiuoti, kai keičiasi naršyklės langas.
- Navigacija gali būti kuriama dinamiškai, o ne reikalinga žymėjime.
- ID ir #hash hrefs taip pat galėtų būti sukurti dinamiškai.
- Palieskite įvykius, pvz., Perbraukimus, kad slankiklis taptų patogesnis lietimui (maži taškai nėra paliečiami).
Kuo daugiau tų dalykų darote, tuo didesnis įskiepio dydis. Štai kodėl išlaikyti pusiausvyrą tarp funkcijų, praktiškumo, našumo ir dydžio yra taip keblu ir ten, kur yra tiek daug skirtingų papildinių, kurie galiausiai daro tą patį.