介绍
单例模式（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设计模式与开发实践》
网友评论