Design Pattern-Singleton Pattern-JS

In singleton mode, an instance of a class is only created once, and the same instance is referenced everywhere it is used.
Take the pop-up window as an example
1: Method creation

<style>
	/*样式*/
    .popup-dom{
    
    
        width: 100px;
        line-height: 32px;
        height: 32px;
        text-align: center;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        border: 1px solid red;
        display: none;
    }
</style>

<body>
	<!-- 标签 -->
    <button id="open">打开</button>
    <button id="close">关闭</button>
</body>

// 函数方法式单例实现-弹窗
class Popup {
    
    
    constructor () {
    
    
        this.popupDom = null; // DOM容器
        this.createdPopupDOM(); // 创建DOM
    };
    // 构建弹窗实例
    static createdPopup() {
    
    
        if (!Popup.prototype.p) Popup.prototype.p = new Popup();
        return Popup.prototype.p;
    };
    // 创建弹窗DOM
    createdPopupDOM() {
    
    
        let popupDom = document.createElement('div');
        popupDom.className = 'popup-dom';
        popupDom.innerHTML = `
            <div>标题</div>
        `;
        this.popupDom = popupDom;
        document.body.appendChild(this.popupDom);
    };
    // 显示
    showPopup() {
    
    
        this.popupDom.style.display = 'block';
    };
    // 隐藏
    hiddenPopup() {
    
    
        this.popupDom.style.display = 'none';
    };
};
// 原型上暂存创建的实例
Popup.prototype.p = null;
// 创建实例1，2
let popup_1 = Popup.createdPopup();
let popup_2 = Popup.createdPopup();
console.log(popup_1  === popup_2 ); // true
// 获取DOM按钮
let openButton = document.querySelector('#open');
let closeButton = document.querySelector('#close');
// 绑定事件
openButton.addEventListener('click', () => {
    
    
    popup_1.showPopup();
});
closeButton.addEventListener('click', () => {
    
    
    popup_2.hiddenPopup();
});
// 打开关闭的为同一弹窗

2: Create with new method (DOM and style are the same, different parts of JS)

class Popup {
    
    
    constructor () {
    
    
        this.popupDom = null; // DOM容器
        this.createdPopupDOM(); // 创建DOM
    };
    // 创建弹窗DOM
    createdPopupDOM() {
    
    
        let popupDom = document.createElement('div');
        popupDom.className = 'popup-dom';
        popupDom.innerHTML = `
            <div>标题</div>
        `;
        this.popupDom = popupDom;
        document.body.appendChild(this.popupDom);
    };
    // 显示
    showPopup() {
    
    
        this.popupDom.style.display = 'block';
    };
    // 隐藏
    hiddenPopup() {
    
    
        this.popupDom.style.display = 'none';
    };
};
// 创建实例方法
let createdPopup = (function () {
    
    
    let p = null;
    return function () {
    
    
        if (!p) {
    
    
            p = new Popup();
        };
        /* 
        如果构造函数返回的为引用类型，则new构造函数时得到的就是返回值
        其他类型则为构造函数创建的实例
        */
        return p;
    };
})();
// 创建实例1，2
let popup_1 = new createdPopup();
let popup_2 = new createdPopup();
console.log(popup_1  === popup_2 ); // true
// 获取DOM按钮
let openButton = document.querySelector('#open');
let closeButton = document.querySelector('#close');
// 绑定事件
openButton.addEventListener('click', () => {
    
    
    popup_1.showPopup();
});
closeButton.addEventListener('click', () => {
    
    
    popup_2.hiddenPopup();
});
// 打开关闭的为同一弹窗

Ending: Personal summary, welcome to correct or optimize.

Design Pattern-Singleton Pattern-JS

Guess you like