《JavaScript设计模式与开发实践》——学习笔记（单例模式）

定义

单例模式是保证一个类仅有一个实例，并提供一个访问它的全局访问点。——《JavaScript设计模式与开发实践》。

其核心要义是利用一个初始值为空的变量来存储实例，并通过是否有已有实例被存储来做出两种不同的行为：直接返回以存储实例或创建并存储实例。

由于单例模式存在两种类型的行为：实例的创建，单一实例的维护。故而单例模式天生适用单一职责原则，即将单一实例的维护与实例的创建拆分到两个对象当中。

传统的单例模式是通过类实现的；但JavaScript实际上并不存在“类”，因此其实现方案较传统有所不同。

运用场景

1、需要构建单例的情况。

2、目标函数只需要运行一次的情况（类似once函数）。

实现示例

// 以下函数实现创建单独一个dom元素

// 创建dom元素
const createDiv = (html) => {
    const div = document.createElement('div');
    div.innerHTML = html;
    document.body.appendChild(div);
    return div;
}

// 控制单例
const singletonCreate = (fn) => {
    if (typeof fn !== 'function') {
        console.error('please input a funtion');
        return;
    }
    
    let single;
    return function (...args) {
    	if (!single) single = fn.apply(this, args);
        return single;
    }
}

const func = singletonCreate(createDiv);
const div1 = func('div1');
const div2 = func('div2');
console.log(div1 === div2); // true

这里值得一提的一点（也是接下来我在实际项目中运用到的一点），就是createDiv、singletonCreate两个方法的拆分上（单一职责原则）。

将dom元素的构建与单例维护这两块逻辑拆分开来，提高了两个函数的复用性。

当我需要构建一个div时，可以单独使用createDiv函数；当我需要去构建一个单例时，可以单独使用singletonCreate（将目标函数传入）。