Eine vorläufige Studie zu JavaScript-Designmustern_Javascript-Fähigkeiten

Zweck: Es gibt viele Designmuster. Versuchen Sie, die Vor- und Nachteile der verschiedenen erlernten Designmuster aufzuzeichnen, damit Sie später darauf zurückgreifen können.

Vorwort: Als ich Elevation vor einem halben Jahr las, war ich verwirrt, nicht weil ich es nicht verstehen konnte, sondern weil ich nicht verstand, warum Es war so mühsam, nur ein Objekt zu erstellen. Erst als ich kürzlich mein erstes kleines Projekt abgeschlossen hatte, wurde mir klar, wie katastrophal es ohne entsprechende Spezifikationen und Einschränkungen sein würde, wenn die Codemenge zunimmt. Also wandte ich mich noch einmal der Elevation zu und fasste die Vor- und Nachteile mehrerer einfacher Entwurfsmuster zusammen, die ich gelernt hatte.

Text: In diesem Artikel werden insgesamt 7 Designmuster, ihre Anwendungsszenarien, Vor- und Nachteile vorgestellt.

1. Werksmodus

Verwenden Sie Funktionen direkt, um Objekte zu kapseln und Objekte als Rückgabewerte zu verwenden.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=person("Su",25); 

Nachteile: Probleme bei der Objekterkennung. Alle erstellten Objekte sind Instanzen von Object und schwer zu unterscheiden.

2. Konstruktormuster

function Person (name,age) {
  this.name=name;
  this.age=age;
  this.sayName=function () {
    alert(this.name);
  };
}
var me=new Person("Su",25); 

Vorteile: Durch die Verwendung des Konstruktormusters können Instanzen als ein bestimmter Typ markiert werden.

Nachteile: Die Methoden der erstellten Objekte sind alle privat. Wenn Sie nur öffentliche Methoden generieren möchten, führt dies zu unnötiger Leistungsverschwendung.

3. Prototypenmodus

Prototypkettenvererbung nutzen

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person(); 

Nachteile: Alle Eigenschaften und Methoden werden von Instanzen gemeinsam genutzt. Wenn Eigenschaften und Methoden Referenztypwerte enthalten, wirkt sich die Änderung der Eigenschaften und Methoden einer Instanz auf alle anderen Instanzen aus.

4. Prototyp-Konstruktormuster

Private Eigenschaften und Methoden werden mithilfe von Konstruktoren generiert und öffentliche Eigenschaften und Methoden werden mithilfe von Prototypen geerbt. Kombination der Vorteile beider Methoden.

function Person (name,age) {
  this.name=name;
  this.age=age;
}
Person.prototype={
  constructor:Person,
  sayName:function () {
      alert(this.name);
  }
}
var me=new Person("Su",25); 

Nachteile: Achten Sie auf die prototypische Vererbung von Referenztypwerten.

ps: Der Code im obigen Bild schreibt das Prototypobjekt des Personenkonstruktors neu und zeigt den Prototypobjektzeiger auf ein Objekt, sodass die Konstruktoreigenschaft auf Objekt statt auf Person zeigt und daher explizit auf Person festgelegt werden muss.

5. Dynamischer Prototypenmodus

Im Wesentlichen handelt es sich immer noch um eine Konstruktorfunktion. Sie fügt die angegebene Methode nur dann zum Prototypobjekt hinzu, wenn sie nicht vorhanden ist.

function Person (name,age) {
  this.name=name;
  this.age=age;
  if (typeof this.sayName!="function") {
    Person.prototype.sayName=function () {
      alert(this.name);
    }
  }
}
var me =new Person("Su",25); 

Nachteil: Prototypobjekte können nicht mit Objektliteralen überschrieben werden. Denn dadurch zeigt der Instanzzeiger auf das neue Prototypobjekt. Mit anderen Worten, die in der obigen Abbildung zum Prototypobjekt hinzugefügte Methode sayName ist ungültig.

6. Parasitäres Konstruktormuster

Verwenden Sie beim Anruf den neuen Operator. Ansonsten sehe ich keinen Unterschied zum Werksmodus. Suchen Sie Rat von Experten.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=new person("Su",25); //这里使用new操作符 

7. Sicheres Konstruktormuster

Keine öffentlichen Attribute, deaktivieren Sie diese und stellen Sie nur die erforderlichen APIs für Datenaufrufe bereit. Geeignet für Bereiche mit Sicherheitsanforderungen.

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su"); 

Wie im obigen Code gezeigt, kann auf das interne Namensattribut nur über die Methode sayName zugegriffen werden.

Dieser Artikel stellt Ihnen sieben Designmuster vor und stellt deren Vor- und Nachteile vor. Ich hoffe, dass er Ihnen dabei hilft, entsprechende Kenntnisse über js-Designmuster zu erlernen.