Développer un plugin jQuery qui renvoie un objet donné, au lieu de l'objet jQuery lui-même!

Question

Tenir compte du code de base suivant:

(function($) { 
    $.fn.myPlugin = function(settings) { 
     return this.each(function() { 
      //whatever 
     }); 
    }; 
}); 

Le plugin retourne un objet jQuery. La question est de savoir comment suis-je censé écrire un plug-in qui retourne un objet personnalisé afin que je puisse faire quelque chose comme ceci:

var api = $('div.myelement').myPlugin(); 
api.onMyEventName(function(e, whateverParam) { 
    //whatever 
}); 

Il serait très apprécié si vous pouvez écrire quelques lignes de code qui me décrit comment pour ce faire, comment appeler la fonction onMyEventName sur un objet API personnalisé ...

Merci.

Answer 1

(function($) { 
    function MyApi($this, settings) { 
     this.$this = $this; 
     this.settings = settings; 
    }; 

    MyApi.prototype.output = function (val) { 
     // use this.$this to access the original jQuery object 

     return this.settings[val]; 
    }; 

    $.fn.myPlugin = function(settings) { 
     return new MyApi(this, settings); 
    }; 
}); 

Remarque que nous avons passé this de $.fn.myPlugin() dans le constructeur MyApi; Cela vous permet d'accéder à l'objet jQuery auquel myPlugin() a été appelé à l'origine dans les méthodes MyApi.

Vous pouvez également faire la même chose en utilisant la syntaxe littérale:

(function($) { 
    $.fn.myPlugin = function(settings) { 
     return { 
      settings: settings, 
      output: function (val) { 
       // use this.$this to access the original jQuery object 

       return this.settings[val]; 
      }, 
      $this: this 
     }; 
    }; 
}); 

Ensuite;

var something = $('#something').myPlugin({ 
    val: 'Lemon' 
}); 

alert(something.output('val')); // Lemon 

... encore une fois, nous avons capturé la valeur de this (l'objet jQuery) dans une propriété $this sur le nouvellement construit objecté, pour accéder à l'objet jQuery d'origine.

Answer 2

Il existe un great article by Hector Virgen détaillant une solution possible (également utilisée dans bootstrap) pour répondre à cette question.

Le moment clé stocke essentiellement votre objet API dans la section de données du nœud:

$.fn.myplugin = function() { 
    return $.each(function() { 
     ... 
     myplugin = new MyPlugin(this) 
     ... 
     $(this).data('myplugin', myplugin); 
    } 
} 

Après cela, les utilisateurs peuvent facilement accéder à l'objet par:

$(this).data("myplugin") 

Une extension peut-être utile à cette solution pourrait définir une méthode mypluginapi comme un raccourci, pour accéder à votre objet API:

$.fn.mypluginapi = function() { 
    return $(this).myplugin().data('myplugin') 
}