1. Placez tout votre code à l'intérieur d'une fermeture
C'est celle que j'utilise le plus. Mais parfois, les méthodes en dehors de la fermeture ne peuvent pas être appelées.
Cependant, le code de votre plugin ne sert qu'à votre propre plugin, donc ce problème n'existe pas. Vous pouvez placer tout le code à l'intérieur d'une fermeture. Et les méthodes devraient probablement être placées dans les méthodes du prototype.
(function($) {
//code here
})(jQuery);
2. Fournissez des options par défaut pour le plugin
Votre plugin devrait avoir certaines options que les développeurs peuvent définir, il est donc nécessaire de fournir des options par défaut pour la restauration. Vous pouvez définir ces options via la fonction extend de jQuery :
var defaultSettings = { mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2' };
settings = $.extend({}, defaultSettings, settings || {});
3. Retournez un élément
JavaScript/jQuery possède une excellente fonctionnalité de chaînage des méthodes, nous ne devrions donc pas casser cette fonctionnalité et toujours retourner un élément à partir des méthodes. Je respecte cela dans chacun de mes plugins jQuery.
$.fn.wPaint = function(settings) {
return this.each(function() {
var elem = $(this);
//run some code here
}
}
4. Placez le code à exécution unique en dehors de la boucle principale
Celui-ci est important mais souvent ignoré. En clair, si vous avez un morceau de code qui est un ensemble de valeurs par défaut et qui ne doit être instancié qu'une seule fois, et non à chaque fois que votre fonction plugin est appelée, vous devriez placer ce code en dehors de la méthode du plugin. Cela rend votre plugin plus efficace et économise de la mémoire.
var defaultSettings = {
mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2' };
settings = $.extend({}, defaultSettings, settings || {});
$.fn.wPaint = function(settings) {
return this.each(function() {
var elem = $(this);
//run some code here
}
}
Vous pouvez remarquer que "defaultSettings" dans le code ci-dessus est complètement en dehors de la méthode du plugin. Comme ce code se trouve à l'intérieur de la fermeture, nous n'avons pas à nous soucier de l'écrasement de ces variables.
5. Pourquoi mettre en place le prototypage de classe
Les méthodes et les fonctions, qui sont la chair et le sang de votre code, doivent être placées à l'intérieur des fonctions prototype. Il y a deux raisons :
- Cela peut économiser beaucoup de mémoire, car vous n'avez pas à créer ces méthodes de façon répétée.
- Référencer une méthode existante est beaucoup plus rapide que d'en créer une nouvelle.
En termes simples, le prototype étend un objet et lui fournit des méthodes sans avoir à instancier ces méthodes dans chaque objet. Cela rend également votre code plus organisé et plus efficace. Une fois que vous vous serez habitué à ce style de développement, vous constaterez qu'il vous fait gagner beaucoup de temps dans vos futurs projets.
6. Comment mettre en place le prototypage de classe
La mise en place d'une méthode prototype comporte deux parties. Tout d'abord, nous devons créer notre définition de classe initiale, ce qui, dans la plupart des cas, signifie créer un objet. Cette définition contient les parties qui diffèrent pour chaque instance d'objet. Dans mon Paint jQuery Plugin, je l'ai écrit comme ceci :
function Canvas(settings) {
this.settings = settings;
this.draw = false;
this.canvas = null;
this.ctx = null;
return this;
}
Ajoutez maintenant les méthodes globales :
Canvas.prototype = {
generate: function() {
//generate code
}
}L'essentiel ici est de rendre les méthodes prototype génériques, tandis que les données sont propres à chaque instance et peuvent être référencées avec "this".7. Utiliser l'objet "this"
En utilisant "$this", nous pouvons transmettre la bonne référence à d'autres fermetures. Nous pouvons également avoir besoin de transmettre la référence $this à d'autres méthodes. Notez que le nom $this peut être modifié ; n'importe quel nom de variable fonctionne.
Canvas.prototype = {
generate: function() {
//some code
var $this = this;
var buton = //...some code
button.click(function(){
//using this will not be found since it has it's own this
//use $this instead.
$this.someFunc($this);
});
},
someFunc: function($this) {
//won't know what "this" is.
//use $this instead passed from the click event
}
}
8. Enregistrez les paramètres dans chaque objet
J'enregistre toujours les paramètres dans chaque objet, puis je travaille sur ses propres paramètres. De cette façon, vous n'avez pas à passer de nombreux paramètres entre différentes méthodes. Placer ces variables dans l'objet facilite également leur appel ailleurs.
function Canvas(settings) {
this.settings = settings;
return this;
}
9. Séparez la logique de vos méthodes de prototype
C'est peut-être un principe de base. Lorsque vous hésitez à fournir une méthode, vous pouvez vous demander : « Si quelqu'un d'autre veut réécrire cette méthode, votre code peut-il répondre à ses besoins ? » ou « Quelle serait la difficulté pour quelqu'un d'autre d'écrire cette méthode ? » Bien sûr, c'est une question d'équilibre de flexibilité. Voici les méthodes de mon Color Picker jQuery Plugin à titre de référence :
generate() appendColors() colorSelect() colorHoverOn() colorHoverOff() appendToElement() showPalette() hidePalette()
10. Fournissez des options Setter/Getter
Celle-ci n'est pas obligatoire, mais je trouve que tous mes plugins l'utilisent. Car il suffit de très peu de code pour offrir aux autres une fonctionnalité dont ils pourraient avoir besoin.
En fait, il suffit de permettre aux développeurs de définir ou de récupérer les valeurs qui existent déjà sur l'élément :
var lineWidth = $("#container").wPaint("lineWidth"); $("#container").wPaint("lineWidth", "5");