[转]JS设计模式-单例模式(二)
单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池、全局缓存、浏览器中的window对象等。在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;
};
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;

通过Singleton.getInstance来获取Singleton类的唯一对象,这种方式相对简单,但有一个问题,就是增加了这个类的“不透明性”,Singleton类的使用者必须知道这是一个单例类,跟以往通过new XXX的方式来获取对象不同,这里偏要使用Singleton.getInstance来获取对象
虽然已经完成了一个单例模式的编写,但这段单例模式代码的实际意义并不大
透明单例
现在的目标是实现一个“透明”的单例类,用户从这个类中创建对象时,可以像使用其他任何普通类一样。在下面的例子中,将使用CreateDiv单例类,它的作用是负责在页面中创建唯一的div节点,代码如下

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

虽然现在完成了一个透明的单例类的编写,但它同样有一些缺点。为了把instance封装起来,使用了自执行的匿名函数和闭包,并且让这个匿名函数返回真正的Singleton构造方法,这增加了一些程序的复杂度,阅读起来也不是很舒服
上面的代码中,CreateDiv构造函数实际上负责了两件事情。第一是创建对象和执行初始化init方法,第二是保证只有一个对象。这是一种不好的做法,至少这个构造函数看起来很奇怪。假设某天需要利用这个类,在页面中创建千千万万的div,即要让这个类从单例类变成一个普通的可产生多个实例的类,那必须得改写CreateDiv构造函数,把控制创建唯一对象的那一段去掉,这种修改会带来不必要的烦恼
代理实现单例
现在通过引入代理类的方式,来解决上面提到的问题。依然使用上面的代码,首先在CreateDiv构造函数中,把负责管理单例的代码移除出去,使它成为一个普通的创建div的类

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');
alert(a === b);

通过引入代理类的方式,同样完成了一个单例模式的编写,跟之前不同的是,现在把负责管理单例的逻辑移到了代理类proxySingletonCreateDiv中。这样一来,CreateDiv就变成了一个普通的类,它跟proxySingletonCreateDiv组合起来可以达到单例模式的效果
惰性单例
惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点,这种技术在实际开发中非常有用
下面继续以登录框的例子来说明

<button id="loginBtn">登录</button>
<script>
var loginLayer = (function () {
var div = document.createElement('div');
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
})();
document.getElementById('loginBtn').onclick = function () {
loginLayer.style.display = 'block';
};
</script>

这种方式有一个问题,如果根本不需要进行登录操作,登录浮窗一开始就被创建好,很有可能将白白浪费一些 DOM 节点
现在改写一下代码,使用户点击登录按钮的时候才开始创建该浮窗

<button id="loginBtn">登录</button>
<script>
var createLoginLayer = function () {
var div = document.createElement('div');
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
};
document.getElementById('loginBtn').onclick = function () {
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
};
</script>

虽然现在达到了惰性的目的,但失去了单例的效果。每次点击登录按钮时,都会创建一个新的登录浮窗div
可以用一个变量来判断是否已经创建过登录浮窗,代码如下

var createLoginLayer = (function(){
var div;
return function(){
if ( !div ){
div = document.createElement( 'div' );
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild( div );
}
return div;
}
})();
document.getElementById( 'loginBtn' ).onclick = function(){
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
};

上面的代码仍然存在如下问题:
1、违反单一职责原则的,创建对象和管理单例的逻辑都放在 createLoginLayer对象内部
2、如果下次需要创建页面中唯一的iframe,或者script标签,用来跨域请求数据,就必须得如法炮制,把createLoginLayer函数几乎照抄一遍

var createIframe= (function(){
var iframe;
return function(){
if ( !iframe){
iframe= document.createElement( 'iframe' );
iframe.style.display = 'none';
document.body.appendChild( iframe);
}
return iframe;
}
})();

通用惰性单例
现在需要把不变的部分隔离出来,先不考虑创建一个div和创建一个iframe有多少差异,管理单例的逻辑其实是完全可以抽象出来的,这个逻辑始终是一样的:用一个变量来标志是否创建过对象,如果是,则在下次直接返回这个已经创建好的对象
var obj;
if ( !obj ){
obj = xxx;
}
然后,把如何管理单例的逻辑从原来的代码中抽离出来,这些逻辑被封装在getSingle函数内部,创建对象的方法fn被当成参数动态传入getSingle函数

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 = 'https://www.hao123.com';
};

上面的例子中,创建实例对象的职责和管理单例的职责分别放置在两个方法里,这两个方法可以独立变化而互不影响,当它们连接在一起的时候,就完成了创建唯一实例对象的功能
这种单例模式的用途远不止创建对象,比如通常渲染完页面中的一个列表之后,接下来要给这个列表绑定click事件,如果是通过ajax动态往列表里追加数据,在使用事件代理的前提下,click事件实际上只需要在第一次渲染列表的时候被绑定一次,但不想判断当前是否是第一次渲染列表,如果借助于jQuery,通常选择给节点绑定one事件

var bindEvent = function(){
$( 'div' ).one( 'click', function(){
alert ( 'click' );
});
};
var render = function(){
console.log( '开始渲染列表' );
bindEvent();
};
render();
render();
render();

如果利用getSingle函数,也能达到一样的效果

var getSingle = function (fn) {
var result;
return function () {
return result || (result = fn.apply(this, arguments));
}
};
var bindEvent = getSingle(function(){
document.getElementById( 'div1' ).onclick = function(){
alert ( 'click' );
}
return true;
});
var render = function(){
console.log( '开始渲染列表' );
bindEvent();
};
render();
render();
render();

可以看到,render函数和bindEvent函数都分别执行了3次,但div实际上只被绑定了一个事件
[转]JS设计模式-单例模式(二)的更多相关文章
- js设计模式-单例模式
JavaScript中的单例模式是最常用的.最基本的设计模式,它提供了一种命名空间,减少全局变量泛滥的代码管理机制: 1.最常见的单例模式: [javascript] view plain cop ...
- java设计模式——单例模式(二)
破坏单例模式 上一章节,介绍了单例模式的几种方式,这次来学习一波我们创建的单例模式是否安全,能不能破坏.换句话说,也就是在程序运行中,不止有一个实例. 一. 序列化,反序列化破坏 以饿汉式的单例模式 ...
- JS设计模式(二) 惰性模式
惰性模式:减少代码每次执行时的重复性判断,通过重新定义对象来避免原对象中的分支判断,提高网站性能. 例如针对不同浏览器的事件注册方法: var AddEvent = function(dom, typ ...
- JS设计模式——单例模式剖析
转载于原文地址:https://blog.csdn.net/q1056843325/article/details/52933426 举一个通俗的例子,在页面中点击登录按钮,弹出了一个登录浮窗,这个登 ...
- js设计模式(二)---策略模式
策略模式: 定义: 定义一系列的算法,把他们一个个封装起来,并且是他们可以相互替换 应用场景: 要求实现某一个功能有多种方案可以选择.比如:条条大路通罗马 实现: 场景,绩效为 S的人年终奖有 4倍工 ...
- [js]js设计模式-单例模式
单例模式 不同模块之间需要同时开发, // 单例模式: 把描述同一个事物的属性和方法放在同一个内存空间下. // 优点: 分组,防止冲突 // p1 p2也叫做命名空间(模块开发) var p1 = ...
- js 设计模式——单例模式
单例模式 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器中的 window 对象等. JavaScript ...
- JS设计模式(二)
5.迭代器模式 先实现一个简单的迭代器,类似于JQ里的$.each方法. var each = function (arr, callback) { for (var i = 0, l = arr.l ...
- ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值
前言 主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板. Start includes()是否包含 startsWith()以什么开头 ...
随机推荐
- (转)NodeJS - 第一个应用程序Hello World
安装NodeJs 在创建实际的“Hello,World!”应用之前,我们应该先安装NodeJS,安装NodeJS可以访问NodeJS官网,下载相应系统的NodeJS的安装包,进行安装. 程序组件 关于 ...
- Matlab AlexNet 识别花
1. 首先,你要又并行计算的工具箱,在插件选项里面找到,安装即可 2. 下载训练的数据集,采用matlab演示的材料即可 https://matlabacademy-content.mathworks ...
- 阿里云OSS简单上传本地文件
上传本地文件 # -*- coding: utf-8 -*- import oss2 # 阿里云主账号AccessKey拥有所有API的访问权限,风险很高.强烈建议您创建并使用RAM账号进行API访问 ...
- js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- PAT甲级——A1084 Broken Keyboard
On a broken keyboard, some of the keys are worn out. So when you type some sentences, the characters ...
- freemarker 嵌套循环 (导出word时,修改ftl模板)
1.循环 (循环输出reportList列表的每行的姓名) <#list reportList as report> ${report.name} </$list> 2.嵌套循 ...
- rabbit mq 基础流程(转)
从AMQP协议可以看出,MessageQueue.Exchange和Binding构成了AMQP协议的核心,下面我们就围绕这三个主要组件 从应用使用的角度全面的介绍如何利用Rabbit MQ构建 ...
- 安装office2019
win10系统安装office2019 安装文件下载 https://pan.baidu.com/s/1VnqJ-hNwysPKBhdzE3FSww#list/path=%2F&parentP ...
- vue 可复用swiper以及scoped样式穿透(可以不受scoped的限制来修改样式)
参考: https://blog.csdn.net/dwb123456123456/article/details/82701740https://blog.csdn.net/u014027876/a ...
- ls- Linux必学的60个命令
1.作用 ls命令用于显示目录内容,类似DOS下的dir命令,它的使用权限是所有用户. 2.格式 ls [options][filename] 3.options主要参数 -a, --all:不隐藏任 ...