Написання власних плагінів під jquery
(Вільний переклад "Plugins / Authoring")
Для зручної роботи з jQuery ви ймовірно захочете написати власне розширення (плагін). Це дуже добре :) Розширення jQuery за допомогою плагінів і методів - потужний засіб вирішення багатьох завдань і зручний варіант економії часу розробки за рахунок абстрагування найпоширеніших функцій. Ця замітка покликана намітити шлях, рухаючись по якому ви уникнете поширених помилок і не пропустіть свій шанс з написання власного плагіна.
Приступаючи до роботи.
Щоб написати розширення для jQuery. потрібно почати роботу зі спеціального методу об'єкта jQuery.fn якому присвоюється властивість з назвою реалізованої нами функції (myPlugin).
Укладаючи $ в область видимості функції, ми дозволяємо собі вільно використовувати звичайне коротка назва об'єкта jQuery. не боячись що виникне конфлікт з іншими бібліотеками.
Тепер. коли у нас є оболонка, ми можемо почати писати сам код плагіна. Але до цього пару слів про контекст. В області видимості функції-плагіна (тут поняття функції і плагіна дуже перетинаються. Примітка моя). ключове слово this відноситься до об'єкту плагіну jQuery. Це звернення дозволяє звернутися не тільки до самого об'єкту (в даному випадку jQuery), але і до його властивостей, методам. За допомогою цього слова ми можемо додавати нові функції.
Тепер, коли нам стало зрозуміло як звертатися до контексту jQuery-плагіна. давайте напишемо код, який насправді щось робитиме.
Це простий плагін, який повертає висоту найвищого контейнера на сторінці.
побудова ланцюжків
У попередньому прикладі повертається довжина найбільш високого контейнера на сторінці. Але досить часто, доводиться продовжити зміна самого об'єкта після виконання дій над ним. Це робиться за допомогою ланцюжків. В цьому і є краса проектування бібліотеки jQuery. Таким чином, щоб підтримка ланцюжків була доступна, ви повинні переконатися, що ваш плагін повертає ключове слово this
Оскільки плагін повертає ключове слово this в безпосередній видимості, він підтримує ланцюжка і jQuery-колекції можуть продовжувати маніпулювати методами jQuery, наприклад такими як .css. Отже, якщо ваш плагін не повертає прості значення, він повинен повертати this в області видимості вашої функції. Крім того, як ви могли здогадатися, аргументи передаються вашому плагіну - передаються область видимості функції-плагіна. Таким чином, в попередньому прикладі рядок "ширина" стає аргументом для функції-плагіна.
Параметри і настройки за замовчуванням
Для більш складних і настроюються плагінів, які надають безліч варіантів використання, рекомендується мати стандартні параметри (використовуючи $ .extend). Таким чином, замість виклику плагіна з великою кількістю аргументів, можна викликати його з одним аргументом, який є об'єктом необхідним для зміни. Це ви можете зробити так.
У цьому прикладі, після виклику підказки плагін за допомогою відповідних опцій, перевизначає налаштування задані за замовчуванням на "left", а колір залишається колишнім (див. Ті ж настройки по умолчаніію)
Це відмінний спосіб запропонувати універсальний плагін, не вимагаючи від розробника визначення всіх можливих варіантів.
простори назв
Правильне поділ простору імен вашого плагіна є важливою частиною розробки. Простір імен гарантує, що ваш плагін буде мати дуже низький шанс на конфлікт з іншими плагінами або кодом, що знаходяться на тій же сторінці. Простори назв робить ваше життя простіше, як розробнику плагіна, так як допомагає краще відстежувати ваші методи, події і дані.
методи плагіна
У жодній ситуації не можливо плагіну претендувати на більш ніж один простір імен всередині об'єкта jQuery.fn об'єкта.
Це рекомендується щоб не засмічувати простір імен $ .fn Щоб обійти цю ситуацію ви повинні зібрати всі методи плагіна в літерал об'єкта і називати з (тобто ваші методи будуть викликатися у одного об'єкта)
Цей тип архітектури плагінів дозволяє инкапсулировать всі ваші методи в батьківському об'єкті і викликати з по першій передачі рядка імені методу, а потім вказуючи додаткові папраметри, які можливо потрібні для цього методу. Цей тип інкапсуляції і архітектури є стандартом в співтоваристві розробників плагінів на jQuery і його використовують незліченні кількості плагінів, в тому числі і віджети jQueryUI.
Менш відома особливість метод bind (). який дозволяє реєструвати слухачів подій в нашому просторі імен. Таким чином ми можемо разрегістріровать слухача використовуючи unbind ().
У цьому прикладі, коли плагін инициализируется, він реєструє слухача події зміни вікна під простір імен "tooltype". Пізніше, якщо розробник повинен знищити підказку, ми повинні видалити слухача.
Часто при розробці плагінів вам може знадобитися перевірити инициализирован чи плагін на даному елементі. Використовуючи метод data () ми можемо зручно відстежувати змінні для кожного елемента. Однак замість відстеження купи окремих викликів даних з різними іменами, використовується один літерал об'єкт. Саме через його простір імен йде робота зі змінними.
Використання data допомагає вам відстежувати змінні і стану між викликами методів вашого плагіна. Поділ простору імен в одному об'єкті дозволяє легко отримати доступ до всіх властивостей вашого плагіна з одного об'єкта.
Резюме і практичні поради
Написання jQuery -плагіна дозволяє впровадити в ваш код більшу частину корисних функцій. Повторно використовуваний код дозволяє заощадити час і зробити вашу розробку більш ефективної. Про що потрібно пам'ятати щоразу при написанні плагіна:
- завжди обертати наш плагін (function ($)) (JQuery);
- Не оглядайся this в зайві дужки
- повертати об'єкт this. щоб зберігати можливість роботи з ланцюжками
- замість передачі великого набору параметрів, краще передавати в якості аргументу літерал об'єкта, який модифікує роботу вашого плагіна.- Чи не захаращувати об'єкт jQuery.fn більш ніж одним простором імен в плагіні