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获取textarea中的光标位置
May 06 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
javascript操作excel生成报表示例
May 08 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
详解vue-router基本使用
Apr 18 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
基于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
COM in PHP (winows only)
2006/10/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python中的asyncio代码详解
2019/06/10 Python
Python实现微信小程序支付功能
2019/07/25 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python小项目之五子棋游戏
2019/12/26 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Java面试题及答案
2012/09/08 面试题
优秀应届生推荐信
2013/11/09 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
餐馆开业致辞
2015/08/01 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js