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


Posted in Javascript onMay 06, 2020

本文实例讲述了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 中即可。而外面的使用方式都是不变的,这样就用最少的修改完成了功能的新增,是不是很棒呀~

总结

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

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

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

参考内容

  • JavaScript Object Oriented Patterns: Factory Pattern
  • 《JavaScript 设计模式》
  • 《JavaScript 面向对象编程指南》

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

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

Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
JS闭包用法实例分析
Mar 27 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 #Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 #Javascript
JavaScript布尔运算符原理使用解析
May 06 #Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 #Javascript
Vue 的双向绑定原理与用法揭秘
May 06 #Javascript
微信小程序中使用 async/await的方法实例分析
May 06 #Javascript
JavaScript常用工具函数大全
May 06 #Javascript
You might like
3
2006/10/09 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python线程指南详细介绍
2017/01/05 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
提升python处理速度原理及方法实例
2019/12/25 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
体育活动总结
2015/02/04 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers