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 = 3console.log(singletonTest1 === singletonTest2) //trueconsole.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 = 3console.log(singleton1 === singleton2) //trueconsole.log(singleton2.x) //2console.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 = 3console.log(singleton1 === singleton2) //trueconsole.log(singleton2.x) //2console.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 = 3console.log(singleton1 === singleton2) //trueconsole.log(singleton2.x) //2console.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) //trueloading1.show()loading1.hide()loading1.show()loading2.show() //已经展示loading2.hide()loading2.hide() //已经隐藏

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

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

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

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

 

 

end ！！！

 

原文转载：http://www.shaoqun.com/a/485970.html

斑马物联网：https://www.ikjzd.com/w/1316

浩方：https://www.ikjzd.com/w/1046

乐一番：https://www.ikjzd.com/w/1562

1.单例模式解释单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。2.应用场景举例　登录页购物车vuex全局loading遮罩......3.代码解释1.通过闭包和立即执行函数实现varsinglet
sonar：https://www.ikjzd.com/w/215
环球华网：https://www.ikjzd.com/w/1063
成都锦里小吃介绍：http://tour.shaoqun.com/a/61939.html
广东哪里看海？广东哪里可以看海？：http://tour.shaoqun.com/a/3840.html
周末从雷州城区到巽寮湾怎去？：http://tour.shaoqun.com/a/40337.html