Heim >Web-Frontend >js-Tutorial >JavaScript-Entwurfsmuster, Serie eins: Fabrikmuster

JavaScript-Entwurfsmuster, Serie eins: Fabrikmuster

不言
不言Original
2018-04-02 13:50:271608Durchsuche

Dieser Artikel teilt mit Ihnen die JavaScript-Designmusterserie: Factory Pattern. Interessierte Freunde können sich das

Designmuster

设计模式(design pattern)Konzept ansehen:
Ja Eine Reihe wiederholter Verwendung, ausgereifter Überlegungen, Klassifizierung und Zusammenfassung unzähliger praktischer Designerfahrungen. Es soll den Code wiederverwendbar, erweiterbar, entkoppelt, verständlicher und zuverlässiger machen.

Insgesamt gibt es 23 Designmuster. Ich werde sie mir heute ansehen. 工厂模式(Factory Pattern) Die anderen Muster werden Ihnen in den folgenden Blogs erklärt.

Vorwort: Diese Codereihe wurde auf die GitHub-Adresse https://github.com/HolyZheng/... hochgeladen.

Factory-Modus

Factory Modus, genau wie der Name schon sagt, kann es wie eine Fabrik produzieren, was wir wollen, solange wir die Rohstoffe bereitstellen. In unserem täglichen Codierungsprozess ist es sehr wahrscheinlich, dass wir das Fabrikmuster verwendet haben, ohne es zu wissen. Schauen wir uns ein einfaches Beispiel an:

//工厂模式很基础的的一个例子
function createPerson (name,age) {
  var person = new Object();
  person.name = name;
  person.age = age;
  return person;
}

var Holz = createPerson ("Holz", "21");
console.log(Holz);
/*
{
age: "21",
name: "Holz"
}
*/
var Tom = createPerson ("Tom", "7");
console.log(Tom);
/*
{
age: "7",
name: "Tom"
}
*/

In dieser Funktion kann ich Objekte mit unterschiedlichen Parameterwerten erstellen, indem ich verschiedene Parameter übergebe. Wie Sie sehen, ist das Fabrikmuster eigentlich sehr einfach.

Fabrikmuster werden hauptsächlich in einfache Fabrikmuster und abstrakte Fabrikmuster unterteilt.

Einfaches Fabrikmuster

简单工厂(Simple Factory Pattern)Das Muster wird hauptsächlich zum Erstellen von Objekten desselben Typs verwendet. Zum Erstellen benötigen wir beispielsweise eine Identität, einen Lehrer oder einen Schüler. Sie können die folgende Funktion verwenden:

//简单工厂模式。
var simpleCreatePerson = function (type, person) {
return this[type](person);
}

simpleCreatePerson.prototype = {
  student: function (person) {
    var Astudent = new Object();
    Astudent.name = person.name;
    Astudent.age = person.age;
    return Astudent;
  },
  teacher: function (person) {
    var Ateacher = new Object();
    Ateacher.name = person.name;
    Ateacher.age = person.age;
    return Ateacher;
  }
}

var teacher = new simpleCreatePerson("teacher", {name:"郑老师", age:25 });
var student = new simpleCreatePerson("student", {name:"郑同学", age:21 });

console.log(teacher);
/*
this is a teacher
{name:"郑老师", age: 25}
*/
console.log(student);
/*
this is a teacher
{name:"郑同学", age: 25}
*/

Wir können verschiedene Typen wie „Schüler“ oder „Lehrer“ übergeben, um unterschiedliche Objekte zu erstellen, und dann unterschiedliche Personenobjekte verwenden, um den Eigenschaften Werte zuzuweisen innen. Sowohl „Schüler“ als auch „Lehrer“ sind Personen, daher wird die einfache Factory-Funktion verwendet, um verschiedene Instanzen desselben Objekttyps zu erstellen.

Der obige Code verwendet den Prototyp _prototype_, um zwei Funktionen hinzuzufügen (Das Wissen über Prototypen kann nicht in ein oder zwei Sätzen erklärt werden. Wenn Sie es nicht verstehen, können Sie im Internet nach relevanten Informationen suchen . Verstehen) und dann verschiedene Methoden über diesen [Typ] auswählen. Wenn Sie es nicht verstehen, kann ich es erklären. Dies ist ein Objekt, das auf die aktuelle Funktion zeigt (in JavaScript ist die Funktion ein Objekt). [Attributname/Methodenname] Um interne Eigenschaften oder Methoden aufzurufen, ruft dieser [Typ] (Person) die entsprechende Methode auf, um eine bestimmte Klasse (Schüler oder Lehrer) zu instanziieren. Wird über diesen [Typ] (Person) aufgerufen.
Dies ist eine einfache Factory-Funktion.

Abstraktes Fabrikmuster

抽象工厂模式 : Im Gegensatz zu einfachen Fabrikfunktionen entwerfen abstrakte Fabrikfunktionen zuerst die Schnittstelle und die spezifische Implementierung wird in der Unterklasse ausgeführt. Das Konzept ist auf diese Weise etwas vage. Schauen wir uns ein Beispiel an:

Wir definieren eine übergeordnete Klasse, abstractCreatePersondas heißt, wir erstellen eine Person, und dann hat diese Person eine Methode, sich vorzustellen selfIntroduction, daher haben unterschiedliche Personen unterschiedliche Einführungsinhalte. Zu diesem Zeitpunkt können wir das abstrakte Fabrikmuster verwenden:

var abstractCreatePerson = function () {};

abstractCreatePerson.prototype = {
  selfIntroduction: function () {
    throw new Error("请先实例化此方法!");
  }
}

var student = Object.create(abstractCreatePerson.prototype);
student.selfIntroduction = function () {
  console.log("I am a sutdent, my name is holz!");
}
student.selfIntroduction();
/*
I am a sutdent, my name is holz!
*/
var teacher = Object.create(abstractCreatePerson.prototype);
teacher.selfIntroduction = function () {
  console.log("I am a teacher, my name is xxxx!");
}
teacher.selfIntroduction();
/*
I am a teacher, my name is xxxx!
*/

Sie können diesen Code zuerst in der übergeordneten Klasse deklarieren abstractCreatePerson. und dann die Methode Object .create() durchlaufen, um diese übergeordnete Klasse zu erben (da dadurch die ursprüngliche Prototypenkette nicht überschrieben wird), und dann instanziieren wir die Methode in der Unterklasse. Verschiedene Unterklassen haben unterschiedliche Instanzmethoden.
Dies ist das Factory-Muster, das die Wiederverwendbarkeit unseres Codes verbessert und die Kopplung zwischen Modulen reduziert.


Zusammenfassung

  • Das Fabrikmodell kann, genau wie der Name schon sagt, wie eine Fabrik produzieren, was wir wollen, solange wir Rohstoffe bereitstellen

  • Das Factory-Muster verbessert die Wiederverwendbarkeit unseres Codes und reduziert die Kopplung zwischen Modulen

  • Das Factory-Muster wird hauptsächlich verwendet, um verschiedene Instanzen desselben Typs zu erstellen Objekte



Das obige ist der detaillierte Inhalt vonJavaScript-Entwurfsmuster, Serie eins: Fabrikmuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn