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


Posted in Javascript onDecember 09, 2017

前言

在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在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>

总结

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

Javascript 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
微信小程序实现简单跑马灯效果
May 26 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
利用node.js如何创建子进程详解
Dec 09 #Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 #Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 #Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 #Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 #Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 #Javascript
Javascript中的作用域及块级作用域
Dec 08 #Javascript
You might like
PHP Google的translate API代码
2008/12/10 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
打架检讨书100字
2014/01/08 职场文书
办公设备采购方案
2014/03/16 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
团队精神口号
2014/06/06 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
会计工作态度自我评价
2015/03/06 职场文书
物流业务员岗位职责
2015/04/03 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers