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

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

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

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

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

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每日一题

JS每日一题能够当作是一个语音答题社区
天天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在第二天0点推送当天的参考答案

• 注 毫不仅限于完成当天任务，更可能是查漏补缺，学习群内其它同窗优秀的答题思路

点击加入答题