一. 认识单例模式
单例模式的意思是,保证一个类只有一个实例,并且有一个接口供全局访问。它的作用就是防止频繁创建实例,浪费不必要的内存空间和资源消耗,那它有什么实用场景呢,假如我们在页面中有一个点击跳出一个弹窗操作,弹窗应该是唯一的,无论点击多少次它都应该被构建一次,那么这个弹窗就适合用单例模式来创建。
二. 单例模式的分类
- 简单实现单例模式
- 透明实现单例模式
- 代理实现单例模式
- js单例模式
- 惰性单例模式
- 通用惰性单例模式(主要用于 js)
注: 前三种单例模式为用类实现的思想,通过 new 的方式来创建实例,而 javascript 是没有类的,可以直接创建实例,因此并不适用,主要用于后边三种。
三. 具体实现和思想学习
1. 简单实现单例模式
let Singleton = function ( name ) {
this.name = name;
}
Singleton.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;
}
let a = Singleton.getInstance('sk');
let b = Singleton.getInstance('ss');
console.log(a);
console.log(a === b) // true
实现思想:将第一次创建的实例进行保存,之后再次创建前判断是否已经创建,如果之前创建过则返回已经保存的实例,否则创建一个实例,将实例创建和判断封装到了一个 getInstance 函数中,这种方式相对简单,但增加了类的“不透明性”,用一个函数来获取一个实例,而不是以往通过 new 来创建。
2. 透明单例模式
let CreateDiv = function () {
let instance ;
let CreateDiv = function ( html ) {
if( instance ) {
return instance;
}
this.html = html;
this.init();
return instance = this;
}
CreateDiv.prototype.init = function () {
let element = document.createElement('div');
element.innerHTML = this.html;
document.body.appendChild(element);
}
return CreateDiv;
}();
let a = new CreateDiv('石头山');
let b = new CreateDiv('哈哈');
console.log(a === b); // true
实现思想:该方式与前一实现不同的在于用 new 来创建实例,运用了闭包来保存实例标识,从而达到只能创建唯一实例,但是如果有一天想创建多个 div 实例,该代码就不实用了,必须修改代码,因此扩展除了代理实现。
3. 代理实现单例模式
let CreateDiv = function ( html ) {
this.html = html;
this.init();
}
CreateDiv.prototype.init = function () {
let div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild(div);
}
let ProxySingletonCreateDiv = function () {
let instance ;
return function ( html ) {
if( !instance ) {
instance = new CreateDiv( html );
}
return instance;
}
}();
let a = new ProxySingletonCreateDiv('sven1');
let b = new ProxySingletonCreateDiv('sven2');
console.log(a === b); // true
实现思想:CreateDiv 为一个普通类,将创建和判断唯一实例封装在了代理函数中,增加了代码复用性,弥补了透明单例的不足,需要单例则直接 new ProxySingletonCreateDiv(),需要普通实例则直接 new CreateDiv(),但是该方式代码可读性差,也不采用。
4. js的单例模式
① 使用命名空间来创建:将所有变量和方法直接放在一个全局对象中
let S = {
name: '石头山',
getName() {
console.log(this.name);
}
}
② 使用闭包封装私有变量:将变量封装在闭包内部,只向全局暴露一个访问接口
let name = "石头山";
return {
getName() {
return name;
}
}
}
5. 通用惰性单例
// 写一个通用的获取单例的函数 , fn 为执行单次的函数
let getSingle = function ( fn ) {
let result;
return function () {
return result || ( result = fn.apply(this, arguments))
}
}
// 绑定事件
let bindEvent = function () {
document.getElementById('div').addEventListener('click',()=>{
console.log('我出现了')
});
}();
// 无论渲染多少次,事件只绑定一次
let render = function () {
console.log('开始渲染!');
getSingle(bindEvent)
}
render();
render();
render();
该方式是 js 中常用的单例实现方法,再页面重复渲染三次时,监听事件只绑定了一次,减少了开销。
惰性体现:惰性体现在实例实在需要时创建,并不会在页面加载好就创建。
实现思想:首先利用闭包和高阶函数封装了一个返回单一实例的函数,其参数就是一个只执行一次的函数,可以随时改变单例的作用,大大增加了代码的可复用性。
四. 总结
单例模式是一种简单但非常使用的开发模式,js 开发中,通用惰性单例实现方式最常用的一中方式,它将创建对象和管理单例的职责封装在两个不同的方法中,组合在一起就具有了单例模式的威力。