JavaScript设计模式一单例模式

12次阅读

共计 1955 个字符，预计需要花费 5 分钟才能阅读完成。

停更许久，近期计划更新：设计模式系列。

单例模式：限制类实例化次数只能一次，一个类只有一个实例，并提供全局访问点。(归属创建型设计模式)

类只有一个实例
全局可访问该实例
自行实例化（主动实例化）
可推迟初始化，即延迟执行（与静态类 / 对象的区别）

实现方式：使用一个变量存储类实例对象（值初始为 null/undefined）。进行类实例化时，判断类实例对象是否存在，存在则返回该实例，不存在则创建类实例后返回。多次调用类生成实例方法，返回的同一个实例对象。

class Singleton {constructor(name) {this.name = name;}
  getName() {return this.name;}
}
Singleton.getInstance = (function () {
  let instance;
  return function (name) {if (!instance) {instance = new Singleton(name);
    }
    return instance;
  }
})();

var Winner = Singleton.getInstance('Winner');
var Looser = Singleton.getInstance('Looser');

console.log(Winner === Looser); // true
console.log(Winner.getName());  // 'Wiinner'
console.log(Looser.getName());  // 'Looser'

代码中定义了一个 Singleton 类，并定义 Singleton.getInstance() 方法来生成实例对象。而不是通过 new 操作符来创建类实例。

在 Singleton.getInstance() 中，通过闭包引用存储类实例的对象，判断类是否实例化过。（这里闭包的使用能够使 getInstance() 多次调用都能获取到之前类实例的存储值）。因此无论执行多少次 Singleton.getInstance() 方法，都只会返回同一个 Singleton 类实例对象。

“单例模式的特点，意图解决：维护一个全局实例对象。”

引用第三方库
弹窗登录框
购物车
全局态管理 store (Vuex / Redux)

项目中引入第三方库时，重复加载库文件，全局只会实例化一个库对象，如 jQuery，lodash，moment …, 其实它们的实现方式也是单例模式应用的一种：

// 引入代码库 libs(库别名）if (window.libs != null) {return window.libs;    // 直接返回} else {window.libs = '...';   // 初始化}

单例设计模式实现全局弹窗登录框：

class LoginModal {constructor() {const div = document.createElement('div');
        div.innerHTML = '登录框 HTML 内容';
        div.style.display = 'none';
        this.el = div;
        this.visible = false;
        document.body.append(div);
        return div;
    }
    show() {this.el.style.display = 'block';}
    hide() {this.el.style.display = 'none';}
    toggle() {
        this.visible = !this.visible;
        this.visible ? this.show() : this.hide();
    }
}

LoginModal.getInstance = (function() {
    let instance;
    return function() {if (!instance) {instance = new LoginModal();
        }
        return instance;
    }
})();

// 按钮切换显示登录框
document.getElementById('btn-login').addEventListener('click', function(){LoginModal.getInstance().toggle();})