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


Posted in Javascript onMay 06, 2020

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

良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式。

今天先从最简单的一个入手:单例模式。

文中的示例代码会使用 ES6 语法,尽量简化不必要的细节

概念

单例模式(Singleton)属于创建型的设计模式,它限制我们只能创建单一对象或者某个类的单一实例。

通常情况下,使用该模式是为了控制整个应用程序的状态。在日常的开发中,我们遇到的单例模式可能有:Vuex 中的 StoreVue 的根实例任何导出单个对象的 ES6 模块等。

字面量写法

最简单的单例其实就像下面这样:

const cat = {
  name: 'mi',
  age: 4
}

了解 const 语法的小伙伴都知道,这只喵是不能被重新赋值的,但是它里面的属性其实是可变的。

如果想要一个不可变的单例对象:

const cat = {
  name: 'mi',
  age: 4
}

Object.freeze(cat);

这样就不能新增或修改这只喵上的任何属性,它变成了 冰冻喵~

如果是在模块中使用,上面的写法并不会污染全局作用域,但是直接生成一个固定的对象缺少了一些灵活性。

常用写法

相对而言,使用类或工厂方法来实现单例更加常用。假设我们有一个叫作 Logger 的类,它具有和 Console 相同的 API。

类单例

类的单例写法非常常用,如果我们想要这么使用它:

const logger = new Logger();
logger.log('msg');

// 这里大概写了 1000 行代码

const logger2 = new Logger();
logger.log('new msg');

logger === logger2; // true

即尽管 new 了多次 Logger,它返回的都是同一个实例。

下面直接看最实用的实现方式:

class Logger {
  constructor () {
    if (!Logger._singleton) {
      Logger._singleton = this;
    }
    return Logger._singleton;
  }
  
  log (...args) {
    console.log(...args);
  }
}

export default Logger;

上面的方式将单例对象存储在了构造器上,这样的话不管 new Logger 多少次,返回的都是同一个 Logger 实例了。

这里有一个细节需要注意,即 new 关键字后面的构造函数如果显式返回一个对象,new 表达式就会返回该对象。

具体可参见 《你不知道的 JavaScript (上卷)》中的 new 绑定 相关章节。

工厂单例

如果不喜欢用 new 关键字,可以使用工厂方法返回单例对象。

let logger = null

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

function createLogger() {
  if (!logger) {
    logger = new Logger();
  }
  return logger;
}

export default createLogger;

上面的代码相当于在模块内部缓存了 logger 实例,然后导出了一个工厂方法。这种写法在模块化代码中比较常见,工厂方法也可以接收参数用来初始化单例对象。

今天的内容比较好理解,其中的单例写法也是笔者常用的方法。

下一篇我们再具体讲讲工厂模式的应用~

参考内容

  • 《JavaScript 设计模式》
  • 《JavaScript 面向对象编程指南》
  • 《你不知道的 JavaScript (上卷)》
  • Working with Singletons in JavaScript

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

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

Javascript 相关文章推荐
jquery向上向下取整适合分页查询
Sep 06 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
js字符串操作方法实例分析
May 06 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
node基于async/await对mysql进行封装
Jun 20 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
详解react组件通讯方式(多种)
May 06 #Javascript
You might like
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
解析PHP的session过期设置
2013/06/29 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Django框架验证码用法实例分析
2019/05/10 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
python 多线程中join()的作用
2020/10/29 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
世界经理人咨询有限公司面试
2014/09/23 面试题
办公室副主任岗位职责
2013/11/25 职场文书
大学军训感言
2014/01/10 职场文书
八年级语文教学反思
2014/02/11 职场文书
班班通校本培训方案
2014/03/12 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL