JS-Kapselungs-Plug-in-Gehäuse

Dieses Mal bringe ich Ihnen einen Fall für das JS-Kapselungs-Plug-in. Was sind die Vorsichtsmaßnahmen für das JS-Kapselungs-Plug-in?

Aus Projektgründen habe ich seit mehr als einem Jahr kein Plug-In in js geschrieben. Das Projekt ist zu ausgereift und ich verwende normalerweise verpackte funktionale Plug-Ins. Ich fühle mich so niedergeschlagen ... In den letzten zwei Tagen wollte ich mir die Zeit nehmen, ein Canvas-Plug-in zum Zeichnen von Statistikdiagrammen und Rabattdiagrammen zu schreiben, also bin ich online gegangen, um zu lernen, wie man es verpackt ... Obwohl ich schon viel Quellcode gelesen habe, habe ich das Gefühl, dass es, selbst wenn ich es verstehe, immer noch eine verrückte Idee ist ...

Was ist Kapselung?

Mein Verständnis ist Eine Funktion in eine separate Komponente umzuwandeln, ist wie die Herstellung von Knödeln. Früher musste man für die Herstellung von Knödeln zuerst Mehl verwenden, um Knödel zu füllen, und dann die Knödel von Hand herstellen Obwohl das Innere der Maschine jeder Schritt dem Selbermachen von Knödeln ähnelt, müssen Sie jetzt nur noch eines tun, nämlich die Zutaten hineinzugeben. Die Maschine hier ist das verpackte Plug-In, und die Rohstoffe sind die Parameter, die Sie übergeben möchten

Warum sollten wir js-Funktionen in Plug-Ins kapseln? Ich denke, es gibt folgende Punkte

 1. Erleichtern Sie die Wiederverwendung von Code

 2. Vermeiden Sie Interferenzen zwischen Komponenten mit derselben Funktion. Es kann zu Problemen mit dem Umfang kommen

 3. Einfach zu warten und förderlich für die Projektakkumulation

 4. Denken Sie nicht, dass das ständige Kopieren und Einfügen sehr wenig kostet...

Es scheint, dass es zwei Arten der Kapselung gibt, die ich im Internet gesehen habe: eine ist die native Kapselung von js und die andere ist die Kapselung von jquery. Lassen Sie mich zunächst über die native Kapselung sprechen.

Beim Kapseln fügen wir den js-Code in eine selbstausführende Funktion ein, um Variablenkonflikte zu vermeiden.

(function(){
  ......
  ......
}()}

Erstellen Sie dann einen -Konstruktor

(function(){
  var demo = function(options){
    ......
  }
}())

Machen Sie diese Funktion nach außen zugänglich, damit sie global aufgerufen werden kann

(function(){
  var demo = function(options){
    ......
  }
  window.demo = demo;
}())

Tatsächlich können Sie es jetzt direkt aufrufen, es ist gekapselt, obwohl es keine Funktionen implementiert

var ss = new demo({
  x:1,
  y:2
})；

Oder

new demo({
  x:2,
  y:3
})；

Wie übergibt man dann Parameter? Eines unserer Plug-Ins verfügt normalerweise über einige erforderliche Parameter oder optionale Parameter. Meiner Meinung nach sind optionale Parameter nur im Plug-In angegebene Standardwerte. Die von uns übergebenen Parameter überschreiben die Standardparameter im Plug-in. Sie können $.extend({}) verwenden, um

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : 1,
      "y" : 2,
      "z" : 3
    },options)
  }
  window.demo = demo;
}())

zu überschreiben Anschließend können Sie beim Initialisieren des Konstruktors

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : "1",
      "y" : "2",
      "z" : "3"
    },options);
    this.init();
  };
  demo.prototype.init = function(){
    alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
  };
  window.demo = demo;
}());
new demo({
  "x" :"5",
  "y" :"4"
});
</script>

einige Vorgänge ausführen Ich habe hier eine Frage. Gibt es Extend nur in JQuery? Ich schaue es mir später noch einmal an.... Eine weitere Sache, die erwähnt werden muss, ist, dass wir bei der Kapselung von js alles berücksichtigen müssen, z. B. seine Skalierbarkeit und Kompatibilität sowie seine Leistung. Wenn keine Notwendigkeit besteht, besteht keine Notwendigkeit zur Kapselung ... Seien Sie wählerisch.

Es gibt unzählige Plug-Ins, die im Internet fertiggestellt wurden, und ihre Funktionen sind sehr leistungsstark. Manchmal verwenden wir jedoch nur einen kleinen Teil eines großen Plug-Ins, sodass wir es selbst ändern müssen Es passt zu uns und die Stile einiger Projekte unterscheiden sich von den aktuellen Plug-In-Stilen. Der Schlüssel liegt also darin, zu Ihren eigenen Projekten zu passen.

Ich glaube, Sie beherrschen die Methode zum Lesen dieses Artikels. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Vuejs die Seitenregionalisierung durchführt

Detaillierte Erläuterung der Verwendung von webpack2+React

JQUERY ruft den Wert des Attributs über den aktuellen Tag-Namen ab

Das obige ist der detaillierte Inhalt vonJS-Kapselungs-Plug-in-Gehäuse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!