Сада када разумемо основе развоја додатака, можемо мало дубље да копамо. Будући да је додатак на крају функција, он нам пружа опсег који треба да организујемо. Сећате се када смо уредили кућу када смо учили о шаблонирању? Неке од тих истих концепата можемо користити у додатку.
Али прво, мислим да архитектура додатка јКуери може имати користи од неког основног кода. Можда сте упознати са ХТМЛ5 таблом која нуди мноштво паметних заданих вредности. Узорак јКуери Плугин је иста таква ствар. Уштеди мало куцања и води вас путем паметног развоја.
Наишао сам на пројекат дословно назван јКуери Боилерплате за који бих некако претпоставио да је добар. Али у то нисам пуно копао. Уместо тога, прилично ми се свиђа Стартер Доуг Неинера. Навели сте име, неке подразумеване вредности и неке изборе и то ће генерисати ту структуру узорка за вас.
Одлучили смо да направимо клизач под називом лодгеСлидер са једноставним параметром брзине и на крају добијемо следећи код:
(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);Много тога би требало да изгледа познато. Постоји ИИФЕ који омотава додатак ради сигурности. Постоји функција креирана из објекта јКуери. Одмах се позива функција инит. Постоји метода креирана из објекта јКуери која враћа јКуери објекат. Постоје променљиве креиране референце кеширања које ћемо вероватно поново користити. Углавном ствари које смо већ видели.
Можда две нове ствари. Један је објекат опција тамо. Можете видети чврсто кодирану вредност 300. Али погледајте и црту са $.extend(). То је јКуери функција за комбиновање два објекта у један са једним који има предност над другим. Када зовемо додатак, можда овако:
$("#slider-1").lodgeslider();Не прослеђујемо опције, а тај празан објекат се комбинује са нашим чврсто кодираним објектом, а подразумеване вредности су доступне унутар додатка. Али могли бисмо то назвати и овако:
$("#slider-1").lodgeslider(( speed: 500 ));Тамо преносимо објекат као параметар. Тај се објекат комбинује са нашим чврсто кодираним објектом, има предност и вредност коју смо проследили постаје вредност доступна у додатку. Прилично кул.
Друга нова ствар је она чудна ствар .data(). Направили смо основну променљиву која упућује на саму функцију, која се креира изнова за сваки елемент на који се додатак позива. На пример, рецимо да смо додатак укључили $(".slider")- на страници могу бити два елемента са именом класе slider. Свака петља се изводи и направљене су две инстанце функције лодгеСлидер. У сваком додајемо референцу на њега самом елементу. На тај начин можемо позвати интерне методе додатака из било које референце тог елемента.
Као можда:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Баш нам даје леп начин да користимо методе додатака ако је потребно.
Нисмо страховито далеко стигли у овој авантури израде додатака:
Погледајте оловку како прави клизач од огреботина Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у
Искрено, свету вероватно није потребан још један додатак за клизач. Али, видите колико су сложени могли да постану. Ево само неколико идеја:
- Могу постојати функције повратног позива (или прилагођени догађаји) за пре и после промене слајда, након постављања клизача, након његовог рушења итд.
- Ширине могу да се заснивају на процентима и прерачунавају када се прозори прегледача промене.
- Навигација се може динамички градити, уместо да буде потребна у означавању.
- ИД-ови и #хасх хрефс такође могу да се креирају динамички.
- Догађаји додира попут превлачења могу се додати како би клизач постао додирнији (мале тачке нису додирне).
Што више тих ствари радите, већа је величина додатка. Због тога је успостављање равнотеже између карактеристика, практичности, перформанси и величине толико незгодно и где постоји толико различитих додатака који на крају раде исту ствар.