Explication détaillée du modèle d'usine du modèle de conception JS

Cette fois, je vous apporte une explication détaillée du Factory Pattern de JSDesign Pattern, et quelles sont les Précautions lors de l'utilisation du JS Factory Pattern. Voici des cas pratiques.

Concept : Le modèle d'usine définit une interface pour créer des objets Cette interface détermine quelle classe instancier par la sous-classe. Ce modèle est que l'instanciation d'une classe est retardée vers la sous-classe. . Les sous-classes peuvent remplacer les méthodes d'interface pour spécifier leur propre type d'objet (usine abstraite) lors de la création

Fonction et précautions
Fonction : La construction d'objets est très compliquée.

Besoin de créer différentes instances en fonction de l'environnement spécifique

Traitez un grand nombre de petits objets avec les mêmes propriétés

Remarque : n'abusez pas de l'usine, parfois juste ajouter au code Complexité

Utilisation
Montrons ce problème à travers un exemple Tout comme nous devons produire différents types de produits dans cette usine, nous écrivons chaque type dans une méthode, afin de pouvoir produire. Appelez simplement cette méthode directement. Alors veuillez regarder ce code :

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");

Soyons plus détaillés. Supposons que nous souhaitions insérer certains éléments dans la page Web, et que les types de ces éléments ne sont pas fixes. ou encore Text, selon la définition du mode ICBC nous devons définir la sous-classe correspondante

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

Alors comment définir le mode usine ? En fait, c'est très simple

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

La méthode d'utilisation est la suivante :

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée du modèle de constructeur des modèles de conception JS

Explication détaillée du modèle de constructeur de Modèles de conception JS

modèle de conception js - utilisation du modèle singleton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!