JavaScript设计模式系列—模式篇（一）单例模式

最新推荐文章于 2025-04-10 14:51:08 发布

预见才能遇见

最新推荐文章于 2025-04-10 14:51:08 发布

阅读量203

点赞数

分类专栏： # JavaScript设计模式系列文章标签：设计模式单例模式透明单例模式代理实现单例模式惰性单例

本文链接：https://blog.youkuaiyun.com/pcaxb/article/details/100512295

版权

JavaScript设计模式系列专栏收录该内容

12 篇文章

订阅专栏

转载请注明预见才能遇见的博客：http://my.youkuaiyun.com/

原文地址：https://blog.youkuaiyun.com/pcaxb/article/details/100512295

JavaScript设计模式系列—模式篇（一）单例模式

JavaScript设计模式系列——模式篇（一）单例模式

1.1实现单例模式

1.2 透明的单例模式

1.3 用代理实现单例模式

1.4 JavaScript 中的单例模式

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式的用途非常广泛，比如线程池、全局缓存、浏览器中的 window 对象等。

1.1实现单例模式

判断当前是否为某个类创建过对象

var Singleton = function( name ){
    this.name = name;
    this.instance = null;
};

Singleton.prototype.getName = function(){
    return this.name;
};

Singleton.getInstance = function( name ){
    //判断当前是否为某个类创建过对象
    if ( !this.instance ){
        this.instance = new Singleton( name );
    }
    return this.instance;
};

//或者：
var Singleton = function( name ){
    this.name = name;
};

Singleton.prototype.getName = function(){
    return this.name;
};

//调用getInstance前匿名函数就会被调用，返回一个函数
Singleton.getInstance = (function(){
    var instance = null;
    return function( name ){
        if ( !instance ){
            instance = new Singleton( name );
        }
        return instance;
    }
})();

function testCase(){
    var a = Singleton.getInstance("aaa");
    var b = Singleton.getInstance("bbb");
    console.log(a === b,a.getName(),b.getName());//true "aaa" "aaa"
}

我们通过 Singleton.getInstance 来获取 Singleton 类的唯一对象，这种方式相对简单，但有一个问题，就是增加了这个类的“不透明性”， Singleton 类的使用者必须知道这是一个单例类，跟以往通过 new XXX 的方式来获取对象不同，这里偏要使用Singleton.getInstance 来获取对象。（这样的单例意义不大）

1.2 透明的单例模式

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;
})();

function testCase(){
    var a = new CreateDiv( 'sven1' );
    var b = new CreateDiv( 'sven2' );
    alert ( a === b ); // true
}

CreateDiv 的构造函数实际上负责了两件事情。第一是创建对象和执行初始化 init 方法，第二是保证只有一个对象。违反了“单一职责原则”的概念。缺点：要让这个类从单例类变成一个普通的可产生多个实例的类，那我们必须得改写 CreateDiv 构造函数。

1.3 用代理实现单例模式

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 );
};

// 代理实现单利模式
var ProxySingletonCreateDiv = (function(){
    var instance;
    return function( html ){
        if ( !instance ){
            instance = new CreateDiv( html );
        }
        return instance;
    }
})();

function testCase(){
    // 缓存代理
    var a = new ProxySingletonCreateDiv( 'sven1' );
    var b = new ProxySingletonCreateDiv( 'sven2' );
    alert ( a === b );
}

通过引入代理类的方式，我们同样完成了一个单例模式的编写，跟之前不同的是，现在我们把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv 中。这样一来， CreateDiv 就变成了一个普通的类，它跟 proxySingletonCreateDiv 组合起来可以达到单例模式的效果。

1.4 JavaScript 中的单例模式

全局变量不是单例模式，但在 JavaScript开发中，我们经常会把全局变量当成单例来使用。例如：var a = {};独一无二和任何位置使用满足了单例模式的两个条件。但是全局变量存在很多问题，它很容易造成命名空间污染。作为普通的开发者，我们有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。以下几种方式可以相对降低全局变量带来的命名污染。

1. 使用命名空间

最简单的方法依然是用对象字面量的方式：

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

把 a 和 b 都定义为 namespace1 的属性，这样可以减少变量和全局作用域打交道的机会。另外我们还可以动态地创建命名空间

var MyApp = {};
MyApp.namespace = function( name ){
    var parts = name.split( '.' );
    var current = MyApp;
    for ( var i in parts ){
        if ( !current[ parts[ i ] ] ){
            current[ parts[ i ] ] = {};
        }
        current = current[ parts[ i ] ];

    }
};

function testCase(){
    MyApp.namespace( 'event' );
    MyApp.namespace( 'dom.style' );
    console.dir( MyApp );
}

// 上述代码等价于：
var MyApp = {
    event: {},
    dom: {
        style: {}
    }
};

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

这种方法把一些变量封装在闭包的内部，只暴露一些接口跟外界通信：

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

我们用下划线来约定私有变量 __name 和 __age ，它们被封装在闭包产生的作用域中，外部是访问不到这两个变量的，这就避免了对全局的命令污染。

1.5 惰性单例

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，这种技术在实际开发中非常有用，有用的程度可能超出了我们的想象。

Singleton.getInstance = (function(){
    var instance = null;
    return function( name ){
        if ( !instance ){
            instance = new Singleton( name );
        }
        return instance;
    }
})();

instance 实例对象总是在我们调用 Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建。

// 在页面加载完成的时候便创建好这个 div 浮窗，不合理
<body>
	<button id="loginBtn">登录</button>
</body>
<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>


//用户点击登录按钮的时候才开始创建该浮窗
<body>
	<button id="loginBtn">登录</button>
</body>
<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>
</html>

//虽然现在达到了惰性的目的，但失去了单例的效果。

//正确的做法 可以用一个变量来判断是否已经创建过登录浮窗
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.6 通用的惰性单例

这段代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 createLoginLayer对象内部。如果我们下次需要创建页面中唯一的 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;
    }
})();

现在我们就把如何管理单例的逻辑从原来的代码中抽离出来，这些逻辑被封装在 getSingle函数内部，创建对象的方法 fn 被当成参数动态传入 getSingle 函数：

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

用一个变量 result 来保存 fn 的计算结果,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';
};

在这个例子中，我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里，这两个方法可以独立变化而互不影响。

这种单例模式的用途远不止创建对象，比如我们通常渲染完页面中的一个列表之后，接下来要给这个列表绑定 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 实际上只被绑定了一个事件。

1.7 小结

先学习了传统的单例模式实现，也了解到因为语言的差异性，有更适合的方法在 JavaScript中创建单例。这一章还提到了代理模式和单一职责原则。在 getSinge 函数中，实际上也提到了闭包和高阶函数的概念。单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。

JavaScript设计模式系列—模式篇（一）单例模式

博客地址：https://blog.youkuaiyun.com/pcaxb/article/details/100512295