Advertisement
  1. Code
  2. jQuery
Code

Створення плаґіна для пошуку та заміни тексту

by
Difficulty:IntermediateLength:ShortLanguages:

Ukrainian (українська мова) translation by Lina (you can also view the original English article)

Якщо ви колись використовували jQuery, то, скоріш за все, ви також використовували щонайменше один з його численних плаґінів. Просто подумайте про будь-яку корисну функціональну можливість, що хотіли би реалізувати в jQuery, і я майже впевнений, що для цього вже існує плаґін.

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

Базові знання

Існує декілька моментів, які ви повинні знати при розробленні плаґінів. У цьому розділі ми їх послідовно розберемо. Подивимося на наступний фрагмент коду:

По-перше, ви ймовірно помітили, помітили, що я використовую у нашому плаґіні this, а не $(this). Я це роблю, оскільки завдяки використанню $.fn functionName приєднується до того ж самого об'єкта jQuery, що й метод .addClass() .

Давайте розберем цей момент докладніше, щоб вам стало зрозуміліше. В результаті виклику $.fn (* jQuery.prototype – Примітка  перекладача) завжди повертається об'єкт jQuery, у якому містяться всі методи, доступні для використання в jQuery. Якщо ви коли-небудь будете створювати ваші власні методи, то вони також стануть частиною цього об'єкта. Оскільки наша функція тепер є частиною об'єкта jQuery, то ми можемо використовувати this замість $(this).

По-друге, вам варто спробувати додати для плаґіна можливість зчеплення його методів. Це одна з головних можливостей jQuery, яку розробники постійно використовують. Для того щоб додати для методу можливість зчеплення, він повинен повертати оригінальний об'єкт jQuery. Це можна виконати за допомогою додавання return, як я і зробив вище у коді.

І, нарешті, вам слід обмежити область видимості синоніма $ (* для jQuery – Примітка  перекладача) для того, щоб при використанні вашого плаґіна з іншим кодом на JavaScript не виникало ніяких конфліктних ситуацій. Для цього вам необхідно лише обернути функцію у функцію-вираз негайного виклику саме так, як у коді вище.

Створюємо плаґін

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

Я використовую регулярний вираз для заміни всіх фрагментів «Lorem Ipsum» (* назва тимчасового тексту, який дизайнер додає замість головного до макету сторінки, щоб зосередитися на графічних елементах зверстаного листа – Примітка  перекладача) «Replacement» (* заміна – Примітка перекладача). Правду кажучи, у цьому вигляді наш плаґін зовсім безкорисний. Щонайменше користувачі повинні мати можливість пошуку фрагмента тексту та його заміни іншим текстом на їх вибір.

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

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

Для використання цих значень нам необхідно буде також  змінити код нашого базового плаґіна. Тепер код нашого плаґіна повинен бути наступним:

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

За допомогою використання спеціального модифікатора g (* вмикає глобальний режим, у якому шаблон застосовується до всього рядка, тобто пошук не закінчується після знаходження першого збігу – Примітка перекладача), гарантується, що відбудеться заміна всіх наявних значень StringToFind. Я помістив текст для заміни до елементу span з рядковим стильовим оформленням. І, нарешті, я оновив код HTML елементу, для якого викликається наша функція findReplace.

У цій демоверсії наш плаґін показано у дії.

Удосконалюємо плаґін

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

Проте, якщо користувач вирішить змінити розмір шрифту, додати невеликий відступ чи додати будь-які інші зміни, то не зможе. Також неможливо надати всі ці опції. Ми збираємося надати користувачеві можливість додавання класу за їх вибором до нових фрагментів. Завдяки цьому вони зможуть самостійно вносити зміни до CSS, а також наш плаґін буде невеликого розміру.

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

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

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

Нижче наведено скриншот нашого плаґіна у дії.

Наводжу весь код нашого плаґіна, щоб ви не заплуталися з фрагментами.

Наша оригінальна демоверсія.

Завершення

Створити плаґін для jQuery дуже просто. Для цього вам необхідно дотримуватися декількох загальних принципів.

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

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

Що ж, я сподіваюся, що вам сподобався цей посібник, і  якщо ви маєте питання стосовно нього, дайте мені знати в коментарях нижче.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.