单例模式
单例模式顾名思义就是只生成一个实例对象的一种模式。无论调用多少次都只返回相同的实例。
当我们单击登录按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个浮窗都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建
应用场景
单例模式一般应用于创建全局的配置对象、全局元素,例如:全局弹出框、全局提示、全局遮罩层等。
全局弹出层
该示例的作用为创建一个全聚德弹出层,用于显示提示信息,用户点击关闭按钮可以隐藏弹出层。
let Tip = (function () {
class Tip {
constructor() {
this.ele = document.createElement('div');
this.ele.className = 'tip';
}
// 设置弹出层的显示信息
setContent(text) {
this.ele.innerHTML = '';
this.ele.style.display = 'block';
}
bindEvent() {
this.ele.addEventListener('click', e => {
e = e || window.e;
let target = e.target || e.srcElement;
if (target.className === 'close') {
this.ele.style.display = 'none';
}
if (target.className === 'cancel') {
console.log('false')
}
if (target.className === 'ok') {
console.log("ok");
}
});
}
}
// 单例模式核心代码,用变量保存需要返回的实例,判断是否已经存在,如果已经存在就返回变量保存的实例,否则就创建实例用变量保存并返回。
let instance = null;
return function () {
if (!instance) {
instance = new Tip();
}
return instance;
}
})()
上面的代码先构建一个Tip类,并添加方法,然后使用instance存储已经创建的对象,并返回函数,函数内部判断是否已经创建实例,如果已经创建就返回已经存在的实例,否则就创建然后返回。虽然也能实现功能,但是返回实例,与构建类的代码耦合在一起,因此,把返回实例部分的代码进行封装,由此,构建类的代码可以和单例模式代码解耦
function createSingle(constructor){
let instance;
return function(){
if(!instance){
instance = new constructor(...arguments);
}
return instance;
}
}
该函数接受一个构造函数,使用 instance 变量保存实例对象,返回一个函数,这个被返回的函数用于判断,如果不存在实例对象就创建并返回实例对象,如果存在就直接返回已创建的实例对象
在使用时,可以传入一个构造函数,用于创建某一类的实例对象,这种模式属于懒汉式单例模式,对象在需要使用的使用才创建。除此之外还有饿汉式单例模式。
function createSingle(constructor){
let instance = new constructor();
return function (){
return instance;
}
}
饿汉式单例模式中对象在程序加载时就创建
总结
单例模式比较简单,主要用于创建唯一实例,由此可以扩大其唯一的范围,除了创建实例外也可以创建DOM元素、变量、函数、全局缓存等。