解析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 相关文章推荐
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
根德YB400的电路分析
2021/03/02 无线电
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
围观tangram js库
2010/12/28 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
规划编制实施方案
2014/03/15 职场文书
酒鬼酒广告词
2014/03/21 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
临床专业自荐信
2014/06/22 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
vue项目支付功能代码详解
2022/02/18 Vue.js
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL