Тепер, коли ми розглянули використання плагінів jQuery, абсолютно варто зрозуміти, як їх будувати. Ми вже коротко торкнулися того факту, що ви можете розширити власний об'єкт jQuery, якщо хочете. Так як:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Але це не особливо корисно саме по собі. Для того, щоб створити новий метод для jQuery, який ви можете викликати для набору елементів, вам потрібно буде зробити це так:
$.fn.myMethod = function() ( // I'm a new method ));Це точно те саме, що і використання .prototype на jQuery, і для допитливих ви можете прочитати більше про це тут. Роблячи це таким чином, ми зможемо використовувати цей новий метод для набору елементів. Подібно до:
$("li").myMethod();Ви можете робити все, що завгодно, в цьому методі, але, щоб бути хорошим громадянином, який створює плагіни jQuery, вам слід повернути той самий набір елементів назад із плагіна.
$.fn.myMethod = function() ( // Do some stuff return this; ));Таким чином це буде працювати з ланцюжком. Якщо ви цього не зробите, і хтось спробував щось на зразок:
$ (“Li”). MyMethod (). Show ();
Це зазнало б невдачі, тому що .show()було б покликане по суті ні до чого. Часто плагіни jQuery призначені для циклу по кожному елементу, щоб у вас був прямий доступ до кожного окремого елемента в наборі, щоб робити так, як вам потрібно.
Ще одна річ, яку потрібно зробити, це обернути плагін у вираз функції з негайним викликом та передати jQuery як параметр до нього. Таким чином ви можете використовувати $ всередині коду плагіна більш безпечно. Це пояснюється тим, що в деяких ситуаціях стенограма $ для jQuery недоступна (наприклад, користувач використовував jQuery у “режимі сумісності”).
З обома останніми двома речами на місці структура плагіна стає:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)У скрінкасті ми в підсумку створили простий плагін, щоб додати стрілку в кінець будь-якого елемента.
Дивіться Pen rwasH Кріса Койєра (@chriscoyier) на CodePen
Звичайно, це може ускладнитися, оскільки ваші амбіції зробити більше зростають.