Que signifie (function ( $ ) {}) (jQuery);?
je commence juste à écrire des plugins jQuery. J'ai écrit trois petits plugins mais j'ai simplement copié la ligne dans tous mes plugins sans vraiment savoir ce que cela signifie. Quelqu'un peut-il m'en dire un peu plus sur ces? Peut-être une explication sera-t-elle utile un jour quand on écrira un cadre:)
Qu'est-ce que ça fait? (Je sais qu'il s'étend jQuery, mais est-il autre chose intéressante à savoir à ce sujet)
(function($) {
})(jQuery);
Quelle est la différence entre les deux façons d'écrire un plugin:
Type 1:
(function($) {
$.fn.jPluginName = {
},
$.fn.jPluginName.defaults = {
}
})(jQuery);
Type 2:
(function($) {
$.jPluginName = {
}
})(jQuery);
Type 3:
(function($){
//Attach this new method to jQuery
$.fn.extend({
var defaults = {
}
var options = $.extend(defaults, options);
//This is where you write your plugin's name
pluginname: function() {
//Iterate over the current set of matched elements
return this.each(function() {
//code to be inserted here
});
}
});
})(jQuery);
je pourrais être loin d'ici et peut-être tous signifient la même chose. Je suis confus. Dans certains cas, ce ne semble pas fonctionner dans un plugin que j'écrivais en utilisant le Type 1. Jusqu'à présent, de Type 3 semble la plus élégante pour moi, mais j'aimerais connaître les autres.
6 réponses
tout d'abord, un bloc de code qui ressemble à (function(){})() est simplement une fonction qui est exécutée en place. Nous allons décomposer un peu.
1. (
2. function(){}
3. )
4. ()
ligne 2 est une fonction simple, enveloppée entre parenthèses pour dire au runtime de retourner la fonction à la portée de parent, une fois qu'il est retourné la fonction est exécutée en utilisant la ligne 4, peut-être que la lecture à travers ces étapes aidera
1. function(){ .. }
2. (1)
3. 2()
vous pouvez voir que 1 est la déclaration, 2 est le retour la fonction et 3 ne font qu'exécuter la fonction.
exemple d'utilisation.
(function(doc){
doc.location = '/';
})(document);//This is passed into the function above
quant aux autres questions sur les plugins:
Type 1: ce n'est pas un plugin, c'est un objet passé comme une fonction, car les plugins ont tendance à être des fonctions.
Type 2: ce n'est pas non plus un plugin car il n'étend pas l'objet $.fn . C'est juste une extension du jQuery core, bien que le résultat est le même. C'est si vous voulez ajouter des fonctions de traversée telles que toArray et ainsi de suite.
Type 3: C'est la meilleure méthode pour ajouter un plugin, le prototype étendu de jQuery prend un objet tenant votre nom et fonction de plugin et l'ajoute à la bibliothèque de plugin pour vous.
au niveau le plus élémentaire, quelque chose de la forme (function(){...})() est une fonction littérale qui est exécutée immédiatement. Cela signifie que vous avez défini une fonction et que vous l'appelez immédiatement.
ce formulaire est utile pour masquer et encapsuler des informations puisque tout ce que vous définissez à l'intérieur de cette fonction reste local à cette fonction et inaccessible du monde extérieur (sauf si vous l'exposez spécifiquement - généralement via un objet retourné littéral).
une variante de cette forme de base est ce que vous voyez dans les plugins jQuery (ou dans ce modèle de module en général). D'où:
(function($) {
...
})(jQuery);
ce qui signifie que vous faites référence à l'objet jQuery , mais il est connu comme $ dans le cadre de la fonction littérale.
Type 1 n'est pas vraiment un plugin. Vous assignez simplement un objet littéral à jQuery.fn . Typiquement vous assignez une fonction à jQuery.fn comme les plugins sont généralement juste des fonctions.
Type 2 est similaire au Type 1; vous ne créez pas vraiment un plugin ici. Vous ajoutez simplement un objet littéral à jQuery.fn .
Type 3 est un plugin, mais ce n'est pas la meilleure ou la plus facile façon d'en créer un.
pour en savoir plus à ce sujet, jetez un coup d'oeil à cette" question similaire et réponse . Aussi, cette page donne quelques détails sur la création de plugins.
un peu d'aide:
// an anonymous function
(function () { console.log('allo') });
// a self invoked anonymous function
(function () { console.log('allo') })();
// a self invoked anonymous function with a parameter called "$"
var jQuery = 'I\'m not jQuery.';
(function ($) { console.log($) })(jQuery);Type 3, pour travailler devrait ressembler à ceci:
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin's name
'pluginname': function(_options) {
// Put defaults inline, no need for another variable...
var options = $.extend({
'defaults': "go here..."
}, _options);
//Iterate over the current set of matched elements
return this.each(function() {
//code to be inserted here
});
}
});
})(jQuery);
Je ne suis pas sûr de savoir pourquoi quelqu'un utiliserait l'extension juste en positionnant directement la propriété dans le prototype jQuery, il fait la même chose exacte seulement dans plus d'opérations et plus de désordre.
petit ajout à l'explication
cette structure (function() {})(); s'appelle IIFE (expression de fonction immédiatement invoquée), elle sera exécutée immédiatement, lorsque l'interpréteur atteindra cette ligne. Donc quand vous écrivez ces lignes:
(function($) {
// do something
})(jQuery);
cela signifie que l'interpréteur invoquera cette fonction immédiatement, et passera jQuery comme paramètre, qui sera utilisé à l'intérieur de la fonction comme $ .
en Fait, cet exemple m'a aidé à comprendre ce que signifie (function($) {})(jQuery); ?
Considérez ceci:
// Clousure declaration (aka anonymous function)
var $f = function (x) { return x*x; };
// And use of it
console.log($f(2)); // Gives: 4
// An inline version (immediately invoked)
console.log((function (x) { return x*x; })(2)); // Gives: 4
et maintenant:
jQuery est une variable contenant l'objet jQuery.
$ est un nom variable comme les autres ( a , $b , a$b etc. et il n'a pas de signification particulière comme dans PHP).
var $f = function ($) { return $*$; };
var jQuery = 2;
console.log($f(jQuery)); // Gives: 4
// An inline version
console.log((function ($) { return $*$; })(jQuery)); // Gives: 4