# 27: Vytvoření jednoduchého pluginu jQuery - Triky CSS

Anonim

Nyní, když jsme se podívali na používání pluginů jQuery, stojí za to pochopit, jak je také sestavit. Již jsme se krátce dotkli skutečnosti, že můžete nativní objekt jQuery rozšířit, pokud chcete. Stejně jako:

$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();

Ale to není samo o sobě nijak zvlášť užitečné. Chcete-li vytvořit novou metodu pro jQuery, kterou můžete volat na sadu prvků, budete to muset udělat takto:

$.fn.myMethod = function() ( // I'm a new method ));

Je to přesně to samé jako použití .prototype na jQuery a pro zvědavé si o tom můžete přečíst více zde. Dělat to tímto způsobem znamená, že budeme moci použít tuto novou metodu na sadu prvků. Jako:

$("li").myMethod();

V této metodě můžete dělat, co chcete, ale abyste byli dobrým občanem budování pluginu jQuery, měli byste vrátit stejnou sadu prvků zpět z pluginu.

$.fn.myMethod = function() ( // Do some stuff return this; ));

Takto to bude fungovat s řetězením. Pokud to neuděláte a někdo zkusil něco jako:

$ („Li“). MyMethod (). Show ();

To by selhalo, protože .show()by bylo vyvoláváno v podstatě nic. Pluginy jQuery jsou často vyráběny tak, aby smyčkovaly každý prvek, takže máte přímý přístup ke každému jednotlivému prvku v sadě, abyste mohli dělat, co potřebujete.

Další věcí, kterou je dobré udělat pro občana, je zabalit plugin do výrazu funkce Immediately Invoked Function a předat jQuery jako parametr. Tímto způsobem můžete bezpečněji používat $ uvnitř kódu pluginu. Je to proto, že v některých situacích není zkratka $ pro jQuery k dispozici (např. Uživatel použil jQuery v „režimu kompatibility“).

Když jsou obě tyto dvě poslední věci na místě, stane se struktura pluginu:

(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)

V screencastu jsme skončili vytvořením jednoduchého pluginu pro přidání šipky na konec libovolného prvku.

Podívejte se na Pen rwasH od Chrisa Coyiera (@chriscoyier) na CodePen

Samozřejmě to může být složitější, protože vaše ambice dělat více stoupá.