设计模式-单例模式-JS

最新推荐文章于 2024-07-09 18:13:44 发布

JeTanO

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量117

点赞数

分类专栏：设计模式文章标签： javascript 经验分享

本文链接：https://blog.csdn.net/JeTanO/article/details/116163950

版权

设计模式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

单例模式下，类的实例只创建一次，所有用的到的地方都是引用的同一个实例。
以弹窗为例
1：方法创建

<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：new方式创建（DOM与样式一直，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();
});
// 打开关闭的为同一弹窗