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