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
Sep 24 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 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
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
PHP如何自定义函数
2016/09/16 面试题
大学新闻系求职信
2014/06/03 职场文书
支部组织生活会方案
2014/06/10 职场文书
在校生证明
2015/06/17 职场文书
运动会主持词大全
2015/07/02 职场文书
外科护士长工作总结
2015/08/12 职场文书
赞美教师的句子
2019/09/02 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis