JavaScript设计模式之单例模式

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

内容简介:系统中被唯一使用,一个类只有一个实例,实现方法一般是先判断实例是否存在,如果存在就返回,不存在就创建再返回。在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设计模式之单例模式

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

查看所有标签

猜你喜欢:

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

数字战争

数字战争

[英]查尔斯·亚瑟 / 余淼 / 中信出版社 / 2013-6-1 / 49

1998年,数码世界初具雏形。 至此以往,大浪淘沙。随着IT产业的迅猛发展,涌现出了以苹果、谷歌、微软为首的行业巨头。它们为争夺数码世界不同分支的霸主地位而争斗,包括搜索技术、移动音乐、智能手机和平板电脑市场。它们可利用的武器包括硬件、软件以及广告。同时,它们要赌上的则是公司的声望,当然,还有我们的未来。然而,无论在产品创新还是在战略优势上,这些企业彼此竞争、彼此砥砺,推动了行业的良性发展。......一起来看看 《数字战争》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具