Maintenant que nous avons examiné l'utilisation des plugins jQuery, il est absolument utile de comprendre comment les construire également. Nous avons déjà brièvement évoqué le fait que vous pouvez étendre l'objet jQuery natif si vous le souhaitez. Juste comme:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Mais ce n'est pas particulièrement utile en soi. Afin de créer une nouvelle méthode pour jQuery que vous pouvez appeler sur un ensemble d'éléments, vous devrez le faire comme ceci:
$.fn.myMethod = function() ( // I'm a new method ));C'est exactement la même chose que d'utiliser .prototype sur jQuery, et pour les curieux, vous pouvez en savoir plus ici. Cela signifie que nous pourrons utiliser cette nouvelle méthode sur un ensemble d'éléments. Aimer:
$("li").myMethod();Vous pouvez faire tout ce que vous voulez à côté de cette méthode, mais pour être une sorte de bon citoyen de construction de plugins jQuery, vous devez renvoyer le même ensemble d'éléments hors du plugin.
$.fn.myMethod = function() ( // Do some stuff return this; ));De cette façon, cela fonctionnera avec le chaînage. Si vous ne faites pas cela, et que quelqu'un a essayé quelque chose comme:
$ («Li»). MaMéthode (). Show ();
Cela échouerait, car on .show()ne ferait appel à rien. Souvent, les plugins jQuery sont conçus pour boucler sur chaque élément afin que vous ayez un accès direct à chaque élément individuel de l'ensemble pour faire ce dont vous avez besoin.
Une autre bonne chose à faire est d'envelopper un plugin dans une expression de fonction immédiatement invoquée et de lui passer jQuery en tant que paramètre. De cette façon, vous pouvez utiliser le $ dans le code de votre plugin plus en toute sécurité. C'est parce que dans certaines situations, le raccourci $ pour jQuery n'est pas disponible (par exemple, un utilisateur a utilisé jQuery en «mode de compatibilité»).
Avec ces deux dernières choses en place, une structure de plugin devient:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Dans le screencast, nous avons fini par créer un simple plugin pour ajouter une flèche à la fin de n'importe quel élément.
Voir le Pen rwasH de Chris Coyier (@chriscoyier) sur CodePen
Bien sûr, cela peut devenir plus complexe à mesure que votre ambition de faire plus augmente.