10 conseils pour vous aider à créer de meilleurs plugins jQuery_jquery

Cet article résume 10 suggestions pour vous aider à créer de meilleurs plug-ins jQuery. Partagez-le avec tout le monde pour votre référence. Les instructions spécifiques sont les suivantes :

Après avoir développé de nombreux plug-ins jQuery, j'ai lentement compris un ensemble de structures et de modèles relativement standards pour développer des plug-ins jQuery. De cette façon, je peux copier et coller la plupart de la structure du code et me concentrer uniquement sur le code logique principal. L’utilisation des mêmes modèles de conception et de la même architecture facilite également la correction des bogues ou le développement secondaire. Une architecture éprouvée peut garantir que mes plug-ins ne poseront pas de problèmes majeurs, que le plug-in soit simple ou complexe. Je partage ici 10 expériences que j’ai résumées.

1. Mettez tout votre code à l'intérieur de la fermeture

C'est celui que j'utilise le plus. Mais parfois, les méthodes extérieures à la fermeture ne peuvent pas être appelées.

Mais le code de votre plug-in ne sert que votre propre plug-in, donc ce problème n'existe pas. Vous pouvez mettre tout le code dans la fermeture.

La méthode devrait probablement être placée à l'intérieur de la méthode Prototype.

(function($) {  
  //code here 
})(jQuery);

2. Fournir des options par défaut pour les plug-ins

Votre plug-in doit avoir certaines options que les développeurs peuvent définir, il est donc nécessaire de fournir une option de restauration par défaut. Vous pouvez définir ces options via la fonction d'extension de jQuery :

var defaultSettings = {   mode      : 'Pencil',   
               lineWidthMin  : '0',   
               lineWidthMax  : '10',   
               lineWidth    : '2' }; 
settings = $.extend({}, defaultSettings, settings || {});

3. Renvoyez un élément en utilisant

JavaScript/jQuery a une fonctionnalité intéressante : il peut effectuer une mise en cascade de méthodes, nous ne devrions donc pas détruire cette fonctionnalité et toujours renvoyer un élément dans la méthode. Je suis cette règle dans chaque plugin jQuery que je crée.

$.fn.wPaint = function(settings) {  
 return this.each(function() { 
    var elem = $(this);    
  //run some code here   
 } 
}

4. Placez le code à usage unique en dehors de la boucle principale

C'est très important, mais souvent ignoré. En termes simples, si vous disposez d'un morceau de code qui contient un ensemble de valeurs par défaut et qui ne doit être instancié qu'une seule fois, plutôt que d'être instancié à chaque fois que votre fonction de plug-in est appelée, vous devez placer ce code en dehors du plug-in. méthode. Cela permet à votre plug-in de fonctionner plus efficacement et d'économiser 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 les "defaultSettings" dans le code ci-dessus sont complètement en dehors de la méthode du plug-in. Puisque ces codes sont à l'intérieur de la fermeture, nous n'avons pas à nous soucier du remplacement de ces variables.

5. Pourquoi mettre en place le prototypage de classe

En tant que chair et sang de votre code, les méthodes et fonctions doivent être placées dans la fonction prototype. Il y a deux raisons :

◆ Cela peut économiser beaucoup de mémoire car vous n'avez pas besoin de créer ces méthodes à plusieurs reprises.

◆ Il est bien plus rapide de référencer une méthode toute faite que de la recréer.

En termes simples, le prototype étend un objet et lui fournit des méthodes sans instancier ces méthodes dans chaque objet. Cela rend également votre code plus organisé et efficace. Une fois habitué à cette façon de développer, vous constaterez qu’elle vous fait gagner beaucoup de temps sur vos futurs projets.

6. Comment configurer le prototypage de classe

La mise en place d'une méthode prototype comporte deux parties. Nous devons d’abord créer notre définition de classe initiale, ce qui signifie dans la plupart des cas créer un objet. Cette définition contient des parties différentes pour chaque instance d'objet. Dans mon plugin Paint jQuery, j'ai écrit ceci :

function Canvas(settings) {  
 this.settings = settings;   
 this.draw = false;   
 this.canvas = null;    
   this.ctx = null;  
  return this;
}

Ajoutons la méthode globale :

Canvas.prototype = {   
 generate: function() { 
    //generate code  
 } 
}

La clé ici est de rendre la méthode prototype universelle, mais les données sont uniques à chaque instance et peuvent être référencées avec "this".

7. Utilisez l'objet « this »

En utilisant "$this", nous pouvons transmettre la référence correcte à d'autres fermetures. Nous devrons peut-être également transmettre $this référence à d’autres méthodes. Il convient de noter que le nom $this peut être modifié et que n'importe quel nom de variable peut être utilisé.

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'ai enregistré mes propres paramètres dans chaque objet, puis j'ai manipulé ses propres paramètres. De cette façon, vous n'avez pas besoin de transmettre de nombreux paramètres dans différentes méthodes. Placer ces variables dans un objet vous permet également d'appeler plus facilement ces variables à d'autres endroits.

function Canvas(settings) {  
 this.settings = settings;  
  return this; 
}

9. Séparez la logique de votre méthode Prototype

Cela peut être un principe de base. Lorsque vous hésitez à fournir une méthode, vous pouvez vous demander « Si quelqu'un d'autre devait remplacer cette méthode, votre code répondrait-il à ses besoins ? » ou « Dans quelle mesure serait-il difficile pour quelqu'un d'autre d'écrire cette méthode ? ». Bien sûr, c'est une question de flexibilité. Voici une liste de mes méthodes de plug-in jQuery Color Picker, vous pouvez vous y référer :

generate() 
appendColors() 
colorSelect() 
colorHoverOn() 
colorHoverOff() 
appendToElement() 
showPalette() 
hidePalette()

10. Fournir des options Setter/Getter

Celui-ci n'est pas nécessaire, mais j'ai constaté que tous mes plug-ins incluent celui-ci. Parce qu’il suffit d’un peu de code pour fournir aux autres une fonction dont ils pourraient avoir besoin.

En gros, nous devons simplement permettre aux développeurs de définir ou d'obtenir la valeur existante d'un élément :

var lineWidth = $("#container").wPaint("lineWidth"); 
$("#container").wPaint("lineWidth", "5");

總結：以上十條基本上涵蓋了jQuery插件開發的核心，並且可以作為開發的模板。有一套基本的程式碼可以極大的縮短你的開發時間，並且能夠讓你設計插件架構的時候更有自信。

希望本文所述對大家的jquery程式設計有所幫助。