JS设计模式——单例模式
1. 介绍
单例模式是JS设计模式中一种常用的模式
2. 定义
保证一个类中仅有一个实例,且提供一个访问它的全局访问点
3. 应用
一些只需要出现的一个UI组件,如登录窗口、弹窗toast、遮罩mask
4. 思想
用一个变量来标记是否已创建过对象,如果是就返回已创建过对象,如果不是则创建对象
5. 实现
1.基本的单例模式
var Singleton=function(){this.instance=null}Singleton.getInstance=(function(){var instance=nullreturn function(){if(!instance){instance=new Singleton()}return instance}})()Singleton.getInstance()
这就是一个基本的单例模式,但是这个单例模式看起来有些怪异,要求使用者必须知道Singleton类是一个单例类,不透明。获取对象一般是new XXX实现而这里是需要调用Singlenton的静态函数getInstance,。
2. 透明单例模式
我们要对上面的例子进行改造优化使得变得透明,和其他获取对象的方式一样,使用new XXX的格式,下面大致实现了一下,例子中还有很多的不足,主要是提供使用new方式的一种思路。
var Singleton=(function(){var instance=nullvar createDiv=function(){if(instance){return instance}instance=document.createElement("div")instance.innerHTML="div"}return function(){return instance||(instance=createDiv.apply(this))}
})()
var a = new Singleton()
var b=new Singleton()
console.log(a===b)//true
3. 用代理实现单例模式
例子2虽然初步实现了我们要的功能,但是在实际情况中,创建一个对象的情况可能复杂得多,例如传参,给元素设定颜色,设定文字等,而createDiv函数就会变得臃肿,而且如果有一希望可能返回多个对象就需要对createDiv进行改造
可以通过代理来实现,类负责具体的实现,单例决定要不要创建实例
var Singleton=function(){this.createDiv()
}
Singleton.prototype.createDiv=function(){this.instance= document.createElement("div")
}
var ProxySinglenton=(function(){var instancereturn function(){if(!instance){instance=new Singleton()}return instance}
})()
var a = new ProxySinglenton()
var b = new ProxySinglenton()
console.log(a===b)//true
不过个人觉得为了使用单例而去创建一个代理类有些浪费
4. 使用全局变量
上面三种方式都是去模仿传统的面向对象语言去创造单例的,先定义类,再从类中去创造单例,但js本身是没有类的,可以不用定义类。从单例的定义来说,全局变量也是单例,可以使用全部变量来创建单例,例如 var a={},但这种方式容易造成命名污染
5. 惰性单例
惰性单例的意思是需要的时候才创建对象
惰性单例的实现可以结合全局变量,因为前面说过既然是单例没有必要去定义一个类。这个例子中把创建对象和管理单例分开,创建对象的函数作为参数传入管理单例函数中,实现不同单例的创建。这也是通用的惰性单例。
var getSingle=function(fn){var resultreturn function(){return result||(result=fn.apply(this))}
}
var createSingleDiv=function(){var div=document.createElement("div")return div
}
var createP=function(){var p =document.createElement("p")return p
}
var createSingleDiv=getSingle(createDiv)
var createSingleP=getSingle(createP)
6. 建议
这里的例子中虽然大有不同,但是都有一个共同点是利用了闭包的特性,延长判断是否创建单例的变量的生命周期,对闭包有一定了了解更能体会到其中的妙处。
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操作系统的资源管 ...
最新文章
- fiddler使用技巧进阶,如何抓包修改数据?——AutoResponder重定向
- PyTorch 多机多卡训练:DDP 实战与技巧
- 刷脸,带来了方便,也带来了隐患,不可不防呀!
- 把Nginx注册成Windows 系统服务(转载)
- http referer 验证防御方法_渗透测试 跨站攻击防御与安全检测手法剖析
- anaconda的安装与使用详细教程
- 箭头函数的this指向谁_你好,我是 JavaScript 的 this
- javaEE版eclipse设置默认编码格式为utf-8
- tensorflow keras 搭建相机位姿估计网络--例
- 用SVM分类模型处理iris数据集
- 常用连接服务器的ssh工具
- 将两条类似的sql合并
- 《前端》JavaScript总结
- linux 如何做共享磁盘阵列,在Linux上玩转磁盘阵列分享
- [Erlang].erl文件的一生
- html分享插件,10个jQuery插件分享
- java插入数据到mysql数据库
- python延时执行下一步
- 利用 Python 爬取了 37483 条上海二手房信息,我得出的结论是?
- C++ 砺儒云课堂作业 第9章 模块化开发
热门文章
- Redis--zset类型操作命令
- python多级目录import_Python之路---包和模块
- 多维空间内过 n + 1 个点的空间的性质
- 使用LaTeX给PDF加背景
- 网络安全基础——服务器远程管理
- html水平制表和垂直制表,将水平制表符转换为垂直制表符(仅限HTML和CSS,无js)
- mysql 伪哈希_MySQL技巧--伪哈希索引
- 微信小程序码的生成(java)
- firewalls 查看防火墙状态_5条命令玩转Linux系统防火墙
- PHP获取真实客户端的真实IP REMOTE_ADDR,HTTP_CLIENT_IP,HTTP_X_FORWARDED_FOR