Nu we hebben gekeken naar het gebruik van jQuery-plug-ins, is het absoluut de moeite waard om te begrijpen hoe u ze ook kunt bouwen. We hebben het al kort gehad over het feit dat u het native jQuery-object kunt uitbreiden als u dat wilt. Net als:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Maar dat is op zichzelf niet erg handig. Om een nieuwe methode voor jQuery te maken die je op een set elementen kunt aanroepen, moet je het als volgt doen:
$.fn.myMethod = function() ( // I'm a new method ));Dit is precies hetzelfde als het gebruik van .prototype op jQuery, en voor nieuwsgierigen kun je hier meer over lezen. Als je het op die manier doet, kunnen we die nieuwe methode op een aantal elementen gebruiken. Leuk vinden:
$("li").myMethod();Je kunt doen wat je wilt met die methode, maar om een goede jQuery-plug-in te bouwen, moet je dezelfde set elementen terug uit de plug-in halen.
$.fn.myMethod = function() ( // Do some stuff return this; ));Op die manier werkt het met chaining. Als je dat niet doet, en iemand heeft zoiets geprobeerd als:
$ ("Li"). MyMethod (). Show ();
Dat zou mislukken, omdat .show()er in wezen niets zou worden opgeroepen. Vaak zijn jQuery-plug-ins zo gemaakt dat ze over elk element heen lopen, zodat je directe toegang hebt tot elk afzonderlijk element in de set om te doen wat je nodig hebt.
Een ander goed ding om te doen is een plug-in in een onmiddellijk aangeroepen functie-expressie verpakken en jQuery als parameter eraan doorgeven. Op die manier kunt u de $ in uw plug-in-code veiliger gebruiken. Dat komt omdat in sommige situaties de $ steno voor jQuery niet beschikbaar is (bijv. Een gebruiker heeft jQuery gebruikt in "compatibiliteitsmodus").
Met beide laatste twee dingen op hun plaats, wordt een plug-in-structuur:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)In de screencast hebben we uiteindelijk een eenvoudige plug-in gebouwd om een pijl toe te voegen aan het einde van elk element.
Zie de Pen rwasH door Chris Coyier (@chriscoyier) op CodePen
Het kan natuurlijk ingewikkelder worden naarmate uw ambitie om meer te doen groter wordt.