Js设计模式 - 单例模式实现及应用

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就是最典型的单例模式，因为它的全局状态管理器，只能存在一个，不能多个。

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

链接: https://www.fly63.com/article/detial/9797

Js设计模式 - 单例模式实现及应用

js设计模式之单例模式,javascript如何将一个对象设计成单例

前端设计模式：从js原始模式开始，去理解Js工厂模式和构造函数模式

JavaScript设计模式_js实现建造者模式

html和xhtml，DOCTYPE和DTD，标准模式和兼容模式

前端四种设计模式_JS常见的4种模式

javascript 策略模式_理解js中的策略模式

javascript观察者模式_深入理解js中的观察者模式

Vue中如何使用方法、计算属性或观察者

我最喜欢的 JavaScript 设计模式

Flutter 设计模式 - 简单工厂