JavaScript设计模式 - 单例模式
单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点。
一、实现一个标准的单例模式,用一个变量来标志当前是否已经为某个类创建过对象, 如果是,则在下一次获取该对象实例时,直接返回之前创建的对象
示例:
var Singleton = function(name){
this.name = name;
this.instance = null; // 使用一个变量来表示是否已经创建该对象
};
Singleton.prototype.getName = function(){
console.log(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");
console.log(a === b); // true
console.log(a.getName() + b.getName()); // sven1 sven1
或者另一种写法:
var Singleton= function(name){
this.name = name;
};
Singleton.prototype.getName = function(){
console.log(this.name);
};
Singleton.getInstance = (function(){
var instance = null; // 是否已创建对象的标志
return function(name){
if (!instance){
instance = new Singleton(name);
}
return instance;
};
})();
var a = Singleton.getInstance("A");
var b = Singleton.getInstance("B");
console.log(a === b); // true
console.log(a.getName() + b.getName()); // A A
二、使用代理实现单利模式
下面的例子中,将使用 CreateDiv 单例类,作用是负责在页面中创建唯一的 div 节点
//创建 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 = null;
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);
三、JavaScript 中的单例模式
单利模式的核心是确保只有一个示例,并提供全局访问
全局变量不是单例模式,但我们可以把全局变量当成单利模式来时使用;例如:
var g = {};
全局变量容易造成命名空间污染,应尽量减少全局变量的使用。减少全局污染的方法:
1. 使用命名空间
var namespace1 = {
a: function(){
console.log(1);
},
b: function(){
console.log(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))
}
}; // 构造函数
var createLoginLayer = function(){
var div = document.createElement("div");
div.innnerHTML = "我是登陆悬浮窗";
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";
};
JavaScript设计模式 - 单例模式的更多相关文章
- JavaScript设计模式-单例模式、模块模式(转载 学习中。。。。)
(转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...
- 探索Javascript设计模式---单例模式
最近打算系统的学习javascript设计模式,以便自己在开发中遇到问题可以按照设计模式提供的思路进行封装,这样可以提高开发效率并且可以预先规避很多未知的问题. 先从最基本的单例模式开始. 什么是单例 ...
- javascript设计模式——单例模式
前面的话 单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScri ...
- [读书笔记] JavaScript设计模式: 单例模式
单例模式:保证一个类只有一个实例,并提供一个可以访问它的全局访问点. 一种简单.方便的写法就是用一个变量来标识当前类是否已经创建过对象,如果有,则返回已经创建好的对象,否则创建一个新对象,并将其返回. ...
- javascript 设计模式-----单例模式
单例模式的意思是只需要实例化某个类一次,它的方法也比较简单,通过判断某个类是否已经被实例化了,再返回该值.可以通过各种方法来实现单例模式,下面我们采取以下这种实现方式: var single = (f ...
- javascript设计模式--单例模式(Singleton)
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- JavaScript设计模式—单例模式
单例模式介绍 系统中被唯一使用的,一个类只有一个实例 单例模式的思路是: 一个类能返回一个对象的引用(并且永远是同一个)和一个获得该实例的方法(静态方法,通常使用 getInstance 名称). 那 ...
- JavaScript设计模式与开发实践 - 单例模式
引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...
- JavaScript设计模式_01_单例模式
最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式 ...
随机推荐
- 【Matplotlib】 标注一些点
相关的文档: Annotating axis annotate() command 标注的代码如下: ... t = 2 * np.pi / 3 plt.plot([t, t], [0, np.cos ...
- Fedora和Ubuntu下安装OpenGL开发环境配置
Fedora下OpenGl开发环境配置 开发OpenGL工程需要3个库文件和对应的头文件: libglut.so,libGLU.so,libGL.so, gl.h ,glu.h, glut.h 这些库 ...
- BZOJ-2257 瓶子和燃料 分解因数+数论方面乱搞(裴蜀定理)
一开始真没想出解法...后来发现那么水.... 2257: [Jsoi2009]瓶子和燃料 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 970 So ...
- 【codevs1257】 打砖块
http://codevs.cn/problem/1257/ (题目链接) 题意 在等腰三角形上打砖块,总共有m发炮弹,每块砖有一个权值,求打出的最大权值 Solution 今天考试题,考场上的2个小 ...
- 【bzoj1037】 ZJOI2008—生日聚会Party
http://www.lydsy.com/JudgeOnline/problem.php?id=1037 (题目链接) 题意 有n个boy和m个girl排成一排,求使得任意一段的boy个数girl个数 ...
- Nginx Installation、Configuration、Rreverse Proxy、Load Balancing Learning
目录 . Nginx简介 . Nginx安装部署 . Nginx安全配置 . Nginx反向代理实践 . Nginx负载均衡实践 1. Nginx简介 0x1: Nginx的基本特性 Nginx(&q ...
- Linux下安装Nginx详细图解教程
什么是Nginx? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,在高连接并发的情况下N ...
- c++标准库和stl关系
C++标准库的所有头文件都没有扩展名.C++标准库的内容总共在50个标准头文件中定义,其中18个提供了C库的功能. <cname>形式的标准头文件[ <complex>例外]其 ...
- i++和++i
这个问题总是讨论,有时又被弄晕了,特来复习一下 ; ; cout<<s<<endl; cout<<5,而i+++4返回4,其实这样的i++先运算,再加,++i先加再 ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...