[读书笔记] JavaScript设计模式: 单例模式
单例模式:保证一个类只有一个实例,并提供一个可以访问它的全局访问点。
一种简单、方便的写法就是用一个变量来标识当前类是否已经创建过对象,如果有,则返回已经创建好的对象,否则创建一个新对象,并将其返回。
var Singleton = function(name) {
this.name = name;
this.instance = null;
}
Singleton.prototype.getName = function() {
alert(this.name);
}
Singleton.getInstance = function(name) {
if (!this.instance) {
this.instance = new Singleton(name);
}
return this.instance
}
但是上述写法有一个问题,那就是使用Singleton这个类的时候,必须参考API文档,否则使用者不知道必须通过getInstance()方法而不是通过new的方式来获取对象,这就是增加了这个类的“不透明”性。
修改上述实现方式,使其变得“透明”些。
var Singleton = (function() {
var instance = null;
var Singleton = function(name) {
if (!instance) {
this.name = name;
instance = this;
}
return instance;
}
Singleton.prototype.getName = function() {
alert(this.name)
}
return Singleton;
})()
修改后的Singleton类使用起来和其他的类没有区别,只要new Singleton('name')就可以了,但是上述写法也有一点小问题,那就是在Singleton的构造函数中做了两件事,一是创建对象并初始化name等变量,二是保证了该类只会存在一个对象,违反了设计原则中的“单一职责原则”的概念。如果后续要将Singleton改为非单例类,就必须要修改Singleton的构造函数。
为了使职责分的更加清楚,我们引入代理的方式来实现单例。
var Manager = function(name) {
this.name = name;
}
Manager.prototype.getName = function() {
alert(this.name);
}
var Singleton = (function() {
var instance;
return function(name) {
if (!instance) {
instance = new Manager(name)
}
return instance
}
})()
通过引入代理类,保证了各个类之间的职责单一。
上述是通过类的方式来创建单例对象,在其他语言中经常会看到这样的写法,如Java,C#等。但是JavaScript其实是一门无类(class-free)的语言,想要一个对象,直接创建就可以了,没有必要先创建类,再通过类创建对象,这样做无异于穿棉衣洗澡。所以说基于“类”的单例在JavaScript中其实并不适用。
在实际项目中经常会用到摸态框,一般来说,一个页面的模态框是唯一的,最常见的实现方式有以下两种方式:
- 在页面加载完成的时候便创建好模态框,当然这个模态框是隐藏的
- 当真正需要显示模态框时再创建
第一种方式简单,但是可能会浪费DOM元素,因为部分用户可能一直用不到这个模态框。第二种方式就需要用到将要学习的惰性单例。
var getSingle = (function() {
var instance;
return function(fn) {
return instance || (instance = fn.apply(this, arguments));
}
})()
var createModal = function() {
var div = document.createElement('div');
div.innerHTML = 'modal';
document.body.appendChild(div);
return div;
}
将getSingle方法提取出来,以后不光可以用于createModal,createXhr,createIframe等等都可以与getSingle组合使用。
[读书笔记] JavaScript设计模式: 单例模式的更多相关文章
- JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)
(转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...
- 探索Javascript设计模式---单例模式
最近打算系统的学习javascript设计模式,以便自己在开发中遇到问题可以按照设计模式提供的思路进行封装,这样可以提高开发效率并且可以预先规避很多未知的问题. 先从最基本的单例模式开始. 什么是单例 ...
- [读书笔记]JavaScript 闭包(Closures)
1. 什么是闭包? 参考MDN. 2. 闭包的使用示例 2.1 示例1 <div>1</div> <div>2</div> <div>3&l ...
- 《javascript设计模式》读书笔记四(单例模式)
1.单利模式简单介绍 在<设计模式>中单利模式是一种比較简单的模式,定义例如以下: 确保某一个类仅仅有一个实例,并且自行实例化并向整个系统提供这个实例. 在javascript中则将代码组 ...
- JavaScript设计模式 - 单例模式
单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 一.实现一个标准的单例模式,用一个变量来标志当前是否已经为某个类创建过对象, 如果是,则在下一次获取该对象实例时,直接返回之前创建的对 ...
- [读书笔记]javascript语言精粹'
人比较笨,以前只做项目,案例,然而一些javascript的很多理论不知道该怎么描述,所以最近开启一波读书之旅: 标识符 1.定义 标识符以字母开头,可能后面跟上一个或多个字母.数字或者下划线. 2. ...
- javascript设计模式——单例模式
前面的话 单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScri ...
- 读书笔记-JavaScript面向对象编程(三)
第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM 7.3.1 window对象再探(所以JavaSc ...
- 读书笔记-----javascript基本数据类型
由于js基础差, 记性也不好,准备一边读书一边做记录,希望这样能加深一下记忆 /* 第一天 */ javascript 基本数据类型 js一共只有五种数据类型 Undefined, Nu ...
随机推荐
- 【palindrome partitioning II】cpp
题目: Given a string s, partition s such that every substring of the partition is a palindrome. Return ...
- 在IE浏览器下,PDF将弹出窗口遮挡了
写了个embed标签里面放这个pdf 然后点击其他地方的弹框pdf把他遮盖住了 如下: 先是改z-index,没卵用. 百度了好久,终于找到了个有用的 https://blog.csdn.net/it ...
- Visual C++斗地主游戏网络版源代码
说明:VC++ 6.0写的网络版斗地主游戏,程序基于directx SDK开发,因此你在编译时需要引入相应文件才可以,本斗地主可以支持双人对战.网络对战,游戏随机产生地主,动画发牌,界面也不错,还有声 ...
- 聊聊、Spring 数据源
平时开发中我们每天都会跟数据库打交道,页面上显示的数字,图片,语音,等等都存在某个地方,而我们就是要从那个地方拿到我们想要的.现在存储数据的方式越来越多,多种多样,但用的最多的还是关系数据库.Spri ...
- mybitis中对象字段与表中字段名称不匹配(复制)
开发中,实体类中的属性名和对应的表中的字段名不一定都是完全相同的,这样可能会导致用实体类接收返回的结果时导致查询到的结果无法映射到实体类的属性中,那么该如何解决这种字段名和实体类属性名不相同的冲突呢? ...
- nyoj 题目7 街区最短路径问题
街区最短路径问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 一个街区有很多住户,街区的街道只能为东西.南北两种方向. 住户只可以沿着街道行走. 各个街道之间的间 ...
- 【bzoj3884】上帝与集合的正确用法 扩展欧拉定理
题目描述 根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“元”构成的集合.容 ...
- java _tomcat_mysql 部署
项目做完了,要发布了,而Java的特长之一就是移植性好,面对着微软的XP的停止服务,Windows系统的“独裁”,越来越多的商家选择了开源的免费的linux系统作为服务器.因为linux系统也有图形界 ...
- Codeforces Beta Round #95 (Div. 2) C 组合数学
C. The World is a Theatre time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- UVA11806 Cheerleaders (容斥)
题目链接 Solution 可以考虑到总方案即为 \(C_{nm}^k\) . 考虑到要求的是边缘都必须至少有 \(1\) ,所以考虑不合法的. 第一行和最后一行没有的方案即为 \(C_{(n-1)m ...