JS每日一题:设计模式-如何理解工厂模式?

你的名字 2023-02-13 08:16 14阅读 0赞

#### 20190408期 ####

设计模式-如何理解工厂模式?

> 定义: 创建对象的接口，让子类决定实例化哪个类。工厂方法将类的实例化延迟到子类,而子类可以重写接口方法以便创建的时候指定自己的对象类型。

##### 适用场景 #####

需要根据不同参数产生不同实例，这些实例都有相同的行为,这时候我们可以使用工厂模式，简化实现的过程，同时也可以减少每种对象所需的代码量。工厂模式有利于消除对象间的耦合，提供更大的灵活性

代码理解:

// 下方就是一个典型的工厂模式
    // 首先创建对象的接口
    const productManager = {};
    productManager.createProductA = function () {
        console.log('ProductA');
    }
    productManager.createProductB = function () {
        console.log('ProductB');
    }
    productManager.factory = function (type) {
        // 工厂方法将类的实例化延迟到子类
        return new productManager[type];
    }
    // 让子类决定实例化哪个类
    productManager.factory("createProductA");

如果还不理解的话，那我们就再详细一点咯，假如我们想在网页面里插入一些元素，而这些元素类型不固定，可能是图片，也有可能是连接，甚至可能是文本，根据工厂模式的定义，我们需要定义工厂类和相应的子类，我们先来定义子类的具体实现（也就是子函数）

那么我们如何定义工厂处理函数呢？其实很简单：

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

使用方式如下：

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

##### 熟悉的jquery #####

jQuery中的$()其实就是一个工厂函数，它根据传入参数的不同创建元素或者去寻找上下文中的元素，创建成相应的jQuery对象

// https://github.com/jquery/jquery/blob/master/src/core/init.js
    init = jQuery.fn.init = function( selector, context, root ) {
        var match, elem;
        // HANDLE: $(""), $(null), $(undefined), $(false)
        if ( !selector ) {
            return this;
        }
        // Method init() accepts an alternate rootjQuery
        // so migrate can support jQuery.sub (gh-2101)
        root = root || rootjQuery;
        // Handle HTML strings
        if ( typeof selector === "string" ) {
            //...
        // HANDLE: $(DOMElement)
        } else if ( selector.nodeType ) {
            //....
        // HANDLE: $(function)
        // Shortcut for document ready
        } else if ( jQuery.isFunction( selector ) ) {
            //....
        }
        return jQuery.makeArray( selector, this );
    };

#### 总结 ####

优点

*  工厂类含有必要的判断逻辑, 实现了对责任的分割，它提供了专门的工厂类用于创建对象
 *  用户只需要关心所需产品对应的工厂，无须关心创建细节
 *  在系统中加入新产品时，无须修改抽象工厂和抽象产品提供的接口,符合“开闭原则”

缺点

*  添加新产品时，需要编写新的具体产品类,一定程度上增加了系统的复杂度
 *  考虑到系统的可扩展性，需要引入抽象层，在客户端代码中均使用抽象层进行定义，增加了系统的抽象性和理解难度

**最近答题**

[JS每日一题: webpack的构建流程是什么][JS_ webpack]

[JS每日一题: 如何利用webpack来优化前端性能？][JS_ _webpack]

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

**关注「JS每日一题」，参与答题！**

![format_png][]

▲长按图片识别二维码

[JS_ webpack]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c394cb674a823cbac68962f15826b1009bb0624a453b326d83c4823dfe8e12f4e07d169e&idx=1&mid=2247483842&scene=21&sn=6d2381941f7b9c637dc19e21e362d1c8#wechat_redirect
[JS_ _webpack]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c39ecb674a88d3caec76b0d6be217fa5f161692426e117a20ff3812495bece0aee161dd4&idx=1&mid=2247483848&scene=21&sn=94a48c2188d3c8b1d3b68a4cb58235bb#wechat_redirect
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9nSDMxdUY5VklpYlRQUFY1ZlVpYzhKb2ljVGxISDByTDdpY1p5alJaMThDSmpsN2hUaDFvcWpRRnNBbDI3YWljV1NmRDJ6WnVLT1d1b01pY0VpY3oxV3dBSjlhY2cvNjQw?x-oss-process=image/format,png