单例模式:保证一个类只有一个实例,并提供一个可以访问它的全局访问点。

一种简单、方便的写法就是用一个变量来标识当前类是否已经创建过对象,如果有,则返回已经创建好的对象,否则创建一个新对象,并将其返回。

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中其实并不适用。

在实际项目中经常会用到摸态框,一般来说,一个页面的模态框是唯一的,最常见的实现方式有以下两种方式:

  1. 在页面加载完成的时候便创建好模态框,当然这个模态框是隐藏的
  2. 当真正需要显示模态框时再创建

第一种方式简单,但是可能会浪费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设计模式: 单例模式的更多相关文章

  1. JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)

    (转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...

  2. 探索Javascript设计模式---单例模式

    最近打算系统的学习javascript设计模式,以便自己在开发中遇到问题可以按照设计模式提供的思路进行封装,这样可以提高开发效率并且可以预先规避很多未知的问题. 先从最基本的单例模式开始. 什么是单例 ...

  3. [读书笔记]JavaScript 闭包(Closures)

    1. 什么是闭包? 参考MDN. 2. 闭包的使用示例 2.1 示例1 <div>1</div> <div>2</div> <div>3&l ...

  4. 《javascript设计模式》读书笔记四(单例模式)

    1.单利模式简单介绍 在<设计模式>中单利模式是一种比較简单的模式,定义例如以下: 确保某一个类仅仅有一个实例,并且自行实例化并向整个系统提供这个实例. 在javascript中则将代码组 ...

  5. JavaScript设计模式 - 单例模式

    单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 一.实现一个标准的单例模式,用一个变量来标志当前是否已经为某个类创建过对象, 如果是,则在下一次获取该对象实例时,直接返回之前创建的对 ...

  6. [读书笔记]javascript语言精粹'

    人比较笨,以前只做项目,案例,然而一些javascript的很多理论不知道该怎么描述,所以最近开启一波读书之旅: 标识符 1.定义 标识符以字母开头,可能后面跟上一个或多个字母.数字或者下划线. 2. ...

  7. javascript设计模式——单例模式

    前面的话 单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScri ...

  8. 读书笔记-JavaScript面向对象编程(三)

    第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM 7.3.1 window对象再探(所以JavaSc ...

  9. 读书笔记-----javascript基本数据类型

    由于js基础差, 记性也不好,准备一边读书一边做记录,希望这样能加深一下记忆 /*   第一天     */ javascript 基本数据类型 js一共只有五种数据类型 Undefined,  Nu ...

随机推荐

  1. POJ 2771 Guardian of Decency (二分图最大点独立集)

    Guardian of Decency Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 6133   Accepted: 25 ...

  2. 网络抢票黄牛,大部分是骗人的。公布一个骗钱黄牛,QQ:2233261390,QQ群:29443597,支付页面:https://me.alipay.com/q336

    想着给女友买张回广州的回程火车票,抢了3天也没弄到.情急之下找了网络上所谓的黄牛.结果上当受骗.具体经过是这样的: 对方承诺抢到再付款.于是等他抢到后截图给我看,而且可以远程到他的机器去看,我也确实远 ...

  3. 在 Amazon AWS 搭建及部署网站:(三)开发及部署环境

    服务器已经搭建好,网站也开始运行了.那么如何方便地部署代码呢? 最基本的方式,就是使用 SFTP 向网站目录直接部署.这种方法的缺点是版本控制不便,在上传时也无法方便的比较代码变化. 用SVN来部署是 ...

  4. Spring进阶-怎样集成定时调度Quartz

    在一些项目里面比如进销存系统,对一些过期图片的定时清理或者库存不足发出预警提示,就需要用到定时调度技术. 每当经过一段时间,程序会自动执行,就是定时调度.如果要使用定时调度,则必须保证程序始终运行才行 ...

  5. Careercup - Microsoft面试题 - 6751316000899072

    2014-05-12 07:10 题目链接 原题: Write a thread safe data structure such that there could be only one write ...

  6. 浅谈我所见的CSS组织风格

    1.简单组织(见习级) projectName ├─css | └style.css 优点:简单,单一文件,适合一些简单项目. 缺点:过度集中,没有模块化,无法适应大型项目. 2.公共组织(见习级) ...

  7. c++ primer 6 练习题 (非复习题)

    第7章 7.13-1调和平均数 //7.13-1 excise.cpp 调和平均数 #include <iostream> double calculate(double a,double ...

  8. 零基础学习 Python 之字符串

    初识字符串 维基百科对于字符串的定义式:字符串是由零个或者多个字符组成的有限串行.你之前学会敲的第一行 print 代码里的 "Hello World",就是一个字符串.字符串的本 ...

  9. RT-Thread学习之——静态线程和动态线程

    RT-Thread中支持静态和动态两种定义方式. 用线程来举例的话,rt_thread_init对应静态定义方式,rt_thread_create对应动态定义方式. 使用静态定义方式时,必须先定义静态 ...

  10. [oldboy-django][2深入django]Form组件功能: 数据格式验证 + 保留上次输入的值

    1 需求:登录或者注册页面存在以下问题 - 无法记住上次提交的内容,(如果有很多输入项,这样正确项不必重复输入,错误项也能提示错误信息)- 重复进行提交数据的校验(数据是否为空,长度大小等等) 2 d ...