Définition du plugin jQuery

Question

Il y a quelque chose à propos de la définition de plugin jQuery "standard" que je n'arrive pas à comprendre, et il semble qu'aucun tutoriel de plugin ne l'explique.
La plupart des définitions plug-ins que j'ai vu sont quelque chose comme:

(function($) { 
    $.extend($.fn, { 
     pluginName: function(options) 
      ... 
    }); 
})(jQuery); 

Maintenant, si je comprends ce que fait la partie function($) { ... } (fait en sorte que fonctionne jquery avec $ même en mode noConflict, crée une méthode « privée », etc.), Je ne comprends pas pourquoi le premier caractère est (, et il se termine par )(jQuery).

Est-il nécessaire de rendre les plugins chaînables? Peut-il être ignoré en toute sécurité?

Modifier

Variation de la même définition:

;(function($) { // why is ; there? 

Answer 1

Il définit simplement une fonction anonyme et l'appelle tout de suite, vous pouvez penser comme ceci:

var f = function($) { /* Code goes here, can use $ */ }; 
f(jQuery); // assings jQuery to $ parameter 

Maintenant, si vous combinez ces deux déclarations en un seul, vous obtenez:

(function($) { /* Code goes here */ })(jQuery); 

C'est tout ce qu'il fait vraiment. Le faire avec une fonction anonyme de cette façon ne polluera pas la portée globale avec des noms de variables inutiles, et vous permet d'utiliser le symbole $ même en mode noConflict.

Answer 2

la construction (..) (jQuery) est la fermeture utilisé pour "insérer" dans l'espace de noms "jquery"

Answer 3

Les lignes de fin sont liées à la création d'une fonction anonyme, puis à l'appel. jQuery est passé, puis aliasé à $ de sorte que votre plugin fonctionne toujours en mode jQuery noConflict ($ ne sera pas défini). La fonction anonyme est telle que notre plugin a une portée locale donc nous ne définissons pas accidentellement les variables globales car elles sont mauvaises.

Un autre point en tant que développeur plugin jQuery moi-même, je suggère de ne pas vraiment le développement de plugins en utilisant ce code: .extend $ (fn,. { plugInName: function (options) ... }); Cela ne fait qu'ajouter une série de fonctions au prototype d'objet jQuery, par exemple vous pouvez appeler $ ('# el'). PluginName(). C'est très bien si votre plugin est extrêmement simple, mais il peut devenir assez difficile à maintenir car votre plugin est toujours défini de manière procédurale plutôt qu'objectif.

Une meilleure approche serait quelque chose comme ceci:

$.pluginName = { 
    init: function(){ 
     var myPlugin = $.pluginName; 

     // Attach jQuery Object Prototype (fn function) 
     $.fn.pluginName = myPlugin.fn; 

     // Attach DomReady 
     $(function(){ 
      myPlugin.domReady(); 
     }); 
    } 
    domReady: function(){}, 
    fn: function(){ 
     // your jQuery object function 
    } 
}); 

// Initialise our Plugin 
$.pluginName.init(); 

Cette approche permet aussi aux gens d'étendre facilement votre plugin si elle tombe court dans une zone ou se fixer code sans toucher le vôtre. Par exemple, je pourrais remplacer votre fonction fn en faisant ceci: $ .pluginName.fn = fixedFnFunction();

Ceci est idéal pour le développement communautaire. Je l'aime aussi car il garde au minimum ce qu'il y a dans le prototype d'objet jQuery, donc moins de frais généraux.

Je suis à la recherche des articles que j'ai utilisés pour référence à ce sujet et je les publierai quand ils seront prêts.