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