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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
关于js datetime的那点事
Nov 15 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
JS重载实现方法分析
Dec 16 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
js实现简易拖拽的示例
Oct 26 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
session 加入redis的实现代码
2016/07/15 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jquery foreach使用示例
2013/09/12 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
python的flask框架难学吗
2020/07/31 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
晚会邀请函范文
2014/01/24 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
保研推荐信范文
2015/03/25 职场文书
《少年闰土》教学反思
2016/02/18 职场文书