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

一、简版单例模式:

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. abstract Factory pattern

    1,注意静态工厂(简单工厂模式).工厂方法.抽象工厂的区别 静态工厂是根据客户端传入的参数,使用工厂类来创建相应的产品接口的具体实现子类对象.比如,需要需要创建一个工具类,该工具类是为了调用外部系统, ...

  2. go 两个数组取并集

    实际生产中,对不同数组取交集.并集.差集等场景很常用,下面来说下两个数组取差集 直接上代码: //两个集合取并集 package main import "fmt" //思想: / ...

  3. iscc2018-Reverse-writeup

    RSA256 解析公钥 yafu质因数分解 p=325045504186436346209877301320131277983 q=3028255367440967415185462127611943 ...

  4. 使用create-react-app创建项目(一)——端口配置

    在package.json文件中找到 "scripts",在start中添加"set PORT=8000" "scripts": { &qu ...

  5. CORS和jsonp实现跨域请求

    同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...

  6. 动态绑定v-model

    <template> <div class="pieAll" > <template v-for="(item, index) in tes ...

  7. [Python]统计1个元素在列表中的出现次数

    使用列表自带的count方法: list.count(element) 示例:  列表a,有4个元素,其中值1出现3次 In []: a=[,,,] In []: a Out[]: [, , , ] ...

  8. selenium webdriver常用函数

    from selenium import webdriver driver = webdriver.Ie(executable_path = "e:\\IEDriverServer" ...

  9. 使用AWS、Docker与Rancher提供弹性的生产级服务

    2017-07-26 开始想你的 RancherLabs AWS Summit 2017 Beijing已经圆满落幕啦!亚马逊公司首席技术官沃纳·威格尔博士莅临现场,分享 AWS 最新云解决方案,把握 ...

  10. 九十四:CMS系统之cms后台登录限制

    装饰器,验证当前session中是否存在定义的user_id,没有就重定向到登录页 from flask import session, redirect, url_forfrom functools ...