利用ES6实现单例模式及其应用详解

前言

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

单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。

单例模式能在合适的时候创建对象,并且创建唯一的一个。

代码接近于生活,很有意思。比如一个网站的登录,点击登录后弹出一个登录弹框,即使再次点击,也不会再出现一个相同的弹框。又或者一个音乐播放程序,如果用户打开了一个音乐,又想打开一个音乐,那么之前的播放界面就会自动关闭,切换到当前的播放界面。这些都是单例模式的应用场景。

要实现一个单例模式,一个经典的方式是创建一个类,类中又一个方法能创建该类的实例对象,还有一个标记,记录是否已经创了过了实例对象。如果对象已经存在,就返回第一次实例化对象的引用。

单例模式的实现

es5实现方式

var Singleton = function(name) {
 this.name = name;
 //一个标记,用来判断是否已将创建了该类的实例
 this.instance = null;
}
// 提供了一个静态方法,用户可以直接在类上调用
Singleton.getInstance = function(name) {
 // 没有实例化的时候创建一个该类的实例
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 // 已经实例化了,返回第一次实例化对象的引用
 return this.instance;
}

用户可以通过一个广为人知的接口,对该实例进行访问。

我们尝试对该对象进行两次实例化,观察两次实例化结果是否指向同一个对象。

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);

返回结果是:true。说明a、b之间是引用关系。

es6实现方式

创建Singleton类。class关键字和静态函数都是es6新增的。

class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 // 构造一个广为人知的接口,供用户对该类进行实例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}

单例模式应用实例

我们用一个生活中常见的一个场景来说明单例模式的应用。

任意一个网站,点击登录按钮,只会弹出有且仅有一个登录框,即使后面再点击登录按钮,也不会再弹出多一个弹框。这就是单例模式的典型应用。接下来我们实现它。为了注重单例模式的展示,我们把登录框简化吧😜

在页面上设置一个按钮

<button id="loginBtn">登录</button>

为这个按钮添加点击事件

const btn = document.getElementById('loginBtn');
btn.addEventListener('click', function() {
 loginLayer.getInstance();
}, false);

我们先给一个初始化方法init,在点击按钮之后,在页面上添加一个框框(权当登录框了)

init() {
 var div = document.createElement('div');
 div.classList.add('login-layer');
 div.innerHTML = "我是登录浮窗";
 document.body.appendChild(div);
}

那么接下来要用单例模式实现,点击按钮出现有且仅有一个浮窗,方法就是在构造函数中创建一个标记,第一次点击时创建一个浮窗,用改变标记的状态,再次点击按钮时,根据标记的状态判断是否要再创建一个浮窗。

上源码:

class loginLayer {
 constructor() {
  // 判断页面是否已有浮窗的标记
  this.instance = null;
  this.init();
 }
 init() {
  var div = document.createElement('div');
  div.classList.add('login-layer');
  div.innerHTML = "我是登录浮窗";
  document.body.appendChild(div);
 }
 // 静态方法作为广为人知的接口
 static getInstance() {
  // 根据标记的状态判断是否要再添加浮窗,如果标记不为空就创建一个浮窗
  if(!this.instance) {
   this.instance = new loginLayer();
  }
  return this.instance;
 }
}

当然不要忘记为浮窗添加一个样式,让浮窗显示啦

.login-layer {
 width: 200px;
 height: 200px;
 background-color: rgba(0, 0, 0, .6);
 text-align: center;
 line-height: 200px;
 display: inline-block;
}

最后奉上该实例的源码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>单例实现登录弹窗</title>
 <style>
  .login-layer {
   width: 200px;
   height: 200px;
   background-color: rgba(0, 0, 0, .6);
   text-align: center;
   line-height: 200px;
   display: inline-block;
  }
 </style>
</head>
<body>
 <button id="loginBtn">登录</button>
 <script>
  const btn = document.getElementById('loginBtn');
  btn.addEventListener('click', function() {
   loginLayer.getInstance();
  }, false);
  class loginLayer {
   constructor() {
    this.instance = null;
    this.init();
   }
   init() {
    var div = document.createElement('div');
    div.classList.add('login-layer');
    div.innerHTML = "我是登录浮窗";
    document.body.appendChild(div);
   }
   static getInstance() {
    if(!this.instance) {
     this.instance = new loginLayer();
    }
    return this.instance;
   }
  }
 </script>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • 利用ES6实现单例模式及其应用详解

    前言 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象. 单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点. 单例模式能在合适的时候创建对象,并且创建唯一的一个. 代码接近于生活,很有意思.比如一个网站的登录,点击登录后弹出一个登录弹框,即使再次点击,

  • 利用ES6语法重构React组件详解

    一.创建组件 ES6 class创建的组件语法更加简明,也更符合javascript.内部的方法不需要使用function关键字. React.createClass import React from 'react'; const MyComponent = React.createClass({ render: function() { return ( <div>以前的方式创建的组件</div> ); } }); export default MyComponent; Rea

  • ES6关于Promise的用法详解

    Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交互,后台熟悉数据库的增删查改. 想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性.如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行,这样按照Node的一般执行规律,要实现有序的异步操作,通常是一层加

  • 基于ES6作用域和解构赋值详解

    ES6 强制开启严格模式 作用域 •var 声明局部变量,for/if花括号中定义的变量在花括号外也可访问 •let 声明的变量为块作用域,变量不可重复定义 •const 声明常量,块作用域,声明时必须赋值,不可修改 // const声明的k指向一个对象,k本身不可变,但对象可变 function test() { const k={ a:1 } k.b=3; console.log(k); } test()解构赋值 { let a, b, 3, rest; [a, b, c=3]=[1, 2]

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • es6系列教程_ Map详解以及常用api介绍

    ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 '0'会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = new Map(); 常用方法: set( 键,值 ): 添加新的键值对元素 get( 键 ): 获取键对应的值,如果这个值不存在,返回undefined let map = new Map(); map.set( '0', 'ghostwu' ); map.set( 0, 'ghostwu' )

  • ES6中的Promise代码详解

    废话不多说了,直接给大家贴代码了,具体如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var a=0 var test=function(resolve, reject){ setTimeou

  • java 单例模式的实例详解

    java 单例模式的实例详解 概念: java中单例模式是一种常见的设计模式,单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种. 单例模式有一下特点: 1.单例类只能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. 3.单例类必须给所有其他对象提供这一实例. 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例.在计算机系统中,线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.这些应用都或多或少具有资源管理器的功能.每台计算机可以有若干个打

  • 利用二进制文件安装etcd的教程详解

    etcd组件作为一个高可用强一致性的服务发现存储仓库. etcd作为一个受到ZooKeeper与doozer启发而催生的项目,除了拥有与之类似的功能外,更专注于以下四点. 简单:基于HTTP+JSON的API让你用curl就可以轻松使用. 安全:可选SSL客户认证机制. 快速:每个实例每秒支持一千次写操作. 可信:使用Raft算法充分实现了分布式. 场景一:服务发现(Service Discovery)一个强一致性.高可用的服务存储目录.基于Raft算法的etcd天生就是这样一个强一致性高可用的

  • python 利用pyttsx3文字转语音过程详解

    这篇文章主要介绍了python 利用pyttsx3文字转语音过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 # -*- coding: utf-8 -*- import pyttsx3 engine = pyttsx3.init() with open("all.txt",'r',encoding='utf-8') as f: while 1: line = f.readline() print(line, end = '')

随机推荐