Сега, след като разбрахме основите на разработването на приставки, можем да поразровим малко. Тъй като в крайна сметка приставката е функция, тя ни предоставя обхвата, който трябва да организираме. Спомняте ли си, когато подредихме къщата си, когато учехме за шаблониране? Можем да използваме някои от същите тези понятия в приставка.
Но първо, мисля, че архитектурата на плъгините jQuery може да се възползва от някакъв код на шаблон. Може би сте запознати с HTML5 Boilerplate, който предоставя куп интелигентни настройки по подразбиране. Образецът на jQuery Plugin е същото нещо. Спестява малко писане и ви кара да вървите по пътя на интелигентното развитие.
Попаднах на проект, буквално наречен jQuery Boilerplate, който бих предположил, че е добър. Но не съм се задълбочавал много в това. Вместо това много харесвам Starter от Doug Neiner. Предоставяте име, някои настройки по подразбиране и някои възможности за избор и това ще генерира тази структурна структура за вас.
Решаваме да направим плъзгач на име lodgeSlider с прост параметър на скоростта и в крайна сметка да получим този код:
(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);Много от това трябва да изглеждат познати. Има IIFE, който обвива приставката за безопасност. Има функция, създадена от обекта jQuery. Има функция за иницииране, извикана веднага. Има метод, създаден от обекта jQuery, който връща jQuery обект. Има променливи, създадени кеширащи препратки, които вероятно ще използваме отново. Предимно неща, които сме виждали преди.
Може би две нови неща. Единият е обектът с опции там. Можете да видите твърдо кодираната стойност 300. Но вижте и линията с $.extend(). Това е функция jQuery за комбиниране на два обекта в един, като единият има предимство пред другия. Когато извикаме приставката, може би така:
$("#slider-1").lodgeslider();Не предаваме никакви опции и този празен обект се комбинира с нашия кодиран обект и стойностите по подразбиране са налични в приставката. Но можем да го наречем и така:
$("#slider-1").lodgeslider(( speed: 500 ));Предаваме обект като параметър там. Този обект се комбинира с нашия кодиран обект, има предимство и стойността, която сме предали, се превръща в наличната в приставката стойност. Много готино.
Другото ново нещо е, че странно с .data(). Създадохме основната променлива, за да препращаме към самата функция, която се създава отново за всеки елемент, към който е прикачен плъгина. Например, да речем, че сме включили приставката $(".slider")- на страницата може да има два елемента с име на клас slider. Всеки цикъл се изпълнява и се правят два екземпляра на функцията lodgeSlider. Във всеки един ние прикачваме препратка към него към самия елемент. По този начин можем да извикаме вътрешни методи за приставки от всяка препратка, която имаме за този елемент.
Като може би:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Просто доста ни дава добър начин да използваме методите на приставките, ако имаме нужда.
Не стигнахме изключително много в това приключение за изграждане на приставки:
Вижте писалката, която изгражда плъзгач от нулата от Крис Койер (@chriscoyier) на CodePen
Честно казано, светът вероятно не се нуждае от друга плъгин плъзгач. Но можете да видите колко сложни биха могли да получат. Ето само няколко идеи:
- Може да има функции за обратно извикване (или персонализирани събития) за преди и след промяната на слайда, след като плъзгачът е настроен, след като е съборен и т.н.
- Ширините могат да бъдат базирани на проценти и преизчислени при промяна на прозореца на браузъра.
- Навигацията може да се изгражда динамично, вместо да се изисква при маркирането.
- Идентификаторите и #hash hrefs също могат да се създават динамично.
- Събития с докосване като прекарвания могат да бъдат добавени, за да направят плъзгача по-удобен за докосване (малките точки не са удобни за докосване).
Колкото повече от тези неща правите, толкова по-голям е размерът на приставката. Ето защо постигането на баланс между функции, практичност, производителност и размер е толкова сложно и където има толкова много различни плъгини, които в крайна сметка правят едно и също нещо.