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弹出填写提示效果代码
Apr 16 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
js基于canvas实现时钟组件
Feb 07 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
DC动漫人物排行
2020/03/03 欧美动漫
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
js window.print实现打印特定控件或内容
2013/09/16 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
综合办公室岗位职责
2015/04/11 职场文书