Тепер, коли ми зрозуміли основи розробки плагінів, ми можемо поглибитися трохи глибше. Оскільки зрештою плагін є функцією, він надає нам сферу, яку нам потрібно організувати. Пам’ятаєте, коли ми привели свій будинок в порядок, коли ми вчились про створення шаблонів? Ми можемо використовувати деякі з цих самих понять у плагіні.
Але спочатку я думаю, що архітектура плагіна 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. Існує функція 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);Просто якось це дає нам хороший спосіб використовувати методи плагінів, якщо нам це потрібно.
У цій пригоді щодо побудови плагінів ми не пройшли надзвичайно далеко:
Дивіться «Ручка, що створює повзунок від нуля» Кріса Койєра (@chriscoyier) на CodePen
Чесно кажучи, світові, мабуть, не потрібен інший плагін слайдера. Але ви бачите, наскільки складні вони могли отримати. Ось лише кілька ідей:
- Можуть бути функції зворотного виклику (або власні події) до і після зміни слайда, після налаштування слайдера, після його знесення тощо.
- Ширини можуть визначатись у відсотках і перераховуватись, коли змінюється вікно браузера.
- Навігацію можна будувати динамічно, замість того, щоб вимагати розмітки.
- Ідентифікатори та #hash hrefs також можна створювати динамічно.
- Сенсорні події, такі як пальці, можна додати, щоб зробити повзунок більш зручним для дотику (маленькі крапки не є зручними для дотику).
Чим більше цих речей ви робите, тим більший розмір плагіна. Ось чому дотримуватися балансу між функціями, практичністю, продуктивністю та розміром настільки складно і де так багато різних плагінів, які зрештою роблять одне і те ж.