Як створити плагін пошуку і заміни в JQuery

23

Від автора: якщо ви коли-небудь користувалися бібліотекою JQuery, є велика ймовірність того, що ви також використовували будь-які з її плагінів. Просто уявіть собі який-небудь корисний процес, який ви хотіли б автоматизувати через JQuery, і майже зі стовідсотковою ймовірністю ви знайдете плагін для вирішення даної проблеми.

Іноді якщо плагіна можна створити вручну. Це не так складно, як звучить з боку. У цьому уроці я розповім про основні правила, яких необхідно дотримуватися при створенні плагінів, а потім ми створимо свій плагін пошуку і заміни.

Основні моменти

Якщо ви хочете створити свій плагін, вам потрібно знати кілька речей. У цій секції я розповім про всі аспекти по черзі. Спочатку розберемо нижче код:

(function ( $ ) { $.fn.functionName = function() { return this.addClass(«my-class»); }; }( jQuery ));

Перше, що може привернути вашу увагу в плагіні, це this замість $(this). Це пояснюється тим, що $.fn робить functionName частиною одного й того ж JQuery об’єкта, що Ñ– метод .addClass().

Проясню ситуацію. $.fn завжди повертає об’єкт JQuery, в якому зберігаються всі методи JQuery. Якщо ви створювали свої власні методи, то вони також Ñ” частиною цього об’єкта. Так як ваша функція тепер Ñ” частиною об’єкта JQuery, то ви можете просто використовувати this, а не $(this).

Друге, ви повинні спробувати зробити свій плагін ланцюговим – одна з найважливіших особливостей в JQuery, якій розробники постійно користуються. Щоб метод можна було причепити, він повинен повертати об’єкт JQuery. Зробити це можна додаванням в кінець коду return, як я зробив це вище.

І останнє, необхідно захистити символ $ і переконатися, що ваш плагін не буде конфліктувати з іншим кодом JS. Щоб виключити всі можливі конфлікти, необхідно обернути функцію синтаксисом негайного виконання функцій, як показано в коді вище.

Як створити плагін

Зрозумівши основи, можна зосередитися на основному завданні, тобто створення плагіна. Ми почнемо з примітивної версією – ми будемо замінювати оригінальний текст заздалегідь підготовленим текстом. Код:

(function($) { $.fn.findReplace = function(options) { return this.each(function() { $(this).html $(this).html).replace(/Lorem Ipsum/g, «Replacement») ); }); }; }(jQuery));

Для заміни всіх входжень «Lorem Ipsum» текст «Replacement» я використовував регулярний вираз. Відверто кажучи, в такій формі наш плагін повністю даремним. Користувачі повинні мати хоча б можливість знаходити якийсь текст і замінювати його на будь-який інший.

Тут нам приходить на допомогу можливість приймати різні варіанти. Ми дамо користувачам три опції: пошук тексту, заміна тексту і можливість задати фон для заміненого тексту. Цю можливість також можна використовувати для призначення значень за замовчуванням для різних параметрів у разі, якщо вони не були задані користувачем знання або незнання. Код:

var settings = $.extend({ // Значення за замовчуванням. findText: null, replaceText: «», backgroundColor: «#FFF» }, options);

Параметр findText задано в null. Для параметра replaceText найбільш відповідним значенням за замовчуванням буде порожній рядок, так як якщо користувач залишив замінну рядок порожній, може, він так і хоче. Для параметра backgroundColor найкраще підходить колір веб-сторінки, який у більшості випадків білий. Також можна додати пару перевірок і повідомляти користувачу про помилку, якщо він забув задати деякі значення.

Нам доведеться змінити наш плагін, щоб він використовував дані значення. Тепер код виглядає так:

return this.each(function() { var StringToFind = settings.findText; var regExpression = new RegExp(StringToFind, «g»); var replacement = «» + settings.replaceText + ««; $(this).html $(this).html).replace(regExpression, replacement) ); });

Текст для пошуку можна знайти з допомогою setting.findText, значення зберігається в змінної для подальшого використання. Для створення об’єкта регулярного виразу я використовував RegExp конструктор, який можна використовувати для динамічної заміни регулярних виразів.

Глобальний параметр гарантує, що всі входження StringToFind в тексті будуть замінені. Змінний текст я обернув в тег span з вбудованими стилями. І в кінці я оновлюють HTML код елемента, на який була викликана функція findReplace.

У демо можна подивитися наш плагін в дії.

Покращуємо плагін

Наш невеликий плагін прекрасно працює, але можна зробити його ще краще, додавши пару модифікацій. Ми вже додали в нього можливість зміни кольору фону замінного тексту.

Але ось змінити розмір шрифту, додати внутрішні відступи або внести інші зміни користувачі не можуть. Та й практично неможливо додати всі ці опції. Замість цього ми дозволимо користувачеві додавати класи до замененному тексту. Так через CSS вони зможуть самі змінювати текст за своїм бажанням, а наш плагін стане легше.

Для цього потрібно всього лише замінити backgroundColor в нашій ранньої версії на customClass у відповідних місцях.

var settings = $.extend({ findText: null, replaceText: «», backgroundColor: «#FFF» }, options); // тепер буде var settings = $.extend({ findText: null, replaceText: «», customClass: «» }, options); var replacement = «» + settings.replaceText + ««; // тепер буде var replacement = «» + settings.replaceText + ««;

Користувачам вашого плагіна може знадобитися виклик колбек функції після відпрацювання плагіна. Зробити це досить просто. Потрібно всього лише додати опцію completeCallback, а код нижче потурбується про все інше:

if ($.isFunction(settings.completeCallback)) { settings.completeCallback.call(this); }

У коді вище метод .isFunction перевіряє, а передав користувач функцію на виконання. Для виклику користувацької функції, нашу функцію потрібно викликати наступним чином:

$(«a»).findReplace({ findText: «Lorem Ipsum», replaceText: «I was replaced too!», customClass: «match-link», completeCallback: function() { $(‘.notification’).text(‘Executed on the plugin all links’).fadeOut(5000); } });

Скріншот роботи плагіна:

Як створити плагін пошуку і заміни в JQuery

Щоб ви не заплуталися, я викладаю кінцевий код плагіна:

(function($) { $.fn.findReplace = function(options) { var settings = $.extend({ findText: null, replaceText: «», customClass: «», completeCallback: null }, options); return this.each(function() { var StringToFind = settings.findText; var regExpression = new RegExp(StringToFind, «g»); var replacement = «» + settings.replaceText + ««; $(this).html $(this).html).replace(regExpression, replacement) ); if ($.isFunction(settings.completeCallback)) { settings.completeCallback.call(this); } }); }; }(jQuery));

Підсумкове демо

Заключні думки

В JQuery дуже легко створювати плагіни. Всього-то потрібно дотримуватися кількох основних правил, і все буде добре. Я пораджу лише робити свій плагін як можна більш гнучким і легковажним. Ніхто не буде використовувати плагін, що важить 15Кб, який всього-то і робить, що знаходить і замінює текст. Сподіваюся, цей урок вам сподобався, і якщо у вас виникли питання, пишіть про це в коментарях.