Création d'un plugin jQuery, Comment dois-je faire Scopes personnalisés?
Question
Je voudrais créer un plugin jQuery avec quelque chose d'API comme ceci:
$("#chart").pluginName().attr("my_attr");
Au lieu de ces derniers:
$("#chart").pluginName_attr("my_attr");
$.pluginName.attr("#chart", "my_attr");
En fait, au lieu d'avoir à l'espace de noms chaque méthode qui agit semblable à ceux de jQuery, je voudrais « portée » les méthodes à un api personnalisé, où $("#chart).pluginName()
retournerait un objet tel que get
, attr
, find
et quelques autres seraient complètement réécrits.
Je suis sûr que ce n'est pas une convention bien-aimé idée que ça casse (non?), Mais il est plus facile et plus lisible, et probablement plus optimisé, que les deux options ci-dessus. Que pensez-vous?
La solution
J'expérimente avec l'idée.
On dirait que vous pouvez modifier simplement les fonctions de l'objet jQuery que le plug-in reçoit, et le retourner.
Quelque chose comme ceci:
$.fn.tester = function() { // The plugin
this.css = function() { // Modify the .css() method for this jQuery object
console.log(this.selector); // Now it just logs the selector
return this; // Return the modified object
}
return this; // Return the modified object
}
http://jsfiddle.net/EzzQL/1/ (mis à jour d'origine pour remplacer .html () aussi bien)
$.fn.tester = function() {
this.css = function() {
console.log(this.selector); // This one logs the selector
return this;
}
this.html = function() {
alert(this.selector); // This one alerts the selector
return this;
}
return this;
};
// Because .css() and .html() are called after .tester(),
// they now adopt the new behavior, and still return a jQuery
// object with the rest of the methods in tact
$('#test1').tester().css().html().animate({opacity:.3});
// .css() and .html() still behave normally for this one
// that doesn't use the plugin
$('#test2').css('backgroundColor','blue').html('new value');
EDIT:
Par ailleurs, si vous allez mettre en cache les éléments auxquels les méthodes personnalisées devraient être appliquées, vous pouvez .apply()
les méthodes avant de les utiliser.
Pour construire l'exemple ci-dessus:
var $test1 = $('#test1'); // Cache the elements
$.fn.tester.apply($test1,[this]); // apply() the new methods
$test1.css().html().animate({opacity:.3}); // Use the new methods