JavaScript中的工厂模式简述

RyanQ 发布于2019-08-20 16:29 / 238人阅读

摘要：为了解决这个问题，我们可以使用工厂模式。框架中的工厂模式中的其实就是一个工厂函数，它根据传入参数的不同创建元素或者去寻找上下文中的元素，创建成相应的对象。工厂模式有利于消除对象间的耦合，提供更大的灵活性。

本文首发于知乎专栏：前端指南

定义

工厂模式定义创建对象的接口，但是让子类决定实例化哪个类。工厂方法将类的实例化延迟到子类。

概述

我们可以使用Object构造函数来创建单个对象，但是，使用同一个接口创建很多对象时，会产生大量重复的代码。为了解决这个问题，我们可以使用工厂模式。

实例

我们来看一个简单的例子：

var employee1 = new Object();
employee1.position = "Front end engineer";
employee1.tool = "I love vscode.";
employee1.introduction = function () {
    console.log("I am a " + this.position + ", and " + this.tool);
}
var employee2 = new Object();
employee2.position = "UI designer";
employee2.tool = "I love photoshop.";
employee2.introduction = function () {
    console.log("I am a " + this.position + ", and " + this.tool);
}
employee1.introduction();//I am a Front end engineer, and I love vscode.
employee2.introduction();//I am a UI designer, and I love photoshop.

在上边这个例子中，我们定义了两个employee，一个是Front End Engineer，另一个是UI designer，他们都有position属性和tool属性，也都有introduction方法。如果我们需要创建很多个类似employee的对象呢，那我们就需要重复很多类似的代码。接下来，我们做一些简单的修改：

function Employee(type) {
    var employee;
    if (type == "programmer") {
        employee = new Programmer();
    } else if (type == "designer") {
        employee = new Designer();
    }
    employee.introduction = function () {
        console.log("I am a " + this.position + ", and " + this.tool);
    }
    return employee;

}

function Programmer() {
    this.position = "Front end engineer";
    this.tool = "I love vscode.";
}
function Designer() {
    this.position = "UI designer";
    this.tool = "I love photoshop.";
}

var employee1 = Employee("programmer");
employee1.introduction();//I am a Front end engineer, and I love vscode.
var employee2 = Employee("designer");
employee2.introduction();//I am a UI designer, and I love photoshop.

在上边这段代码中，我们将employee的初始化分别放到了Programmer()和Designer()中实现。这其实就是一个简单工厂模式的例子，Employee是一个工厂，可以根据传入的type的不同，创建不同的employee，每个employee有自己的职位和使用的工具，每个employee都可以介绍自己的这些信息。

框架中的工厂模式

jQuery中的$()其实就是一个工厂函数，它根据传入参数的不同创建元素或者去寻找上下文中的元素，创建成相应的jQuery对象。
以下实例来自于https://github.com/jquery/jqu...

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

同时，像Angular2、Node、Vue、React等等，很多开源框架中其实都用到了工厂模式，学会工厂模式，有助于你更好的理解和使用这些框架。

总结

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

注：如果不需要另外一个类，或者不需要在运行期间判断实例化的对象属于哪个类，那就不需要使用工厂模式，大多数情况下使用new关键字和构造函数公开实例化对象，提高代码可读性。切勿滥用。

服务器托管超融合服务器工厂模式工厂方法模式抽象工厂模式代码设计模式工厂模式

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

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

JS或Jquery

摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...

CatalpaFlat 2019-08-22 11:17 评论0 收藏0
PHP设计模式（二）工厂方法模式（Factory Method）

摘要：对于这个问题，接下来的工厂方法模式可以解决这个问题。二工厂方法模式的优点拥有良好的封装性，代码结构清晰。参考系列源地址系列目录设计模式概述设计模式一简单工厂模式设计模式二工厂方法模式设计模式三抽象工厂模式设计模式四单例模式简单工厂简述：简单工厂模式实现了产品类的代码跟客户端代码分离，但会有一个问题，优秀的代码是符合开闭原则如果你要加一个C类产品，你就要修改工厂类里面的代码，也就是说...

zhjx922 2019-07-01 10:49 评论0 收藏0
2017 我所分享的技术文章总结（下）

摘要：对下半年所分享的文章进行整理，上半年总结的篇好文请点击这里，很多读者当时忘记了收藏，以致于查找一篇历史文章很费劲，因此在这里顺便做下记录。目前就分下下面几个大类，没有更多细分，已基本可以查找了。对下半年所分享的文章进行整理，上半年总结的 98 篇好文请点击这里，很多读者当时忘记了收藏，以致于查找一篇历史文章很费劲，因此在这里顺便做下记录。目前就分下下面几个大类，没有更多细分，已基本可...

XBaron 2019-06-25 11:52 评论0 收藏0
JavaScript设计模式一：工厂模式和构造器模式

摘要：集中实例化的函数第一个实例第二个实例工厂模式的分类工厂模式分为简单工厂抽象工厂和智能工厂，工厂模式不显示地要求使用一个构造函数。工厂模式之弊大多数类最好使用关键字和构造函数，可以让代码更加简单易读。带原型的构造器中有一个名为的属性。什么是模式前阵子准备期末考试，挺累也挺忙的，实在闲不得空来更新文章，今天和大家说说javascript中的设计模式。首先呢，我们需要知道的是：模式是一...

MkkHou 2019-08-21 10:26 评论0 收藏0
安卓开发技术型 - 收藏集 - 掘金

摘要：全局捕获掘金一个全局捕获的库。前言最实用的微信小程序大全，持续更新中掘金最全的小程序开发教程，点击下载掘金。 NeverCrash 全局捕获 Crash - Android - 掘金NeverCrash for Android 一个全局捕获Crash的库。信NeverCrash，永不Crash。 Gif 展示 ... 安卓指纹识别 SDK，兼容魅族和三星的 6.0 及以下系统 - A...

Alex 2019-06-25 11:15 评论0 收藏0