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

kevin 发布于2019-08-23 16:50 / 2224人阅读

摘要：期设计模式如何理解工厂模式定义创建对象的接口，让子类决定实例化哪个类。适用场景需要根据不同参数产生不同实例，这些实例都有相同的行为这时候我们可以使用工厂模式，简化实现的过程，同时也可以减少每种对象所需的代码量。

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点推送当天的参考答案

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

点击加入答题

GPU云服务器云服务器代码设计模式工厂模式工厂模式工厂方法模式抽象工厂模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103385.html

JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...

baishancloud 2019-08-23 16:53 评论0 收藏0
JS每日一题：函数式编程中代码组合(compose)如何理解?

摘要：期函数式编程中代码组合如何理解定义顾名思义，在函数式编程中，就是将几个有特点的函数拼凑在一起，让它们结合，产生一个崭新的函数代码理解一个将小写转大写的函数一个在字符后加的函数将两个函数组合起来这里假设我们实现了每日一题每日一题显示结果里上面 20190315期函数式编程中代码组合(compose)如何理解? 定义: 顾名思义，在函数式编程中，Compose就是将几个有特点的函数拼凑在...

Kaede 2019-08-23 16:08 评论0 收藏0
JS每日一题:设计模式-如何理解职责链模式?

摘要：提交请求的对象并不明确知道哪一个对象将会处理它也就是该请求有一个隐式的接受者。 20190412期设计模式-如何理解职责链模式? 定义: 使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止也就是说，请求以后，从第一个对象开始，链中收到请求的对象要么亲自处理它，要么转发给链中的下一个候选者。提...

lifesimple 2019-08-23 16:56 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 评论0 收藏0