单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对象,并且只创建唯一的一个。下面我们来逐步了解单例模式的用法。

一、简版单例模式:

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;
};
var a = Singleton.getInstance( 'sven1' );
var b = Singleton.getInstance( 'sven2' );
alert ( a === b ); // true

或者:

var Singleton = function(name){
this.name = name;
};
Singleton.prototype.getName = function(){
alert(this.name);
};
Singleton.getInstance = (function(){
var instance = null;
return function( name ){
if ( !instance ){
instance = new Singleton( name );
}
return instance;
}
})();
var a = Singleton.getInstance( 'sven1' );
var b = Singleton.getInstance( 'sven2' );
alert ( a === b ); // true

以上虽然是一个简单的“不透明”单例模式,但是在实际项目中的意义不大。

二、透明的单例模式:

var CreateDiv = (function(){
var instance;
var CreateDiv = function( html ){
if (instance) {
return instance;
}
this.html = html; this.init();
return instance = this;
}; CreateDiv.prototype.init = function(){
var div = document.createElement( 'div' );
div.innerHTML = this.html;
document.body.appendChild( div );
}; return CreateDiv;
})(); var a = new CreateDiv( 'sven1' );
var b = new CreateDiv( 'sven2' ); alert ( a === b ); // true

在这段代码中,CreateDiv 的构造函数实际上负责了两件事情:第一是创建对象和执行初始化 init 方法,第二是保证只有一个对象。

虽然我们目前还没有接触过“单一职责原则”的概念, 但可以明确的是,这是一种不好的做法,至少这个构造函数看起来很奇怪。

假设我们某天需要利用这个类,在页面中创建千千万万的 div,即要让这个类从单例类变成 一个普通的可产生多个实例的类,那我们必须得改写 CreateDiv 构造函数,把控制创建唯一对象 的那一段去掉,这种修改会给我们带来不必要的烦恼。

三:用代理实现单例模式:

var CreateDiv = function( html ){
this.html = html;
this.init();
};
CreateDiv.prototype.init = function(){
var div = document.createElement( 'div' );
div.innerHTML = this.html; document.body.appendChild( div );
};
接下来引入代理类 proxySingletonCreateDiv:
var ProxySingletonCreateDiv = (function(){
var instance;
return function( html ){
if ( !instance ){
instance = new CreateDiv( html );
}
return instance;
}
})();
var a = new ProxySingletonCreateDiv( 'sven1' );
var b = new ProxySingletonCreateDiv( 'sven2' );
console.log( a === b );

通过引入代理类的方式,我们同样完成了一个单例模式的编写,跟之前不同的是,现在我们 把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv 中。

这样一来,CreateDiv 就变成了 一个普通的类,它跟 proxySingletonCreateDiv 组合起来可以达到单例模式的效果。

四、js中的单例模式:

前面提到的几种单例模式的实现,更多的是接近传统面向对象语言中的实现,单例对象从 “类”中创建而来。在以类为中心的语言中,这是很自然的做法。比如在 Java 中,如果需要某个对象,就必须先定义一个类,对象总是从类中创建而来的。

但 JavaScript 其实是一门无类(class-free)语言,也正因为如此,生搬单例模式的概念并无 意义。在 JavaScript 中创建对象的方法非常简单,既然我们只需要一个“唯一”的对象,为什 么要为它先创建一个“类”呢?这无异于穿棉衣洗澡,传统的单例模式实现在 JavaScript 中并 不适用。单例模式的核心是确保只有一个实例,并提供全局访问。

全局变量不是单例模式,但在 JavaScript 开发中,我们经常会把全局变量当成单例来使用。例如:var a = {};当用这种方式创建对象 a 时,对象 a 确实是独一无二的。如果 a 变量被声明在全局作用域下, 则我们可以在代码中的任何位置使用这个变量,全局变量提供给全局访问是理所当然的。这样就满足了单例模式的两个条件。但是全局变量存在很多问题,它很容易造成命名空间污染。使用两种方法可以避免变量的全局污染:

1、使用命名空间:适当地使用命名空间,并不会杜绝全局变量,但可以减少全局变量的数量。

var namespace1 = {
a: function(){
alert (1);
},
b: function(){
alert (2);
}
};

2、使用闭包封装私有变量

var user = (function(){
var __name = 'sven',
__age = 29;
return {
getUserInfo: function(){
return __name + '-' + __age;
}
}
})();

五、惰性单例:

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点,这种技术在实际开发中非常有用。

我们可以将管理单例的逻辑从原来的代码中抽离出来:

var getSingle = function( fn ){
var result;
return function(){
return result || ( result = fn .apply(this, arguments ) );
}
};

将创建登录浮窗的方法用参数 fn 的形式传入 getSingle,我们不仅可以传入 createLoginLayer,还能传入 createScript、createIframe、createXhr 等。之后再让 getSingle 返回 一个新的函数,并且用一个变量 result 来保存 fn 的计算结果。result 变量因为身在闭包中,它永远不会被销毁。在将来的请求中,如果 result 已经被赋值,那么它将返回这个值。

创建弹窗:
var createLoginLayer = function(){
var div = document.createElement( 'div' );
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild( div );
return div;
};
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById( 'loginBtn' ).onclick = function(){
var loginLayer = createSingleLoginLayer();
loginLayer.style.display = 'block';
}; 创建iframe:
var createSingleIframe = getSingle( function(){
var iframe = document.createElement ( 'iframe' );
document.body.appendChild( iframe );
return iframe;
});
document.getElementById( 'loginBtn' ).onclick = function(){
var loginLayer = createSingleIframe();
loginLayer.src = 'http://baidu.com';
};

在这个例子中,我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里,这两个方法可以独立变化而互不影响,当它们连接在一起的时候,就完成了创建唯一实例对象的功能。

JavaScript设计模式(单例模式)的更多相关文章

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

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

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

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

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

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

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

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

  5. [读书笔记] JavaScript设计模式: 单例模式

    单例模式:保证一个类只有一个实例,并提供一个可以访问它的全局访问点. 一种简单.方便的写法就是用一个变量来标识当前类是否已经创建过对象,如果有,则返回已经创建好的对象,否则创建一个新对象,并将其返回. ...

  6. javascript 设计模式-----单例模式

    单例模式的意思是只需要实例化某个类一次,它的方法也比较简单,通过判断某个类是否已经被实例化了,再返回该值.可以通过各种方法来实现单例模式,下面我们采取以下这种实现方式: var single = (f ...

  7. javascript设计模式--单例模式(Singleton)

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  8. JavaScript设计模式—单例模式

    单例模式介绍 系统中被唯一使用的,一个类只有一个实例 单例模式的思路是: 一个类能返回一个对象的引用(并且永远是同一个)和一个获得该实例的方法(静态方法,通常使用 getInstance 名称). 那 ...

  9. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  10. JavaScript设计模式_01_单例模式

    最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式 ...

随机推荐

  1. PowerShell入门学习

    一.概要 Powershell是运行在windows机器上实现系统和应用程序管理自动化的命令行脚本环境. powershell需要.NET环境的支持,同时支持.NET对象.之所以将Powershell ...

  2. jQuery常用Method-API

    目的:对web页面(HTML/JSP/XML)中的任何标签,属性,内容进行增删改查 (1)DOM简述与分类 (A)DOM是一种W3C官方标准规则,可访问任何标签语言的页面(HTML/JSP/XML) ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-1.数据信息安全--微信授权一键登录功能介绍

    笔记 1.数据信息安全--微信授权一键登录功能介绍 简介:讲解登录方式优缺点和微信授权一键登录功能介绍         1.手机号或者邮箱注册             优点:              ...

  4. keepalived+LVS-DR集群

    一.Keepalived介绍 keepalived 是一个类似于 layer3, 4 & 5 交换机制的软件,也就是我们平时说的第 3 层.第 4 层和第 5层交换. Keepalived 的 ...

  5. Xib设置label自动换行和Label的顶部对齐

    真的是不想说自己了,一个Xib纠结了一天,简直了,整整被虐了一上午啊...... 不知道这是Xcode8的问题呢....还是我的Xib约束什么的问题..... 只想说的是,以前也是这么设置的,明明可以 ...

  6. Java泛型(9):动态类型安全

    因为可以向Java SE5之前的代码传递泛型容器,所以旧式代码仍有可能破坏你的容器.Java SE5中有一组便利工具,可以解决这种情况下类型检查的问题. 它们是静态方法checkedCollectio ...

  7. GitLab - 代码仓库管理工具GitLab简介

    1 - GitLab 基于git的开源的仓库管理系统项目,使用git作为代码管理工具,并在此基础上搭建web服务,拥有与Github类似的功能. 社区版(Community Edition,CE) 企 ...

  8. linux之反向代理,反向代理实例,负载均衡实例

    目录 nginx反向代理 1. 概述 2. 反向代理服务器的工作原理 (1)作为内容服务器的替身 (2)作为内容服务器的负载均衡器 二. nginx反向代理实例 1.前期准备 2.代理服务器配置 3. ...

  9. Django-DRF(路由与扩展功能)

    一. 视图集与路由的使用 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update( ...

  10. C++进阶笔记

    思想原则: 以类为例,类最终要处理的是数据,方法只是过程,最终要改变的是private中的数据成员状态.程序设计也是如此,要的是数据. 一.const的作用 const定义变量:定义了一个不可修改的常 ...