解析Javascript单例模式概念与实例


Posted in Javascript onDecember 05, 2016

前言

和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式、代理模式、观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构。

本文将介绍Javascript模式中较为常见和实用的模式——单例模式,主要分为概念和实例部分。在介绍实例的同时也会对代码中额外的知识点进行讲解。

单例模式概念

首先什么是单例模式?可以这样理解:单例模式旨在保证一个类仅有一个实例,并提供一个全局的访问点。

可能有人还是不太理解单例的概念,那么你可以想象生活中的一些例子。比如注册账号的时候,如果我们注册的账号已经存在,那么系统会提示我们“账号已经存在是否使用该账号登陆”,我们无法再次创建一个一模一样的账号,除非把原账号注销。这就是单例模式的生动体现。

类似的例子还有网页上的登陆弹框,无论我们点击多少次登陆按钮,界面上始终只会显示一个登陆弹框,无法再创建第二个。

本文就将以登陆弹框为例介绍单例模式的使用方式。

单例模式实例

1.demo展示

解析Javascript单例模式概念与实例

下载地址为:弹框实例

2.代码展示

构建单例模式弹框实例的代码每个人可能写的都不一样,但是目的都是一个:构建一个全局唯一并可访问的弹框。接下来我们一步一步来实现这个例子。

(1)获取DOM对象

var $ = function(id) {
 return typeof id === 'string' ? document.getElementById(id) : id; 
};

首先为了便于之后关于DOM的一些操作,我们这里利用函数式编程的原理将获取目标id的元素对象方法封装了一下,直接利用$(id)就可以获取。

(2)弹框构造函数

var Modal = function(id, html) {
 this.html = html;
 this.id = id;
 this.open = false;
};

这里我们声明了一个Modal作为弹框的构造函数,并且再其内部定义了公有属性html、id和open。html用来定义弹框内部的内容,id用来给弹框定义id名称,open用于判断弹框是否打开。

(3)open方法

Modal.prototype.create = function() {
 if (!this.open) {
 var modal = document.createElement('div');
 modal.innerHTML = this.html;
 modal.id = this.id;
 document.body.appendChild(modal);
 setTimeout(function() {
  modal.classList.add('show');
 }, 0);
 this.open = true;
 }
};

我们在Modal的原型链上定义了create方法,方法内部我们创建并向DOM中插入弹框,同时给弹框加上一个class为”show”的动画效果。这里简单介绍下classList:

classList是一个比className更便捷的操作元素class的属性,不过在兼容性方面不兼容IE10以下版本:

解析Javascript单例模式概念与实例

其提供的操作class方法和jQuery的类似,主要有

  • add(class1, class2, …) 在元素中添加一个或多个类名,类似jQuery的addClass()
  • remove(class1, class2, …) 移除元素中一个或多个类名,类似jQuery的removeClass()
  • contains(class) 判断指定的类名是否存在,类似jQuery的hasClass()

这里我们用到了add方法给Modal添加show类。

(4)close方法

Modal.prototype.delete = function() {
 if (this.open) {
 var modal = $(this.id);
 modal.classList.add('hide'); 
 setTimeout(function() {
  document.body.removeChild(modal);
 }, 200);
 this.open = false;
 }
};

定义了open方法后我们这里定义关闭弹框的方法,在其内部给弹框对象添加hide类动画效果,最后在页面上移除弹框对象。

(5)创建实例

var createIntance = (function() {
 var instance;
 return function() {
 return instance || (instance = new Modal('modal', '这是一个弹框'))
 }
})();

这是实现单例模式的重要部分,我们来分析下知识点:

使用闭包封装了instance私有变量并返回一个函数

利用 || 语法判断如果instance不存在则执行后者的实例化Modal方法,存在则直接返回instance,确保了只存在一个弹框实例

本实例的创建也可以理解为代理模式的一部分。

(6)按钮操作

var operate = {
 setModal: null,
 open: function() {
 this.setModal = createIntance();
 this.setModal.create();
 },
 delete: function() {
 this.setModal ? this.setModal.delete() : '';
 }
};

这里我们将按钮操作放在operate对象里,使得打开和关闭操作可以通过this获取实例setModal。

(7)绑定事件

$('open').onclick = function() {
 operate.open();
};
$('delete').onclick = function() {
 operate.delete();
};

最后我们将打开和删除方法绑定到两个按钮上去,至此我们用单例模式实现的弹框demo就实现了。

结语

本文只演示了单例模式的一种实现方式,至于如何构建一个通用的单例模式就交给有兴趣的读者了。

文章灵感来源于《Javascrit设计模式与开发实践》一书。

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
Seajs的学习笔记
Mar 04 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
有关Promises异步问题详解
Nov 13 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 #Javascript
深入理解jQuery()方法的构建原理
Dec 05 #Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 #Javascript
浅析Ajax语法
Dec 05 #Javascript
jQuery的事件预绑定
Dec 05 #Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 #Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 #Javascript
You might like
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Flask之flask-session的具体使用
2018/07/26 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python默认参数调用方法解析
2020/02/09 Python
Python数据可视化图实现过程详解
2020/06/12 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
旅游安全协议书
2014/04/21 职场文书
小学生期末评语
2014/04/21 职场文书
2014年母亲节寄语
2014/05/07 职场文书
大专生找工作自荐书
2014/06/10 职场文书
2014年平安夜寄语
2014/12/08 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
银行实习推荐信
2015/03/27 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏