单例模式的概念
1、单例模式 的核心是 确保 一个类 仅有一个 实例，并提供一个访问它的全局接口，能够全局访问
2、使用 JavaScript 实现一个标准的单例很简单,就是使用一个变量作为标识来判断当前是否已经创建过对象,如果没有就创建,如果已经创建则返回之前创建过的对象
3、VueX React-redux 等框架全局状态管理工具 运用了 单例模式 的特性
4、通过 全局变量 来实现的单例模式，会有 全局变量 经常带来 命名污染 的问题
5、JavaScript 的作者都说 全局变量 是一个糟糕的特性,作为普通开发者的我们,我们其实有必要去减少全局变量污染问题
单例模式的功能
基于 核心概念 确定 单例模式 功能
1、确保一个 类 只有一个 实例
2、提供给全局访问的 Api
一般分为
1、惰性单例模式
在调用的时候创建实例
2、非惰性单例模式
在初始化就创建好实例
单例模式的实现
传统面向对象语言中实现
var SingleTon = function(name){
this.name = name;
this.instance = null;
}
SingleTon.proptype.getName = function(){
alert(this.name);
}
SingleTon.getInstance = function(name){
if(!this.instance){
this.instance = new SingleTon(name);
}
return this.instance;
}
var a = SingleTon.getInstance('sven1');
var b = SingleTon.getInstance('sven2');
class 风格实现
1、惰性单例
class Single {
static getInstance () {
if (!Single.instance) {
Single.instance = new Single();
}
return Single.instance;
}
}
const test1 = Single.getInstance();
const test2 = Single.getInstance();
console.log(test1 === test2); // true
2、非惰性单例
class Single {
static instance = new Single();
static getInstance () {
return Single.instance;
}
}
const test1 = Single.getInstance();
const test2 = Single.getInstance();
console.log(test1 === test2); // true
单例模式的运用场景
1、Redux、Vuex 等状态管理工具，还有我们常用的 window 对象、全局缓存等。
2、被缓存的内容，例如登录弹窗。
3、一个地方如果在你的项目中可以用到两次或两次以上，都可以尝试一下这个，能够减少很多代码。
总结
单例模式可以说在前端范围你不可能遇不上,特别是单例惰性模式,在适合的时候才创建对象,并且只创建唯一的一个
如果创建对象和管理创建单例职责分布在两个不同的方法当中,解耦性的加持会让这个模式威力大大增加,这是能提高性能的一个突破口
Vue, React 的路由懒加载的实现都是有着单例惰性思想在里边,把单例模式的一些想法学好你就能改动你现有大部分代码
单例模式总结
小结
实例如果存在，直接返回已创建的，符合开放封闭原则。
使用场景
Redux、Vuex 等状态管理工具，还有我们常用的 window 对象、全局缓存等。
优点
1、划分命名空间，减少全局变量
2、增强模块性，把自己的代码组织在一个全局变量名下，放在单一位置，便于维护
3、只会实例化一次,简化了代码的调试和维护
缺点
1、由于单例模式提供的是一种单点访问，所以它有可能导致模块间的强耦合 从而不利于单元测试。
2、无法单独测试一个调用了来自单例的方法的类，而只能把它与那个单例作为一个单元一起测试。
场景例子
1、定义命名空间和实现分支型方法
2、登录框
3、vuex 和 redux 中的 store