Detaillierte Erläuterung des Fabrikmusters des JS-Entwurfsmusters

Dieses Mal erkläre ich Ihnen ausführlich das Factory Pattern von JSDesign Pattern und welche Vorsichtsmaßnahmen bei der Verwendung des JS Factory Pattern zu beachten sind. Hier sind praktische Fälle.

Konzept: Das Factory-Muster definiert eine Schnittstelle zum Erstellen von Objekten. Diese Schnittstelle bestimmt, welche Klasse von der Unterklasse instanziiert werden soll. . Unterklassen können Schnittstellenmethoden überschreiben, um beim Erstellen ihren eigenen Objekttyp (abstrakte Fabrik) anzugeben.

Funktion und Vorsichtsmaßnahmen
Funktion: Die Objektkonstruktion ist sehr kompliziert.

Je nach spezifischer Umgebung müssen unterschiedliche Instanzen erstellt werden

Verarbeiten Sie eine große Anzahl kleiner Objekte mit denselben Eigenschaften

Hinweis: Missbrauchen Sie die Fabrik nicht, manchmal nur Fügen Sie dem Code Komplexität

Verwendung
hinzu. Lassen Sie uns dieses Problem anhand eines Beispiels demonstrieren. So wie wir in dieser Fabrik verschiedene Arten von Produkten herstellen müssen, schreiben wir für jeden Typ eine Methode, damit wir produzieren können Rufen Sie diese Methode einfach direkt auf. Dann schauen Sie sich bitte diesen Code an:

var productManager = {};
productManager.createProductA = function () {
    console.log('ProductA');
}
productManager.createProductB = function () {
    console.log('ProductB');
}
productManager.factory = function (typeType) {
    return new productManager[typeType];
}
productManager.factory("createProductA");

Lassen Sie uns detaillierter vorgehen. Angenommen, wir möchten einige Elemente in die Webseite einfügen, und die Typen dieser Elemente sind möglicherweise nicht festgelegt. oder sogar Text, gemäß der Definition des ICBC-Modus müssen wir die entsprechende Unterklasse definieren

var page = page || {};
page.dom = page.dom || {};//子函数1：处理文本page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};//子函数2：处理链接page.dom.Link = function () {
    this.insert = function (where) {
        var link = document.createElement('a');
        link.href = this.url;
        link.appendChild(document.createTextNode(this.url));
        where.appendChild(link);
    };
};//子函数3：处理图片page.dom.Image = function () {
    this.insert = function (where) {
        var im = document.createElement('img');
        im.src = this.url;
        where.appendChild(im);
    };
};

Wie definieren wir also den Fabrikmodus? Tatsächlich ist es sehr einfach

page.dom.factory = function (type) {
    return new page.dom[type];}

Die Verwendungsmethode ist wie folgt:

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des Builder-Musters von JS-Designmustern

Detaillierte Erläuterung des Konstruktormusters von JS-Entwurfsmuster

JS-Entwurfsmuster – die Verwendung von Singleton-Mustern

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Fabrikmusters des JS-Entwurfsmusters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!