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

380

Від автора: якщо ви коли-небудь користувалися бібліотекою 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Кб, який всього-то і робить, що знаходить і замінює текст. Сподіваюся, цей урок вам сподобався, і якщо у вас виникли питання, пишіть про це в коментарях.