10 Tipps, die Ihnen helfen, bessere jQuery-Plugins_jquery zu erstellen

Dieser Artikel fasst 10 Vorschläge zusammen, die Ihnen bei der Erstellung besserer jQuery-Plug-Ins helfen sollen. Teilen Sie es als Referenz mit allen. Die spezifischen Anweisungen lauten wie folgt:

Nachdem ich viele jQuery-Plug-ins entwickelt hatte, fand ich langsam eine Reihe relativ standardisierter Strukturen und Muster für die Entwicklung von jQuery-Plug-ins heraus. Auf diese Weise kann ich den größten Teil der Codestruktur kopieren und einfügen und mich nur auf den Hauptlogikcode konzentrieren. Die Verwendung derselben Entwurfsmuster und derselben Architektur erleichtert auch die Behebung von Fehlern oder die Durchführung sekundärer Entwicklungen. Eine bewährte Architektur kann sicherstellen, dass meine Plug-Ins keine größeren Probleme verursachen, egal ob das Plug-In einfach oder komplex ist. Hier teile ich 10 Erfahrungen, die ich zusammengefasst habe.

1. Geben Sie Ihren gesamten Code in den Verschluss ein

Das ist die, die ich am häufigsten verwende. Aber manchmal können Methoden außerhalb des Abschlusses nicht aufgerufen werden.

Aber der Code Ihres Plug-Ins dient nur Ihrem eigenen Plug-In, daher besteht dieses Problem nicht. Sie können den gesamten Code in den Abschluss einfügen.

Die Methode sollte wahrscheinlich in die Prototype-Methode eingefügt werden.

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

2. Stellen Sie Standardoptionen für Plug-Ins bereit

Ihr Plug-in sollte über einige Optionen verfügen, die Entwickler festlegen können. Daher ist es notwendig, eine Option zur Standardwiederherstellung bereitzustellen. Sie können diese Optionen über die Erweiterungsfunktion von jQuery festlegen:

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

3. Geben Sie ein Element mit

zurück

JavaScript/jQuery verfügt über eine gute Funktion, die eine Methodenkaskadierung durchführen kann. Daher sollten wir diese Funktion nicht zerstören und immer ein Element in der Methode zurückgeben. Ich befolge diese Regel in jedem jQuery-Plugin, das ich erstelle.

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

4. Platzieren Sie den Einmalcode außerhalb der Hauptschleife

Das ist sehr wichtig, wird aber oft ignoriert. Einfach ausgedrückt: Wenn Sie einen Code haben, der aus einer Reihe von Standardwerten besteht und nur einmal instanziiert werden muss, anstatt bei jedem Aufruf Ihrer Plug-In-Funktion instanziiert zu werden, sollten Sie diesen Code außerhalb des Plug-Ins platzieren Verfahren. Dadurch kann Ihr Plug-in effizienter ausgeführt werden und Speicherplatz gespart werden.

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   
 } 
}

Sie können feststellen, dass die „defaultSettings“ im obigen Code vollständig außerhalb der Plug-In-Methode liegen. Da sich diese Codes innerhalb des Abschlusses befinden, müssen wir uns keine Sorgen machen, dass diese Variablen überschrieben werden.

5. Warum Class Prototyping einrichten?

Als Fleisch und Blut Ihres Codes sollten Methoden und Funktionen in der Prototypfunktion platziert werden. Dafür gibt es zwei Gründe:

◆ Es kann viel Speicher sparen, da Sie diese Methoden nicht wiederholt erstellen müssen.

◆ Es ist viel schneller, auf eine vorgefertigte Methode zu verweisen, als sie neu zu erstellen.

Einfach ausgedrückt erweitert der Prototyp ein Objekt und stellt Methoden dafür bereit, ohne diese Methoden in jedem Objekt zu instanziieren. Dadurch wird Ihr Code auch organisierter und effizienter. Sobald Sie sich an diese Art der Entwicklung gewöhnt haben, werden Sie feststellen, dass Sie dadurch bei Ihren zukünftigen Projekten viel Zeit sparen.

6. So richten Sie Class Prototyping ein

Das Einrichten einer Prototypmethode besteht aus zwei Teilen. Zuerst müssen wir unsere anfängliche Klassendefinition erstellen, was in den meisten Fällen die Erstellung eines Objekts bedeutet. Diese Definition enthält Teile, die für jede Objektinstanz unterschiedlich sind. In meinem Paint jQuery Plugin habe ich Folgendes geschrieben:

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

Fügen wir die globale Methode hinzu:

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

Der Schlüssel hier besteht darin, die Prototypmethode universell zu machen, aber die Daten sind für jede Instanz einzigartig und können mit „this“ referenziert werden.

7. Verwenden Sie das „this“-Objekt

Durch die Verwendung von „$this“ können wir die korrekte Referenz an andere Abschlüsse übergeben. Möglicherweise müssen wir auch die Referenz $this an andere Methoden übergeben. Es ist zu beachten, dass der Name $this geändert werden kann und jeder Variablenname verwendet werden kann.

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. Einstellungen in jedem Objekt speichern

Ich habe meine eigenen Einstellungen in jedem Objekt gespeichert und dann die eigenen Einstellungen manipuliert. Auf diese Weise müssen Sie nicht viele Parameter in verschiedenen Methoden übergeben. Wenn Sie diese Variablen in ein Objekt einfügen, können Sie diese Variablen auch einfacher an anderen Stellen aufrufen.

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

9. Trennen Sie Ihre Prototyp-Methodenlogik

Dies kann ein Grundprinzip sein. Wenn Sie zögern, eine Methode bereitzustellen, können Sie sich fragen: „Wenn jemand anderes diese Methode überschreiben würde, würde Ihr Code seinen Anforderungen entsprechen?“ oder „Wie schwierig wäre es für jemand anderen, diese Methode zu schreiben?“ Natürlich ist das eine Frage der Flexibilität. Hier ist eine Liste meiner Color Picker-jQuery-Plugin-Methoden, auf die Sie verweisen können:

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

10. Stellen Sie Setter/Getter-Optionen bereit

Dieses ist nicht notwendig, aber ich habe festgestellt, dass alle meine Plug-ins dieses enthalten. Weil es nur wenig Code erfordert, um anderen eine Funktion bereitzustellen, die sie möglicherweise benötigen.

Grundsätzlich müssen wir Entwicklern nur erlauben, den vorhandenen Wert eines Elements festzulegen oder abzurufen:

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

Résumé : les dix éléments ci-dessus couvrent essentiellement le cœur du développement du plug-in jQuery et peuvent être utilisés comme modèle de développement. Disposer d'un ensemble de code de base peut réduire considérablement votre temps de développement et vous rendre plus confiant lors de la conception de votre architecture de plug-in.

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.