JS中的设计模式-单例模式

2,411 阅读3分钟

设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

以上回答来自于菜鸟教程我们可以看出设计模式在我们的工作中实际是息息相关的如果能用的好玩的溜那么对于工作肯定是有很大的帮助,最近学习了一部分常用的设计模式总结下来一是对自己知识学习的考察二是希望也可以对大家能有所帮助

前言

本次设计模式是一个连载的文章每一张篇幅会讲解一种设计模式,在接下来的过程中我们会一边实操代码一边举一些在工作中用的到的例子来结合进行讲解,今天主要介绍一下单例模式

开始

1.单例模式顾名思义保证一个类仅有一个实例,并且提供一个访问它的全局访问点

2.单例的好处是可以减少不必要的开销例如页面需要展示一个弹框,那么这个弹框只在首次的时候会进行创建,之后在进行点击的时候使用的都是之前创建好的

3.像Vue框架中生使用的new Vue就应用了单例模式

接下里我们看具体的代码实现

1.jpg

第一种普通版本

//1.第一种单例模式,实现起来不优雅并且不好复用,还会污染全局环境
let _instance = null
function getSingle(){
  if (!_instance){
    _instance = this
  }
  return _instance
}
​
let m1 = new getSingle()
let m2 = new getSingle()
​
console.log(m1 === m2) //true

第二种闭包版本

//2.第二种单例模式利用闭包实现单例模式,缺点是代码耦合性太强了我们需要按照单一职责去拆分
let getSingle2 = function (name) {
  this.name = name
}
​
getSingle2.getInst = (
  function () {
    let _instance
    return function (name) {
      if (!_instance){
        _instance = new getSingle2(name)
      }
      return _instance
    }
  }
)()
​
let g1 = getSingle2.getInst('丁不三')
let g2 = getSingle2.getInst('丁不四')
​
console.log(g1 === g2) // true

第三种版本符合单一职责

//3.第三种单例使用起来比上一个版本感觉会好很多,并且符合了单一职责原则,对外并没有暴露Single实现更细粒度的划分
const Single = function (name) {
  this.name = name
}
​
Single.prototype.getName = function () {
  return this.name
}
​
const CreateSingle = (function () {
  let _instance = null;
  return function (name) {
    if (_instance) return _instance
    _instance = new Single(name)
    return _instance
  }
})()
​
​
let v1 = new CreateSingle('令狐冲')
let v2 = new CreateSingle('岳灵珊')
​
console.log(v1 === v2) // true 保证同一个实例 

第四种版本惰性版本

//4.第四种单例模式是惰性单例模式调用的时候才会生成实例,其实惰性在前端是一个非常重要的优化手段,就像一些资源懒加载一样,const CreateSingleV1 = function (fn) {
  let _instance = null;
  return function () {
    return _instance || (_instance = fn.apply(this, arguments))
  }
}

弹框demo

//我们使用惰性单例模式实现了一个弹框demo
const createModal = function (message) {
  const box = document.createElement('div')
  box.innerHTML = message
  box.className = 'box'
  document.body.appendChild(box)
  return box
}
​
const createAlertMessaeg = CreateSingleV1(createModal)
​
modalAlert.onclick = function (params) {
  const alertMessaeg = createAlertMessaeg('独孤九剑yyds')
}

总结

来具体说一下单例模式的优缺点吧

优点:单例模式因为是只有一个实例避免了重复的创建销毁占用内存,经常应用在一个弹框或者对于一个用户配置一个购物车的情况,或者是全局状态管理等类似现在流行的vuex/mobx

缺点:在动态对象的扩展上比较差