利用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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
一些mootools的学习资源
Feb 07 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 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 db类库进行数据库操作
2009/03/19 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
常用的Javascript数据验证插件
2015/08/04 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
vuejs指令详解
2017/02/07 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python中随机函数random用法实例
2015/04/30 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python排序算法实例代码
2017/08/10 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
PyQt5实现画布小程序
2020/05/30 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
考博自荐信
2013/10/25 职场文书
职业女性的职业规划
2014/03/04 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
Flink 侧流输出源码示例解析
2022/09/23 Servers