本文深入解析JavaScript中的单例模式,阐述其保证类仅有一个实例并提供全局访问点的核心定义。通过线程池、全局缓存及window对象等应用场景,结合具体代码示例,详细演示了包括静态属性缓存、透明单例及代理单例在内的多种实现方式,帮助开发者理解并掌握该设计模式的实际应用。
单例模式概述与应用场景
近期项目工作相对轻松,难得有空闲时间阅读书籍,平时我对JavaScript这门语言抱有浓厚兴趣。虽然阅读过许多高级教程,但我始终对JavaScript的设计模式保持着较高的热情。此次重温《JavaScript设计模式与开发实践》一书,开篇即介绍了单例模式。
单例模式的核心代码实现
/**
* pre 单例模式
* 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点
* 应用:单例模式是一种常用的模式,有一些对象我们往往只需要一个,
* 比如线程池、全局缓存、浏览器中的 window 对象等。
*/
//--------------singleton-01-------------
/*写法1*/
var Singleton = function(name){
this.name = name;
this.instance = null;
};
Singleton.prototype.getName = function(){
alert(this.name);
};
Singleton.getInstance = function(){
if(!this.instance){
this.instance = new Singleton(name);
}
return this.instance;
};
var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);
// ------------singleton-02----------------
/*写法2*/
var Singleton = function(name){
this.name = name;
}
Singleton.prototype.getName = function(){
return this.name;
}
Singleton.getInstance = (function(){
var instance = null;
return function(name){
if(!instance){
instance = new Singleton(name);
}
return instance;
}
})();
var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);
// ------------singleton03-----------
/*写法3*/
var Singleton = (function(){
var instance;
return function(name){
if(instance){
return instance;
}
this.name = name;
instance = this;
}
})();
var a = new Singleton("amy");
var b = new Singleton("ben");
alert(a === b);
//---------------- 示例 ---------------
var getSingleton = function(fn) {
var result;
return function() {
if(!result) {
result = fn.apply(this, arguments);
}
return result;
}
};
var getSingletonVip = (function() {
var instance;
return function(fn) {
return instance || (instance = fn.apply(this, arguments));
}
})();
var createLoginUser = function() {
var div = document.createElement("div");
div.innerHTML = '这是登录框';
document.body.appendChild(div);
return div;
};
var createInfoGrid = function() {
var div = document.createElement("div");
div.innerHTML = '这是列表信息框';
document.body.appendChild(div);
return div;
};
//--执行singleton1
var createUserDiv = getSingleton(createLoginUser);
createUserDiv();
createUserDiv();
//--执行singleton2
getSingletonVip(createLoginUser);
getSingletonVip(createLoginUser);
总结与致谢
以上内容为本文的全部总结,希望能为各位的学习带来启发,同时也恳请大家继续支持本站。