欢迎光临
我的个人博客网站

javascript 设计模式 – 单例模式实现及应用

1.单例模式解释

单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

 

2.应用场景举例 

登录页
购物车
vuex
全局loading遮罩

……

 

3.代码解释

1.通过闭包和立即执行函数实现

var singletonPatten = (function() {   // 单例构造函数   function singleton(arg) {     var arg = arg || {}     this.x = arg.x || 1     this.y = arg.y || 1   }   // 单例实例容器   var instance      return function(arg) {      if(!instance) {        instance = new singleton(arg)      }      return instance
  } }())
var singletonTest1 = singletonPatten({x: 2, y: 7}) var singletonTest2 = singletonPatten()
singleton1.z = 3 console.log(singletonTest1
=== singletonTest2) //true console.log(singletonTest2.x) // 2
console.log(singletonTest2.z) // 3

第一次取实例时, 把singleton实例存到instance中,第二次实例已经存在直接返回instance,所以第一次获得的实例和第二次获得的实例是相同的。

 

2.通过构造函数实现

function Singleton(arg) {   //实例是否已存在   if(typeof Singleton.instance === 'object') {     return Singleton.instance   }   var arg = arg || {}   this.x = arg.x || 1   this.y = arg.y || 1    //缓存实例   Singleton.instance = this }  var singleton1 = new Singleton({x: 2, y: 2}) var singleton2 = new Singleton() singleton1.z = 3 console.log(singleton1 === singleton2)  //true console.log(singleton2.x)  //2 console.log(singleton2.z)  //3

获得构造函数实例前先判断instance是否存在,存在则直接返回,否则将构造函数中的this进行缓存,下次取实例可以直接返回第一次获得的实例

 

3.构造函数重构实现

function Singleton(arg) {   var arg = arg || {}   //缓存实例   var instance = this   this.x = arg.x || 1   this.y = arg.y || 1    //重构构造函数   Singleton = function() {     return instance
  }
}
var singleton1 = new Singleton({x: 2, y: 2}) var singleton2 = new Singleton() singleton1.z = 3 console.log(singleton1 === singleton2) //true console.log(singleton2.x) //2 console.log(singleton2.z) //3

第一次获得实例先将实例缓存到instance中,然后就构造函数进行一个重构,重构后的构造函数直接返回缓存的实例instanceof,第二次获得后便直接返回直接缓存的实例

 

4.通过class类实现

class Singleton {   constructor(arg) {     var arg = arg || {}     this.x = arg.x || 1     this.y = arg.y || 1   }   static getInstance(arg) {     if(!Singleton.instance) {       Singleton.instance = new Singleton(arg)     }
    return Singleton.instance
  } }
var singleton1 = Singleton.getInstance({x: 2, y: 2}) var singleton2 = Singleton.getInstance() singleton1.z = 3 console.log(singleton1 === singleton2) //true console.log(singleton2.x) //2 console.log(singleton2.z) //3

静态方法getInstance获取类的实例,先判断instance上面是否缓存实例,没有缓存,如果存在直接返回。

  

 4.实际应用场景

实现一个全局loading遮罩框

class Loading {   constructor() {     this.visile = false   }   show() {     if(this.visile) {       console.log('已经展示')       return true     }     this.visile = true
  }   hide() {     if(!this.visile) {       console.log('已经隐藏')       return true     }     this.visile = false   }   static getLoadingMask() {     if(!Loading.instance) {       Loading.instance = new Loading()     }     return Loading.instance   } }

上述代码,定义了一个loading遮罩的类,有两个实例方法,show和hide,还有一个静态类getInstanceMask

当两处地方需要获得loading遮罩实例进行操作

var loading1 = Loading.getLoadingMask() var loading2 = Loading.getLoadingMask() console.log(loading1 === loading2)   //true loading1.show() loading1.hide() loading1.show() loading2.show()   //已经展示 loading2.hide() loading2.hide()   //已经隐藏

当对loading1和loading2执行show方法,第二次执行show会报已经展示,表示是同一个laoding遮罩实例

这样就实现了一个单例模式的实际应用场景。

其他的如基于vue的vuex就是最典型的单例模式,因为它的全局状态管理器,只能存在一个,不能多个。

单例模式实际为了节省资源而存在的一种模式,也是很常见的一种模式之一。

 

 

end !!!

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » javascript 设计模式 – 单例模式实现及应用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏