js设计模式：什么是单例模式？js单例模式的介绍

2024-06-30 04:07:05

什么是单例模式

定义：1.只有一个实例。2.可以全局访问

主要解决：一个全局使用的类频繁地创建与销毁。

js单例模式何时使用：当您想控制实例数目，节省系统资源的时候。

如何解决：判断系统是否已经有这个单例，如果有则返回，如果没有则创建。

js单例模式优点： 1、在内存里只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如管理首页页面缓存）。 2、避免对资源的多重占用（比如写文件操作）。

单例模式缺点：没有接口，不能继承，与单一职责原则冲突，一个类应该只关心内部逻辑，而不关心外面怎么样来实例化。

js单例模式使用场景： 1.全局缓存。2.弹窗

实现js单例模式：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

const singleton = function(name) {

this.name = name

this.instance = null

}

singleton.prototype.getName = function() {

console.log(this.name)

}

singleton.getInstance = function(name) {

if (!this.instance) { // 关键语句

this.instance = new singleton(name)

}

return this.instance

}

// test

const a = singleton.getInstance('a') // 通过 getInstance 来获取实例

const b = singleton.getInstance('b')

console.log(a === b)

JavaScript 中的单例模式

因为 JavaScript 是无类的语言，而且 JS 中的全局对象符合单例模式两个条件。很多时候我们把全局对象当成单例模式来使用

1	`var` `obj = {}`

弹框层的实践

实现弹框的一种做法是先创建好弹框，然后使之隐藏，这样子的话会浪费部分不必要的 DOM 开销，我们可以在需要弹框的时候再进行创建，同时结合单例模式实现只有一个实例，从而节省部分 DOM 开销。下列为登入框部分代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

//弹框层的实践

const createLoginLayer = function() {

const myDiv = document.createElement('div')

myDiv.innerHTML = '登入浮框'

// myDiv.style.display = 'none'

document.body.appendChild(myDiv);

return myDiv

}

//使单例模式和创建弹框代码解耦

const getSingle = function(fn) {

let result = null;

return function() {

if(!result){

result = fn.apply(this, arguments);

}

return result;

}

}

const createSingleLoginLayer = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {

createSingleLoginLayer()

}

js设计模式：什么是单例模式？js单例模式的介绍相关推荐

js observer 添加_简单了解4种JS设计模式
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了15款有用前端开发的ST插件的知识,今天跟大家分享下4种 ...
js设计模式笔记小结
JS 设计模式面向对象搭建开发环境 npm / webapck / webpack-dev-server / babel babel-core babel-loader babel-polyfil ...
[js]设计模式小结对原型的修改
js设计模式小结工厂模式/构造函数--减少重复- 创建对象有new- 自动创建obj,this赋值- 无return原型链模式 - 进一步去重类是函数数据类型,每个函数都有prototypecons ...
Java设计模式之创建型：单例模式
一.什么是单例模式: 单例模式可以确保系统中某个类只有一个实例,该类自行实例化并向整个系统提供这个实例的公共访问点,除了该公共访问点,不能通过其他途径访问该实例.单例模式的优点在于: 系统中只存在一个 ...
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
Module(模块)模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法. 通过这种方式,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用局的特殊 ...
php工厂模式和单例模式,php 设计模式之工厂模式、单例模式、注册树模式
php 设计模式之工厂模式.单例模式.注册树模式在软件工程中,创建型设计模式承担着对象创建的职责,尝试创建适合程序上下文的对象,对象创建设计模式的产生是由于软件工程设计的问题,具体说是向设计中增加复 ...
js设计模式——3.观察者模式
js设计模式--观察者模式 /*js设计模式--.观察者模式*/// 主题,保存状态,状态变化之后触发所有观察者对象 class Subject {constructor() {this.state ...
js 设计模式学习（1）
最近一个人外出旅行顺便在那座城市买了一本关于JS设计模式的书供无聊的时候阅读却发现小有收获旅游回来以后立马写下心得做了一个地图并以此总结此次旅行的经过的地方尝试1: 尝试写JS类 1 v ...
23种设计模式（1）：单例模式
2019独角兽企业重金招聘Python工程师标准>>> 定义:确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 类型:创建类模式类图: 类图知识点: 1.类图分为三 ...
useRef与JS设计模式学习(一)
useRef与JS设计模式学习(一) useRef const refContainer = useRef(initialValue); 使用useRef Hook,你可以轻松的获取到dom的ref. ...

最新文章

热门文章