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 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
一些PHP的面试题
2015/05/06 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
学生实习自我鉴定
2013/10/11 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
初三语文教学反思
2016/03/03 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL