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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
数据库的日期格式转换
2006/10/09 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python中的with...as用法介绍
2015/05/28 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
单位创先争优活动方案
2014/01/26 职场文书
优秀医生事迹材料
2014/02/12 职场文书
租房合同协议书
2014/04/09 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
MySQL基础(二)
2021/04/05 MySQL
详解Go与PHP的语法对比
2021/05/29 PHP