关于前端:单列模式

50次阅读

共计 8245 个字符，预计需要花费 21 分钟才能阅读完成。

单例模式

单例模式可能是设计模式外面最简略的模式了，尽管简略，但在咱们日常生活和编程中却常常接触到，本节咱们一起来学习一下。
单例模式（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)    // true

4. 惰性单例、懒汉式 - 饿汉式

有时候一个实例化过程比拟消耗性能的类，然而却始终用不到，如果一开始就对这个类进行实例化就显得有些节约，那么这时咱们就能够应用惰性创立，即提早创立该类的单例。之前的例子都属于惰性单例，实例的创立都是 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)    // true

ts 实现

  • 懒汉式单例

    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 Loading

6. 单例模式的优缺点

单列模式的特点

  • 单例类只有一个实例对象；
  • 该单例对象必须由单例类自行创立；
  • 单例类对外提供一个拜访该单例的全局拜访点。

单例模式次要解决的问题就是节约资源，放弃拜访一致性。
简略剖析一下它的长处：

  • 单例模式在创立后在内存中只存在一个实例，节约了内存开销和实例化时的性能开销，特地是须要重复使用一个创立开销比拟大的类时，比起实例一直地销毁和从新实例化，单例能节约更多资源，比方数据库连贯；
  • 单例模式能够解决对资源的多重占用，比方写文件操作时，因为只有一个实例，能够防止对一个文件进行同时操作；
    * 只应用一个实例，也能够减小垃圾回收机制 GC（Garbage Collecation）的压力，体现在浏览器中就是零碎卡顿缩小，操作更晦涩，CPU 资源占用更少；

单例模式也是有毛病的

  • 单例模式对扩大不敌对，个别不容易扩大，因为单例模式个别自行实例化，没有接口
  • 在并发测试中，单例模式不利于代码调试。在调试过程中，如果单例中的代码没有执行完，也不能模仿生成一个新的对象。
  • 与繁多职责准则抵触，一个类应该只关怀外部逻辑，而不关怀里面怎么样来实例化；

单例模式的应用场景那咱们应该在什么场景下应用单例模式呢：

  • 当一个类的实例化过程耗费的资源过多，能够应用单例模式来防止性能节约；
  • 当我的项目中须要一个公共的状态，那么须要应用单例模式来保障拜访一致性

正文完
前端
发表至： 前端
2021-06-03
 0
关于前端:Fabricjs-自由绘制矩形
关于前端:前端开发攻城狮秋招经验帖
关于前端:用户与产品竞品对比方案
关于前端:WordPress-安全日志中要监控的-4-个重要事件