单例模式
单例模式可能是设计模式外面最简略的模式了，尽管简略，但在咱们日常生活和编程中却常常接触到，本节咱们一起来学习一下。
单例模式（Singleton Pattern）又称为单体模式，保障一个类只有一个实例，并提供一个拜访它的全局拜访点。也就是说，第二次应用同一个类创立新对象的时候，应该失去与第一次创立的对象完全相同的对象。
1. 你已经遇见过的单例模式
- 当咱们在电脑上玩经营类的游戏，通过一番目迷五色的骚操作好不容易走上正轨，夜深了咱们去劳动，第二天关上电脑，发现要从头玩，立马就把电脑扔窗外了，所以个别心愿从前一天的进度接着打，这里就用到了存档。每次玩这游戏的时候，咱们都心愿拿到同一个存档接着玩，这就是属于单例模式的一个实例。
- 编程中也有很多对象咱们只须要惟一一个，比方数据库连贯、线程池、配置文件缓存、浏览器中的 window/document 等，如果创立多个实例，会带来资源消耗重大，或拜访行为不统一等状况。
- 相似于数据库连贯实例，咱们可能频繁应用，然而创立它所须要的开销又比拟大，这时只应用一个数据库连贯就能够节约很多开销。一些文件的读取场景也相似，如果文件比拟大，那么文件读取就是一个比拟重的操作。比方这个文件是一个配置文件，那么齐全能够将读取到的文件内容缓存一份，每次来读取的时候拜访缓存即可，这样也能够达到节约开销的目标。
在相似场景中，这些例子有以下特点：
- 每次访问者来拜访，返回的都是同一个实例；
- 如果一开始实例没有创立，那么这个特定类须要自行创立这个实例；
2. 实例的代码实现
- 如果你是一个前端 er，那么你必定晓得浏览器中的 window 和 document 全局变量，这两个对象都是单例，任何时候拜访他们都是一样的对象，window 示意蕴含 DOM 文档的窗口，document 是窗口中载入的 DOM 文档，别离提供了各自相干的办法。
- 在 ES6 新增语法的 Module 模块个性，通过 import/export 导出模块中的变量是单例的，也就是说，如果在某个中央扭转了模块外部变量的值，别的中央再援用的这个值是扭转之后的。除此之外，我的项目中的全局状态管理模式 Vuex、Redux、MobX 等保护的全局状态，vue-router、react-router 等保护的路由实例，在单页利用的单页面中都属于单例的利用（但不属于单例模式的利用。
- 在 JavaScript 中应用字面量形式创立一个新对象时，实际上没有其余对象与其相似，因为新对象曾经是单例了：
- 那么问题来了，如何对构造函数应用 new 操作符创立多个对象时，仅获取同一个单例对象呢。
- 对于刚刚打经营游戏的例子，咱们能够用 JavaScript 来
实现一下：
function ManageGame(){if(ManageGame._schedule){ // 判断是否曾经有单例了
return ManageGame._schedule
}
ManageGame._schedule = this
}
ManageGame.getInstance = function(){if(ManageGame._schedule){ // 判断是否曾经有单例了
return ManageGame._schedule
}
return ManageGame ._schedule =new ManageGame()}
const schedule1 = new ManageGame()
const schedule2 =ManageGame.getInstance()
console.log(schedule1===schedule2)ts 的 class 革新
class ManageGame{
private static schedule: any = null;
static getInstance() {if (ManageGame.schedule) { // 判断是否曾经有单例了
return ManageGame.schedule
}
return ManageGame.schedule = new ManageGame()}
constructor() {if (ManageGame.schedule) { // 判断是否曾经有单例了
return ManageGame.schedule
}
ManageGame.schedule = this
}
}
const schedule1 = new ManageGame()
const schedule2 = ManageGame.getInstance()
console.log(schedule1 === schedule2)// true毛病：下面办法的毛病在于保护的实例作为动态属性间接裸露，内部能够间接批改。
3. 单例模式的通用实现
依据下面的例子提炼一下单例模式，游戏能够被认为是一个特定的类（Singleton），而存档是单例（instance），每次拜访特定类的时候，都会拿到同一个实例。次要有上面几个概念：
- Singleton：特定类，这是咱们须要拜访的类，访问者要拿到的是它的实例；
- instance：单例，是特定类的实例，特定类个别会提供 getInstance 办法来获取该单例；
- getInstance：获取单例的办法，或者间接由 new 操作符获取；
3.1 IIFE 形式创立单列模式
- 简略实现中，咱们提到了毛病是实例会裸露，那么这里咱们首先应用立刻调用函数 IIFE 将不心愿公开的单例实例 instance 暗藏。
- 当然也能够应用构造函数复写将闭包进行的更彻底
const Singleton = (function() {
let _instance = null // 存储单例
const Singleton = function() {if (_instance) return _instance // 判断是否已有单例
_instance = this
this.init() // 初始化操作
return _instance
}
Singleton.prototype.init = function() {this.foo = 'Singleton Pattern'}
return Singleton
})()
const visitor1 = new Singleton()
const visitor2 = new Singleton()
console.log(visitor1 === visitor2) // true- 这样一来，尽管仍应用一个变量 _instance 来保留单例，然而因为在闭包的外部，所以内部代码无奈间接批改。
- 在这个根底上，咱们能够持续改良，减少 getInstance 静态方法：
const Singleton = (function() {
let _instance = null // 存储单例
const Singleton = function() {if (_instance) return _instance // 判断是否已有单例
_instance = this
this.init() // 初始化操作
return _instance
}
Singleton.prototype.init = function() {this.foo = 'Singleton Pattern'}
Singleton.getInstance = function() {if (_instance) return _instance
_instance = new Singleton()
return _instance
}
return Singleton
})()
const visitor1 = new Singleton()
const visitor2 = new Singleton() // 既能够 new 获取单例
const visitor3 = Singleton.getInstance() // 也能够 getInstance 获取单例
console.log(visitor1 === visitor2) // true
console.log(visitor1 === visitor3) // true- 代价和上例一样是闭包开销，并且因为 IIFE 操作带来了额定的复杂度，让可读性变差。
- IIFE 外部返回的 Singleton 才是咱们真正须要的单例的构造函数，内部的 Singleton 把它和一些单例模式的创立逻辑进行了一些封装。
- IIFE 形式除了间接返回一个办法 / 类实例之外，还能够通过模块模式的形式来进行，就不贴代码了，代码实现在 Github 仓库中，读者能够本人瞅瞅。
3.2 块级作用域形式创立单例
let getInstance
{
let _instance = null // 存储单例
const Singleton = function() {if (_instance) return _instance // 判断是否已有单例
_instance = this
this.init() // 初始化操作
return _instance
}
Singleton.prototype.init = function() {this.foo = 'Singleton Pattern'}
getInstance = function() {if (_instance) return _instance
_instance = new Singleton()
return _instance
}
}
const visitor1 = getInstance()
const visitor2 = getInstance()
console.log(visitor1 === visitor2)3.3 单例模式赋能
之前的例子中，单例模式的创立逻辑和原先这个类的一些性能逻辑（比方 init 等操作）混淆在一起，依据繁多职责准则，这个例子咱们还能够持续改良一下，将单例模式的创立逻辑和特定类的性能逻辑拆开，这样性能逻辑就能够和失常的类一样。
/* 性能类 */
class FuncClass {constructor(bar) {
this.bar = bar
this.init()}
init() {this.foo = 'Singleton Pattern'}
}
/* 单例模式的赋能类 */
const Singleton = (function() {
let _instance = null // 存储单例
const ProxySingleton = function(bar) {if (_instance) return _instance // 判断是否已有单例
_instance = new FuncClass(bar)
return _instance
}
ProxySingleton.getInstance = function(bar) {if (_instance) return _instance
_instance = new Singleton(bar)
return _instance
}
return ProxySingleton
})()
const visitor1 = new Singleton('单例 1')
const visitor2 = new Singleton('单例 2')
const visitor3 = Singleton.getInstance()
console.log(visitor1 === visitor2) // true
console.log(visitor1 === visitor3) // true- 这样的单例模式赋能类也可被称为代理类，将业务类和单例模式的逻辑解耦，把单例的创立逻辑形象封装进去，有利于业务类的扩大和保护。代理的概念咱们将在前面代理模式的章节中更加具体地探讨。
- 应用相似的概念，配合 ES6 引入的 Proxy 来拦挡默认的 new 形式，咱们能够写出更简化的单例模式赋能办法：
/* Person 类 */
class Person {constructor(name, age) {
this.name = name
this.age = age
}
}
/* 单例模式的赋能办法 */
function Singleton(FuncClass) {
let _instance
return new Proxy(FuncClass, {construct(target, args) {return _instance || (_instance = Reflect.construct(FuncClass, args)) // 应用 new FuncClass(...args) 也能够
}
})
}
const PersonInstance = Singleton(Person)
const person1 = new PersonInstance('张小帅', 25)
const person2 = new PersonInstance('李小美', 23)
console.log(person1 === person2) // true4. 惰性单例、懒汉式 - 饿汉式
有时候一个实例化过程比拟消耗性能的类，然而却始终用不到，如果一开始就对这个类进行实例化就显得有些节约，那么这时咱们就能够应用惰性创立，即提早创立该类的单例。之前的例子都属于惰性单例，实例的创立都是 new 的时候才进行。
惰性单例又被成为懒汉式，绝对应的概念是饿汉式：
- 懒汉式单例是在应用时才实例化
- 饿汉式是当程序启动时或单例模式类一加载的时候就被创立。
- 咱们能够举一个简略的例子比拟一下：
class FuncClass {constructor() {this.bar = 'bar'}
}
// 饿汉式
const HungrySingleton = (function() {const _instance = new FuncClass()
return function() {return _instance}
})()
// 懒汉式
const LazySingleton = (function() {
let _instance = null
return function() {return _instance || (_instance = new FuncClass())
}
})()
const visitor1 = new HungrySingleton()
const visitor2 = new HungrySingleton()
const visitor3 = new LazySingleton()
const visitor4 = new LazySingleton()
console.log(visitor1 === visitor2) // true
console.log(visitor3 === visitor4) // truets 实现
-
懒汉式单例
class LazySingleton{ private static instance:LazySingleton = null; private constructor(){//private 防止类在内部被实例化} public static getInstance():LazySingleton{if (LazySingleton.instance == null) {LazySingleton.instance = new LazySingleton(); } return LazySingleton.instance; } someMethod() {} } let someThing = new LazySingleton(); // Error: constructor of 'singleton' is private let instacne = LazySingleton.getInstance(); // do some thing with the instance
用懒汉式单例模式模仿产生美国当今总统对象。
剖析：在每一届任期内，美国的总统只有一人，所以本实例适宜用单例模式实现，图 2 所示是用懒汉式单例实现的结构图。
class SingletonLazy{public static main(arg) {let zt1 = President.getInstance();
zt1.getName();
let zt2 = President.getInstance();
zt2.getName();
if (zt1 === zt2) {console.log("他们是同一个人");
} else {console.log("他们不是同一人");
}
}
}
class President{
private static instance: President = null;
private constructor() {console.log("产生一个总统了");
}
public static getInstance():President{if (President.instance == null) {President.instance = new President();
} else {console.log("曾经有了一个总统了，不能产生新总统！");
}
return President.instance;
}
public getName():void {console.log("我是美国总统：特朗普。");
}
}- 饿汉式单例
namespace 饿汉式{
class HungrySingleton{private static instance: HungrySingleton = new HungrySingleton();
private constructor() {}
public static getInstance(): HungrySingleton{return HungrySingleton.instance;}
}
let someThing = new HungrySingleton(); // Error: constructor of 'singleton' is private
let instacne = HungrySingleton.getInstance(); // do some thing with the instance}5. 源码中的单例模式
以 ElementUI 为例，ElementUI 中的全屏 Loading 蒙层调用有两种模式：
// 1. 指令模式
Vue.use(Loading.directive)
// 2. 服务模式
Vue.prototype.$loading = service用服务形式应用全屏 Loading 是单例的，即在前一个全屏 Loading 敞开前再次调用全屏 Loading，并不会创立一个新的 Loading 实例，而是返回现有全屏 Loading 的实例。
上面咱们能够看看 ElementUI 2.9.2 的源码是如何实现的，为了观看不便，省略了局部代码：
import Vue from 'vue'
import loadingVue from './loading.vue'
const LoadingConstructor = Vue.extend(loadingVue)
let fullscreenLoading
const Loading = (options = {}) => {if (options.fullscreen && fullscreenLoading) {return fullscreenLoading}
let instance = new LoadingConstructor({el: document.createElement('div'),
data: options
})
if (options.fullscreen) {fullscreenLoading = instance}
return instance
}
export default Loading6. 单例模式的优缺点
单列模式的特点
- 单例类只有一个实例对象；
- 该单例对象必须由单例类自行创立；
- 单例类对外提供一个拜访该单例的全局拜访点。
单例模式次要解决的问题就是节约资源，放弃拜访一致性。
简略剖析一下它的长处：
- 单例模式在创立后在内存中只存在一个实例，节约了内存开销和实例化时的性能开销，特地是须要重复使用一个创立开销比拟大的类时，比起实例一直地销毁和从新实例化，单例能节约更多资源，比方数据库连贯；
- 单例模式能够解决对资源的多重占用，比方写文件操作时，因为只有一个实例，能够防止对一个文件进行同时操作；
* 只应用一个实例，也能够减小垃圾回收机制 GC（Garbage Collecation）的压力，体现在浏览器中就是零碎卡顿缩小，操作更晦涩，CPU 资源占用更少；
单例模式也是有毛病的
- 单例模式对扩大不敌对，个别不容易扩大，因为单例模式个别自行实例化，没有接口
- 在并发测试中，单例模式不利于代码调试。在调试过程中，如果单例中的代码没有执行完，也不能模仿生成一个新的对象。
- 与繁多职责准则抵触，一个类应该只关怀外部逻辑，而不关怀里面怎么样来实例化；
单例模式的应用场景那咱们应该在什么场景下应用单例模式呢：
- 当一个类的实例化过程耗费的资源过多，能够应用单例模式来防止性能节约；
- 当我的项目中须要一个公共的状态，那么须要应用单例模式来保障拜访一致性