解析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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
webpack 模块热替换原理
Apr 09 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 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
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
简单的js分页脚本
2009/05/21 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Django框架安装方法图文详解
2019/11/04 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python中doctest库实例用法
2020/12/31 Python
医院院务公开实施方案
2014/05/03 职场文书
考试保密承诺书
2014/08/30 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2015年副班长工作总结
2015/05/15 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
技术入股协议书
2016/03/22 职场文书