JS 设计模式之:工厂模式定义与实现方法浅析

 更新时间:2020年05月06日 11:14:07   作者:savokiss  
这篇文章主要介绍了JS 设计模式之:工厂模式,结合实例形式分析了JS 工厂模式基本概念、原理、定义、实现方法与操作注意事项,需要的朋友可以参考下

本文实例讲述了JS 设计模式之:工厂模式定义与实现方法。分享给大家供大家参考,具体如下:

前言

上次我们介绍了单例模式,没看过的小伙伴可以看这个链接:

浅析 JS 设计模式之:单例模式

今天来说一说一种常见的设计模式:工厂模式。

工厂模式是一种创建对象的 创建型模式,遵循 DRY(Don't Repeat Yourself)原则。在该模式下,代码将会根据具体的输入或其他既定规则,自行决定创建哪种类型的对象。简单点儿说就是,动态返回需要的实例对象

回顾上次的例子

让我们继续使用单例模式中的例子,一个日志工具 Logger :

class Logger {
 log (...args) {
  console.log(...args);
 }
}

上面是最核心的 api,每次使用都需要使用 new Logger() 来创建一个 logger 对象,然后使用方法就和 console 一样啦~

多种 Logger

假如我们现在的代码要支持 electron 环境,即日志既可以是 console 日志,也可以是 file 日志,那么我们就需要有两种类型的 logger:

ConsoleLogger

// logger/console.js
class ConsoleLogger {
 log (...args) {
  console.log(...args)
 }
}
export default ConsoleLogger

FileLogger

// logger/file.js
class FileLogger {
 log (...args) {
  dumpLog(...args)
 }
}
export default FileLogger

这里先不用管 dumpLog 的具体实现,只用知道它就是将日志写在文件中的即可~

使用工厂

我们已经有了两种类型的 logger,但是这两种 logger 的 api 实际上都是一样的,在项目中直接导入当然也可以使用,只不过每次都要导入对应类型的模块,然后再使用,像下面这样:

使用 console logger

import ConsoleLogger from './logger/console'
const logger = new ConsoleLogger()

使用 file logger

import FileLogger from './logger/file'
const logger = new FileLogger()

是不是很繁琐?如果还有其他 logger 类型,如远程日志,就会出现更多种使用方式了。为了把 logger 模块的使用方式统一,这时候就会用到工厂模式啦~

让我们新建一个 index.js

// logger/index.js
import ConsoleLogger from './console.js'
import FileLogger from './file.js'

function createLogger(type = 'console') {
 if (type === 'console') {
  return new ConsoleLogger()
 } else if (type === 'file') {
  return new FileLogger()
 }
 throw new Error(`Logger type not found: ${type}`)
}

export default createLogger

好了,这下我们的使用方式就会变成这样:

import createLogger from './logger'
// console logger
const logger1 = createLogger('console')
// file logger
const logger2 = createLogger('file')

重构一下

上面的 if else 不是很优雅?如果有更多中 logger 类型添加起来很麻烦?那我们可以使用对象来映射一下,从而抛弃 if else,同时添加一个 logger 选项。

// logger/index.js
import ConsoleLogger from './console.js'
import FileLogger from './file.js'

const loggerMap = {
 console: ConsoleLogger,
 file: FileLogger
}
// 可选参数一般放在最后面
function createLogger(options, type = 'console') {
 const Logger = loggerMap[type]
 if (Logger) {
  return new Logger(options)
 }
 throw new Error(`Logger type not found: ${type}`)
}
上面这种封装的方式,其实也符合 SOLID 原则中的 开闭原则,即 对扩展开放,对修改关闭,每当我们添加一种 logger 类型时,只需要新增一个文件,然后将构造器注册进 loggerMap 中即可。而外面的使用方式都是不变的,这样就用最少的修改完成了功能的新增,是不是很棒呀~

总结

下面我们来回顾一下工厂模式的优点:

  • 动态创建对象:可以用于需要在 运行时 确定对象类型的情况。
  • 抽象:封装了对象创建的细节,用户不会接触到对象的构造器,只需要告诉工厂需要哪种对象。
  • 可用性 / 可维护性:将相似的对象用一个工厂管理,提供统一的创建接口,满足 开闭原则,使我们可以轻松添加多种类型的对象,而无需修改大量代码。

好啦~!工厂模式就介绍到这里啦~ 下次我们讲一讲装饰器模式~

参考内容

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JS对象属性的检测与获取操作实例分析

    JS对象属性的检测与获取操作实例分析

    这篇文章主要介绍了JS对象属性的检测与获取操作,结合实例形式分析了JS针对ES5、ES6实现对象属性的检测与获取常见操作技巧,需要的朋友可以参考下
    2020-03-03
  • 如何利用js给自己照相并修图

    如何利用js给自己照相并修图

    在一些浏览器里已经可以使用web api调用摄像头功能了,下面这篇文章主要给大家介绍了关于如何利用js给自己照相并修图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Bootstrap Fileinput 4.4.7文件上传实例详解

    Bootstrap Fileinput 4.4.7文件上传实例详解

    这篇文章主要为大家详细介绍了Bootstrap Fileinput 4.4.7文件上传实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 微信小程序蓝牙连接小票打印机实例代码详解

    微信小程序蓝牙连接小票打印机实例代码详解

    这篇文章主要介绍了微信小程序蓝牙连接小票打印机实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • layui radio点击事件实现input显示和隐藏的例子

    layui radio点击事件实现input显示和隐藏的例子

    今天小编就为大家分享一篇layui radio点击事件实现input显示和隐藏的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • layui左侧菜单栏鼠标悬停显示菜单文字功能实现

    layui左侧菜单栏鼠标悬停显示菜单文字功能实现

    layui封装的左侧菜单是固定宽度的,且左侧菜单栏在css里改变宽度,效果并不是很好(还设计头部菜单栏),如果写js来让菜单栏能够拉伸,也比较麻烦,那怎么最简单的,让用户看到菜单的文字呢,下面给大家分享layui左侧菜单栏鼠标悬停显示菜单文字功能实现,感兴趣的朋友一起看看吧
    2024-06-06
  • Bootstrap实现各种进度条样式详解

    Bootstrap实现各种进度条样式详解

    本篇文章主要介绍了Bootstrap实现各种进度条样式详解 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Javascript & DHTML上传文件控件

    Javascript & DHTML上传文件控件

    首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。
    2008-07-07
  • js/jQuery简单实现选项卡功能

    js/jQuery简单实现选项卡功能

    本篇文章主要是对js/jQuery简单实现选项卡功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论