JavaScript设计模式之单例模式

栏目: 后端 · 发布时间: 7年前

内容简介:系统中被唯一使用,一个类只有一个实例,实现方法一般是先判断实例是否存在,如果存在就返回,不存在就创建再返回。在JavaScript里,单例作为空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。模式作用:

系统中被唯一使用,一个类只有一个实例,实现方法一般是先判断实例是否存在,如果存在就返回,不存在就创建再返回。

在JavaScript里,单例作为空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

模式作用:

  • 模块间通信
  • 系统中某个类的对象只能存在一个
  • 保护自己的属性和方法

注意事项:

  • 注意this的使用
  • 闭包容易造成内存泄漏,不需要的赶快干掉
  • 注意new的成本

代码示例

java中的单例模式

JavaScript设计模式之单例模式

java请类型可以私有化,外部new就会报错。

JavaScript中的单例模式

class SingleObject {
  login() {
	console.log('login')
  }
}
// 利用闭包实现了私有变量
SingleObject.getInstance = (fucntion () {
  let instance
  return function () {
	if (!instance) {
	  instance = new SingleObject()
	}
	return instance
  }
})()

let obj1 = SingleObject.getInstance()
obj1.login()
let obj2 = SingleObject.getInstance()
obj2.login()
// 两者是否相等
console.log(obj1 === obj2)


// js弱类型,没有私有方法,使用者还是可以直接new 一个 SingleObject,也会有 login方法
console.log('------------分割线------------')
let obj3 = new SingleObject()
obj3.login()
console.log('obj1===obj3',obj1 === obj3) // false 不是单例

最简单的单例模式,就是对象。在 JavaScript 中 定义一个对象(Object),那么它的属性,就只能通过它自己调用。就算两个不同的对象,有相同的属性名,也不能相互调用,保护了自己属性。

登录框 单例

class LoginForm {
  constructor() {
    this.state = 'hide'
  }
  show() {
    if (this.state === 'show') {
      alert('已经显示')
      return
    }
    this.state = 'show'
    console.log('登录框已显示')
  }
  hide() {
    if (this.state === 'hide') {
      alert('已经隐藏')
      return
    }
    this.state = 'hide'
    console.log('登录框已隐藏')
  }
}
LoginForm.getInstance = (function () {
  let instance
  return function () {
    if (!instance) {
      instance = new LoginForm();
    }
    return instance
  }
})()

// 一个页面中调用登录框
let login1 = LoginForm.getInstance()
login1.show()
// login1.hide()

// 另一个页面中调用登录框
let login2 = LoginForm.getInstance()
login2.show()

// 两者是否相等
console.log('login1 === login2', login1 === login2)

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

JavaScript设计模式之单例模式

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Domain-Driven Design

Domain-Driven Design

Eric Evans / Addison-Wesley Professional / 2003-8-30 / USD 74.99

"Eric Evans has written a fantastic book on how you can make the design of your software match your mental model of the problem domain you are addressing. "His book is very compatible with XP. It is n......一起来看看 《Domain-Driven Design》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具