【设计模式-前端】单例模式深刻理解和实现
引言
内容速递：看了本文您能了解到的知识
1、什么是单例模式
一句话介绍：保证类的实例只有一个。
1.1、简述前端的类
说到类，JS在ES6提供了更接近面向对象语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
注意：JavaScript本质上是基于对象的语言
1.2、类是语法糖
其实，ES6的Class可以看作只是Function的语法糖，它的绝大部分功能，ES5的Function都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
2、单例在前端的应用场景
单例模式在前端应用范围内有很多应用场景。
2.1、Vuex
很典型的单例模式的应用。Vuex的store就是一个单例模式。采用了单一状态树，一个对象即为唯一数据源。
可以简单看一下Vuex源码
let Vue
...
export function install (_Vue) {
if (Vue && _Vue === Vue) {
if (process.env.NODE_ENV !== 'production') {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
Vue = _Vue
applyMixin(Vue)
}
可以看到Vuex在install的时候，判断是否有了唯一的state。反之，如果没有这一段逻辑，在Vue中使用的时候
// 安装插件
Vue.use(Vuex)
...(Vuex操作)
// 再次安装
Vue.use(Vuex)
再次安装的时候，唯一数据源store被重新生成，中间的Vuex操作就没有了
2.2、Redux
Redux提供的全局的store，和Vuex一样，必须是一个单例模式，不然每个组件各玩各的，如何实现数据协调同步呢。
2.3、全局组件
在前端中有一些全局组件，例如：创建全局唯一的对话框实例、记录日志信息全局唯一实例、登录弹窗、购物车等等。
这些组件都有一个特点，只有一个实例，状态唯一。
2.4、import
在ES6中，import 引入的模块是会自动执行的，但是有的时候我们可能会重复引入一个模块，但是这个时候不会执行多次，因为import就用到了SIngleton模式。
2.5、更多
还想看吗？可重点不是列举额，那这里也不多列举了，只能给你展示更多了！
3、单例的实现
3.1、思路
思路很简单，那就是一个类只有一个实例。
3.2、实现
那怎么做到一个类只有一个实例？
去获取一个类的实例之前，去判断一下这个实例是否存在，如果存在直接把这个实例返回，那这样，不就是一个类只有一个实例了吗？
一个正常的类
每次new出来的实例都是不一样的
class SingleItem {
show() {
console.log('我是一个单例')
}
}
const s1 = new SingleItem()
const s2 = new SingleItem()
console.log(s1 === s2)
// false
借助Class和static实现单例
class SingleItem {
static instance
show() {
console.log('我是一个单例')
}
static getInstance() {
return SingleItem.instance || (SingleItem.instance = new SingleItem())
}
}
const s1 = SingleItem.getInstance()
const s2 = SingleItem.getInstance()
console.log(s1 === s2)
// true
4、单例的优点与弊端
4.1、优点
- 在单例模式中，活动的单例只有一个实例，对单例类的所有实例化得到的都是相同的一个实例。这样就 防止其它对象对自己的实例化，确保所有的对象都访问一个实例。
- 由于在系统内存中只存在一个对象，因此可以 节约系统资源，当 需要频繁创建和销毁的对象时单例模式无疑可以提高系统的性能。
- 避免对共享资源的多重占用。
4.2、弊端
- 由于单利模式中没有抽象层，因此单例类的扩展有很大的困难。
- 单例类的职责过重，在一定程度上违背了
单一职责原则。 - 不适用于变化的对象，如果同一类型的对象总是要在不同的用例场景发生变化，单例就会引起数据的错误，不能保存彼此的状态。
5、单例实战
5.1、实现一个Storage
听说是一个面试题！
问题描述：
实现一个Storage，让该对象成为单例对象，可以基于localStorage实现。
思路：
1、获取实例
2、实例唯一
代码：
class Storage {
static instance
static getInstance() {
return Storage.instance || (Storage.instance = new Storage())
}
getItem(key) {
return localStorage.getItem(key)
}
setItem(key, value) {
localStorage.setItem(key, value)
}
}
测试一下：
const s1 = Storage.getInstance()
const s2 = Storage.getInstance()
s1.setItem('name', 'aaa')
// 测试两个的实例是否为同一个
s1.getItem('name') // aaa
console.log(s1.getItem('name'))
s2.getItem('name') // aaa
console.log(s2.getItem('name'))
console.log(s1 === s2)
// true
5.2、实现一个全局的Modal框
面试题+1
问题描述：
用单例模式写一个全局的Modal框
思路：
1、获取实例
2、实例唯一
这里也可以通过闭包来实现
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单例Modal框</title>
</head>
<body>
<div id="openModal">打开Modal框</div>
<div id="closeModal">关闭Modal框</div>
</body>
<script>
// 实现Modal框
const Modal = (function() {
let modal = null
return function() {
if (!modal) {
modal = document.createElement('div')
modal.innerHTML = '我是Modal框'
modal.style.display = 'none'
document.body.appendChild(modal)
}
return modal
}
})()
document.getElementById('openModal').addEventListener('click', function() {
const modal = new Modal()
modal.style.display = 'block'
})
document.getElementById('closeModal').addEventListener('click', function() {
const modal = new Modal()
modal && (modal.style.display = 'none')
})
</script>
</html>
总结
慢慢开发的年龄大了，就越想搞点新玩意，但是编程的思维却越来越需要有足够的长进。最近要做一个JS-SDK，单例的思想值得好好琢磨琢磨！
博客说明与致谢
文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。
引用的资料如有侵权，请联系本人删除！
感谢万能的网络，W3C，菜鸟教程等！
如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！关注我一起成长！
幸好我在，感谢你来！