Comprendre un squelette de plugin jQuery

Question

A a website, j'ai trouvé le code suivant pour faire un plugin jQuery:

(function($){ 
    // Our code here... 
})(jQuery); 

Je ne comprends pas comment le code ci-dessus fonctionne. Ce que je comprends, c'est que le code s'exécute immédiatement parce que le dernier () en function(){}(). Donc, tout le code dit qu'il s'agit d'une fonction anonyme qui est exécutée immédiatement.

Mais je ne comprends pas pourquoi l'emballage doit passer jQuery et que l'intérieur a besoin de $ pour être passé. D'après ma compréhension, $ est un alias à jQuery, signifiant pratiquement la même chose. Quelle est la signification de $ et jQuery ici? Comment fonctionne le code global en tant que plugin jQuery?

Answer 1

jQuery est le paramètre réel. $ est le paramètre formel. Vous pourriez très bien écrire:

(function(ForAFewDollarsLess){ 
    ForAFewDollarsLess('#myId') ... 
})(jQuery); 

Une des raisons est la commodité - c'est court. Vous utilisez peut-être jQuery en mode noConflict avec d'autres bibliothèques. Peut-être taper jQuery tout le temps est un tracas, ou d'autres plugins suivent de mauvaises pratiques et en utilisant $ au lieu de jQuery. De toute façon, vous pouvez utiliser une fonction d'auto-appel comme celle ci-dessus pour résoudre le problème.

Answer 2

Vous passez l'alias $ en fonction de sorte qu'il sera toujours renvoyé à JQuery réellement. Si d'autres bibliothèques sont incluses dans une certaine page telle que le prototype qui utilise également $, votre code ne sera pas rompu et fonctionnera correctement.

Answer 3

Afin d'être aussi compatible avec les autres bibliothèques, jQuery offre .noConflict(). Cela supprime l'alias $ de l'espace de noms global afin qu'une autre bibliothèque puisse l'utiliser si vous le souhaitez.

Si vous ne voulez pas que votre plugin fonctionne avec .noConflict(), ce n'est pas nécessaire.

Utilisation de la fermeture permet également de ne pas polluer la « portée mondiale » avec l »

Answer 4

var Gnarf a la pollution de portée mondiale de vars, je voudrais ajouter des fonctions aussi bien.

Vous pouvez utiliser une fonction d'assistance comme:

(function($){ 
    // Our code here... 
    $.fn.myPluginFunction = function() { 
    ... 
    var x = foobalizeTheFrobmaster(this.offset()) 
    ... 
    } 

    function foobalizeTheFrobmaster(pos) { 
    // do something useful 
    return something; 
    } 
})(jQuery); 

De cette façon, la fonction interne foobalizeTheFrobmaster() est complètement cachée dans notre fermeture.