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插件jbox使用iframe关闭问题
Feb 09 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
js实现五星评价功能
2017/03/08 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
opencv python如何实现图像二值化
2020/02/03 Python
python 如何设置守护进程
2020/10/29 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
求职简历推荐信范文
2013/12/02 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
授权委托书
2015/01/28 职场文书
2014年度个人总结范文
2015/03/09 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang