Création de plugins jQuery: explication de "this" keyword?

Question

J'ai codé avec jQuery depuis environ 2 ans mais je ne l'ai jamais fait dans un plugin. J'essaye de changer ça. J'ai trouvé quelques sites qui expliquent comment créer un plugin et je comprends les bases.

La partie que je ne comprends pas est l'utilisation du mot-clé this. Voici un exemple simple plugin:

(function($){ 
    $.fn.myPlugin = function(options) 
    { 
    // Do whatever 
    return this.each(function(){ 
     element = $(this); 
    }); 
    } 
    $.fn.myPlugin.init = function() 
    { 
    // Initiate plugin 
    } 
})(jQuery); 

Sur la 5ème ligne de mon code, je this.each. Dans ce cas, le mot clé this fait référence à tous les éléments du sélecteur. La ligne suivante utilise $(this) qui est l'élément actuel, de la même manière que si je le fais dans un .click(function(){$(this).hide();}).

Maintenant, dans la logique OO, nous avons généralement un mot-clé this pour faire référence aux fonctions ou propriétés internes. Si dans $.fn.myPlugin je veux appeler $.fn.myPlugin.init(), je m'attendais à être en mesure de faire quelque chose comme this.init() mais cela ne semble pas fonctionner.

En outre, je m'attendais à être en mesure de définir les propriétés de classe d'une manière similaire, quelque chose comme this.myVariable = "my value".

Donc, si quelqu'un peut expliquer tout ce qui me manque pour comprendre le concept de plugin avec jQuery, ou pointez-moi dans la bonne direction avec un lien pertinent, j'apprécierais l'aide! Si mes explications ne sont pas assez claires, faites le moi savoir et je vais essayer de faire mieux, mais c'est un peu flou dans mon esprit en ce moment.

Answer 1

Avant d'entrer dans le .each(), this est en fait l'objet jQuery qui contient l'ensemble des éléments DOM correspondants.

Si vous souhaitez appeler cette fonction de cette manière, vous devez l'appeler dans la portée à laquelle il a été ajouté. $.fn.myPlugin.

this.myPlugin.init(); 

ou à l'intérieur de chaque comme ceci:

$(this).myPlugin.init(); 

Ou directement comme ceci:

$.fn.myPlugin.init();