利用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 相关文章推荐
jquery插件开发之实现md5插件
Mar 17 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
js实现百度搜索提示框
Feb 05 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
javascript截取字符串小结
2015/04/28 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
医药代表个人求职信范本
2013/12/19 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
治庸问责心得体会
2014/09/12 职场文书
实训报告范文大全
2014/11/04 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
八年级英语教学计划
2015/01/23 职场文书
团委工作总结2015
2015/04/02 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL