JS设计模式-单例模式

单例模式：限制类只能有一个实例化对象。

模式特点：

类只有一个实例
全局可访问
推迟初始化（与静态类，对象的区别）
主动实例化

实现方法：
创建一个类，这个类包含一个方法。在没有对象的情况下，这个方法会创建一个新的实例对象。如果对象存在，则只返回对象的引用地址。

应用场景：

登录弹窗
购物车
命名空间
引入第三方库（多次引用只会使用一个库引用，如jQuery）
全局态管理store-Vuex

优缺点：

优点：适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用
缺点：不适用动态扩展对象，或需创建多个相似对象的场景

“简单版”单例模式：

   let Signleton = function(name){this.name = namethis.instance = null}Signleton.prototype.getName = function(){console.log(this.name);}Signleton.getInstance = function(name){if(this.instance){return this.instance}return this.instance = new Signleton(name)}let Winner = Signleton.getInstance('Winner')let Loser = Signleton.getInstance('Loser')console.log(Winner === Loser);console.log(Winner.getName()); // Winnerconsole.log(Loser.getName()); //Loser

"透明版"单例模式
统一使用 new在进行实例化，创建实例功能和管理实例功能分离，使其符合‘单一职责原则’

    let createSignleton = (function(){let instance;return function(name){if(instance){return instance}this.name = namereturn instance = this}})()createSignleton.prototype.getName = function(){console.log(this.name);}let Winner = new createSignleton('Winner')let Loser = new createSignleton('Loser')console.log(Winner === Loser);console.log(Winner.getName()); // Winnerconsole.log(Loser.getName()); //Loser

“代理版”单例模式
通过代理的模式，意图将创建单例，管理单例拆分，实现更小的粒度划分，符合‘单一职责原则’

    let ProxyCreateSignleton = (function(){let instance;return function(name){// 代理函数只做管理单例if(instance){return instance}return instance = new Signleton(name)}})()// 独立的Signleton类，处理对象实例let Signleton = function(name){this.name = name}Signleton.prototype.getName = function(){console.log(this.name);}let Winner = new ProxyCreateSignleton('Winner')let Loser = new ProxyCreateSignleton('Loser')console.log(Winner === Loser);console.log(Winner.getName()); // Winnerconsole.log(Loser.getName()); //Loser

“惰性”单例模式
需要时才创建实例对象，按需加载。

需求：页面弹窗提示。多次调用，都只有一个弹窗对象，内部html不同

    let getSignleton = function(fn){var result;return function(){return result || (result = fn.apply(this, arguments))}}let createAlterMessage = function(html){var div = document.createElement('div')div.innerHTML = html;div.style.display = 'none'document.body.appendChild(div)return div}let createSignletonAlterMessage = getSignleton(createAlterMessage)document.getElementById('btn').addEventListener('click', function(){let alterMessage = createAlterMessage('这是唯一弹窗')alterMessage.style.display = 'block'})

参考文章：
https://segmentfault.com/a/1190000019532633
https://www.jianshu.com/p/7fa6ea107eff
https://juejin.cn/post/6909737165157203982#comment

JS设计模式-单例模式相关推荐

2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框
文章目录 1.什么是单例模式? 介绍特点结构 2.如何实现一个单例模式? 思路实现代码 3.单例模式的优缺点 4.懒汉模式和饿汉模式懒汉模式:一开始不会实例化,什么时候用才new出来实例化饿 ...
[转]JS设计模式-单例模式(二)
单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScript开发中 ...
js observer 添加_简单了解4种JS设计模式
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了15款有用前端开发的ST插件的知识,今天跟大家分享下4种 ...
js设计模式笔记小结
JS 设计模式面向对象搭建开发环境 npm / webapck / webpack-dev-server / babel babel-core babel-loader babel-polyfil ...
Python设计模式-单例模式
Python设计模式-单例模式基于Python3.5.2,代码如下 #coding:utf-8 import threading import timeclass Singleton(object) ...
[js]设计模式小结对原型的修改
js设计模式小结工厂模式/构造函数--减少重复- 创建对象有new- 自动创建obj,this赋值- 无return原型链模式 - 进一步去重类是函数数据类型,每个函数都有prototypecons ...
Android设计模式——单例模式(Singleton)
二十三种设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元 ...
【学习笔记】ABAP OOD设计模式 - 单例模式
ABAP OOD设计模式 - 单例模式整理转自-<SAP ABAP 面向对象程序设计(原则.模式及实践)> 单例模式(Singleton Pattern)是常用的且较为简单的软件设计模式 ...
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
Module(模块)模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法. 通过这种方式,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用局的特殊 ...
Go 语言实现 23 种设计模式单例模式
Go 语言实现 23 种设计模式单例模式单例模式单例模式是一种常用的软件设计模式,在使用过程中,单例对象的类只有一个实例.使用单例模式,1 可以节省内存等资源,例如windows操作系统的资源管 ...

JS设计模式-单例模式

JS设计模式-单例模式相关推荐

最新文章

热门文章