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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python实现购物车程序
2018/04/16 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python音频处理的示例详解
2020/12/23 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
工程造价专业大学生自荐信
2013/10/01 职场文书
迎新晚会策划方案
2014/06/13 职场文书
员工工作自我评价
2014/09/26 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Java 关于String字符串原理上的问题
2022/04/07 Java/Android