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学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
vue debug 二种方法
Sep 16 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python @property使用方法解析
2019/09/17 Python
python可视化实现KNN算法
2019/10/16 Python
Python程序暂停的正常处理方法
2019/11/07 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
this关键字的作用
2016/01/30 面试题
最新党员思想汇报
2014/01/01 职场文书
办公室人员先进事迹
2014/01/27 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
地理教师岗位职责
2014/03/16 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
Windows7下FTP搭建图文教程
2022/08/05 Servers