JavaScript 的优雅编程技巧:Singleton Pattern

定义

  • 单例模式:保证一个类仅有一个实例,并提供一个访问的全局访问点。

特点

  1. 仅有一个实例对象
  2. 全局都可访问该实例
  3. 主动实例化
  4. 延迟实例化

类似单例模式的使用实践

  1. jQuery, lodash, moment ....
  2. 电商中的购物车(因为一个用户只有一个购物车)
  3. Vue 或 React 中全局状态管理(Vuex、Redux、Pinia)
  4. 全局组件

关键步骤及实现

  • 关键步骤:实现一个标准的单例模式其实就是用一个变量来表示是否已经为当前类创建过实例化对象,若创建过,在下次获取或创建实例时直接返回之前创建的实例化对象即可
  • 如下代码:可称为:简单版 单例模式
  1. var CreateStr = function (str) {
  2. this.str = str;
  3. this.instance = null;
  4. };
  5. CreateStr.prototype.getStr = function () {
  6. console.log(this.str);
  7. };
  8. CreateStr.getInstance = function (str) {
  9. if (!this.instance) {
  10. this.instance = new CreateStr(str);
  11. }
  12. return this.instance;
  13. };
  14. var a = CreateStr.getInstance('s1');
  15. var b = CreateStr.getInstance('s2');
  16. console.log('a ------>', a); // CreateStr { name: 's1', instance: null }
  17. console.log('b ------>', b); // CreateStr { name: 's1', instance: null }
  18. a.getStr(); // s1
  19. b.getStr(); // s1
  20. console.log(a === b); // true
  • 以上通过构造函数的方式来创建有一个问题,这个类不具有透明性(调用者并不知道这是一个单例类),因为这里使用的是 Person.getInstance 的方法来获取的实例化对象。
  • 改进后:可称为:透明版 单例模式
  1. var CreateStr = (function () {
  2. var instance = null;
  3. return function (str) {
  4. if (instance) {
  5. return instance;
  6. }
  7. this.str = str;
  8. return (instance = this);
  9. };
  10. })();
  11. CreateStr.prototype.getStr = function () {
  12. console.log(this.str);
  13. };
  14. let a = new CreateStr('s1');
  15. let b = new CreateStr('s2');
  16. console.log('a ------>', a); // { str: 's1' }
  17. console.log('b ------>', b); // { str: 's1' }
  18. a.getStr(); // s1
  19. b.getStr(); // s1
  20. console.log(a === b); // true
  • 通过以上的改进方式,主要目的是使用 new 操作符来获取单列对象。
  • 但以上代码还有一个问题,就是当我们需要创建很多个字符串时,要让这个单例类变成一个可产生多个实例的类,所有我们要将管理单例的操作和对象创建的操作分离开来。
  • 再次改进后:可称为:代理版 单例模式
  1. function CreateStr(str) {
  2. this.str = str;
  3. this.getStr();
  4. }
  5. CreateStr.prototype.getStr = function () {
  6. console.log(this.str);
  7. };
  8. var ProxyObj = (function () {
  9. var instance = null;
  10. return function (str) {
  11. if (!instance) {
  12. instance = new CreateStr(str);
  13. }
  14. return instance;
  15. };
  16. })();
  17. var a = new ProxyObj('s1');
  18. var b = new ProxyObj('s2');
  19. console.log('a ------>', a); // CreateStr { str: 's1' }
  20. console.log('b ------>', b); // CreateStr { str: 's1' }
  21. a.getStr(); // s1
  22. b.getStr(); // s1
  23. console.log('b ------>', a === b); // true

适用场景

  1. 全局缓存管理器
  2. 消息总线
  3. 购物车
  4. 全局状态管理
  5. 全局事件管理器

优缺点

  • 优点:

    1. 全局访问和单一实例:因为全局仅有一个实例对象,所以对单例的多个实例化都会得到的同一个实例,这就可以确保所有的对象都可访问一个实例。
    2. 节省资源:因为全局仅有一个实例对象,所以可节约系统资源,避免频繁创建和销毁对象,造成系统性能的浪费
  • 缺点:
    1. 违反单一职责原则:单例模式往往负责创建和管理实例,可能会导致职责过重
    2. 紧密耦合:引入了全局访问,使代码过度依赖,难以维护和测试

Tip: 文章部分内容参考于曾探大佬的《JavaScript 设计模式与开发实践》。文章仅做个人学习总结和知识汇总

JavaScript 的优雅编程技巧:Singleton Pattern的更多相关文章

  1. 符合语言习惯的Python优雅编程技巧

    Python最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.要写出 Pythonic(优雅的.地道的.整洁的)代码,需要多看多学大牛们写的代码,github 上有很多非常优秀 ...

  2. 符合语言习惯的 Python 优雅编程技巧

    Python最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.要写出 Pythonic(优雅的.地道的.整洁的)代码,需要多看多学大牛们写的代码,github 上有很多非常优秀 ...

  3. Learning JavaScript Design Patterns The Singleton Pattern

    The Singleton Pattern The Singleton pattern is thus known because it restricts instantiation of a cl ...

  4. 15个提高编程技巧的JavaScript工具

    原文地址:http://www.imooc.com/wenda/detail/243523 JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScri ...

  5. 几个一看就会的实用JavaScript优雅小技巧

    ️ 前言 这次我就给大家分享一些一看就会的实用JavaScript优雅小技巧. 「难度:」 「推荐阅读时长:5min」 正片 减少if...else面条代码 一旦当我们写到超过两个if...else的 ...

  6. ( 译、持续更新 ) JavaScript 上分小技巧(一)

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  7. 浅谈设计模式--单例模式(Singleton Pattern)

    题外话:好久没写blog,做知识归纳整理了.本来设计模式就是个坑,各种文章也写烂了.不过,不是自己写的东西,缺少点知识的存在感.目前还没做到光看即能记住,得写.所以准备跳入设计模式这个大坑. 开篇先贡 ...

  8. 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  10. 翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

随机推荐

  1. .NET 个人博客-给文章添加上标签

    个人博客-给文章添加上标签 优化计划 置顶3个且可滚动或切换 推荐改为4个,然后新增历史文章,将推荐的加载更多放入历史文章,按文章发布时间降序排列. 标签功能,可以为文章贴上标签 推荐点赞功能 本篇文 ...

  2. Windows下Qt5程序打包发布

    Windows下Qt5程序打包发布与图标设置 原文(有删改):https://blog.csdn.net/qq_39105333/article/details/114779650 设置程序图标 默认 ...

  3. 三屏异显案例分享,基于全国产RK3568J工业平台!

    在工业领域中,能否更灵活.更高效地在主屏幕进行主要任务,并在其他副屏幕上进行其他次要任务(例如查看参考资料.监控其他应用程序),一直都是许多工业领域客户面临的刚需,而"多屏异显"功 ...

  4. Advanced .Net Debugging 10:事后调试

    一.介绍 这是我的<Advanced .Net Debugging>这个系列的第十篇文章.这篇文章的内容是原书的第三部分的[高级主题]的第八章[事后调试].前面几篇文章,我们介绍了很多工具 ...

  5. React Lazy 和 Suspense

    在React应用中,有些组件可能不经常用到,比如法律条款的弹窗,我们几乎不看,这些组件也就没有必要首次加载,可以在点击它们的时候再加载,这就需要动态引入组件,需要组件的时候,才引入组件,加载它们,进行 ...

  6. AT_abc215F 题解

    考虑二分答案. 假设当前二分的答案为 \(k\),那么对于每个点,距离大于等于 \(k\) 的点构成了平面上 \(4\) 个子平面. 那么只需查询子平面中是否存在点即可,类似于窗口的星星,把问题转换成 ...

  7. Linux 提权-SUID/SGID_2

    本文通过 Google 翻译 SUID | SGID Part-2 – Linux Privilege Escalation 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校正及个别注释 ...

  8. Java报表开发工具总结

    Java报表工具,首先可以分成两大类:纯Java报表工具,和支持Java的报表工具. 支持Java的报表工具 支持Java的报表工具.其实就是非Java的报表工具,但是可以在Java程序中调用,这样的 ...

  9. Git 奇幻之旅⌛️

    第一天: 本地仓库 故事的主角是小明,一个刚入门编程的小白.他正在为一个项目写代码,但是他发现每次修改代码都很麻烦,因为他要不断地备份文件,而且很容易弄混版本.有一天,他听说了一个叫 Git 的神奇工 ...

  10. AT_abc218_d 题解

    洛谷链接&Atcoder 本篇题解为此题较简单做法及较少码量,并且码风优良,请放心阅读. 题目简述 给定一个平面内的 \(N\) 个点的坐标,求这 \(N\) 个点中选 \(4\) 个点可构成 ...