2022-03-20-☀️☀️单例模式
介绍
单例模式(Singleton Pattern)是最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。
这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象。
意图:保证一个类仅有一个实例,并提供一个访问它的全局访问点。
主要解决:一个全局使用的类频繁地创建与销毁。
何时使用:当您想控制实例数目,节省系统资源的时候。
如何解决:判断系统是否已经有这个单例,如果有则返回,如果没有则创建。
关键代码:构造函数是私有的。
应用实例:
-
1、一个班级只有一个班主任。
-
2、Windows 是多进程多线程的,在操作一个文件的时候,就不可避免地出现多个进程或线程同时操作一个文件的现象,所以所有文件的处理必须通过唯一的实例来进行。
-
3、一些设备管理器常常设计为单例模式,比如一个电脑有两台打印机,在输出的时候就要处理不能两台打印机打印同一个文件。
优点: -
1、在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例(比如管理学院首页页面缓存)。
-
2、避免对资源的多重占用(比如写文件操作)。
缺点:没有接口,不能继承,与单一职责原则冲突,一个类应该只关心内部逻辑,而不关心外面怎么样来实例化。
使用场景:
1、要求生产唯一序列号。
2、WEB 中的计数器,不用每次刷新都在数据库里加一次,用单例先缓存起来。
3、创建的一个对象需要消耗的资源过多,比如 I/O 与数据库的连接等。
注意事项:getInstance() 方法中需要使用同步锁 synchronized (Singleton.class) 防止多线程同时进入造成 instance 被多次实例化
前端单例模式实例
Vuex
Vuex基本原理,在vue上挂一个store属性,所以这个store属性一定要单一,而且不能被覆盖掉。
Vuex 是vue 状态管理工具,如果在一个项目里有多个store,一定乱套了,所以Vuex一定是单例模式的。
Vuex单例模式实现方式
let Vue // bind on install
export function install (_Vue) {
if (Vue && _Vue === Vue) {
if (__DEV__) {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
Vue = _Vue
applyMixin(Vue)
}
install的时候,把真Vue 赋值给 假Vue, 再次install的时候,就会提醒'[vuex] already installed. Vue.use(Vuex) should be called only once.'
弹出框
前端点击弹出一个dialog是非常普遍的需求。
我们在弹出一个dialog时,要保证window中没有相同dialog,比如点击一个按钮,弹出一个登录框,我们不可能需要两个登录框。
- 创建弹框,显示弹框:
<html>
<body>
<button id="loginBtn">登录</button>
</body>
<script>
var createLoginLayer = function(){
var div = document.createElement( 'div' );
div.innerHTML = ’我是登录浮窗’;
div.style.display = 'none';
document.body.appendChild( div );
return div;
};
document.getElementById( 'loginBtn' ).onclick = function(){
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
};
</script>
</html>
刚开始我们不需要单例模式,只需要设置关闭按钮,这样打开关闭,但是会有频繁的dom操作。
- 惰性单例模式:
var createLoginLayer = (function(){
var div;
return function(){
if ( ! div ){ //
div = document.createElement( 'div' );
div.innerHTML = ’我是登录浮窗’;
div.style.display = 'none';
document.body.appendChild( div );
}
return div;
}
})();
document.getElementById( 'loginBtn' ).onclick = function(){
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
};
div创建后为什么没有被销毁?
这是因为当执行var loginLayer = createLoginLayer();时,loginLayer返回了一个匿名函数的引用,它可以访问到createLoginLayer()被调用时产生的环境,而局部变量div一直处在这个环境里。既然局部变量所在的环境还能被外界访问,这个局部变量就有了不被销毁的理由。在这里产生了一个闭包结构,局部变量的生命看起来被延续了
《JavaScript设计模式与开发实践》