Javascript单例模式的介绍和实例


Posted in Javascript onOctober 08, 2016

前言

其实和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式、代理模式、观察者模式等,熟练运用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单例模式的介绍和实例
classList兼容性

其提供的操作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', '这是一个弹框'))
 }
})();

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

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

     2、利用 || 语法判断如果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就实现了。

总结

本文只演示了单例模式的一种实现方式,至于如何构建一个通用的单例模式就交给有兴趣的读者了。以上就是这篇文章的全部内容了,希望能对大家的学习或者工作能带来一定的帮助。

Javascript 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
前端面试知识点目录一览
Apr 15 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
jquery把int类型转换成字符串类型的方法
Oct 07 #Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 #Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 #Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 #Javascript
jquery删除table当前行的实例代码
Oct 07 #Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 #Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
Python中的自省(反射)详解
2015/06/02 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
国庆宣传标语
2014/06/30 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
合作合同协议书
2016/03/21 职场文书
PHP解决高并发问题
2021/04/01 PHP
Python实现列表拼接和去重的三种方式
2021/07/02 Python
python基础之类方法和静态方法
2021/10/24 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android