js单例模式

概念

一个构造函数只能有一个实例

核心代码

  const Person = (function () {
        class Person {
            construct(name) {
                this.name = name;
            }
        }
        
        let instance = null

        return function () {
            if (!instance) instance = new Person()
            return instance
        }

    })()

    let p1 = Person()
    let p2 = Person()

    console.log(p1 == p2, p1, p2); // true

案例

案例一 弹出框

   <div class="main_cover">
        <div class="main wxj_main_cover">
            <p class="wxj_main_content">
                我是弹出层
            </p>
            <button class="wxj_tip_close_btn">
                关闭
            </button>
        </div>
    </div>

$(function () {
    const Tip1 = (function () {
        // 实现功能的类
        class Tip {
            constructor() {
                this.init()
            }

            // 设置核心区域文字
            setContent(val = "默认内容") {
                $(".wxj_main_content").text(val)
            }

            callback = function () { }

            init() {
                this.showTip()

                $(".wxj_tip_close_btn").on("click", () => {
                    this.showTip(false)
                    this.callback("关闭成功---")
                })
            }

            showTip(isShow = true) {
                if (isShow) {
                    $(".wxj_main_cover").show()
                    return
                }

                $(".wxj_main_cover").hide()
            }
        }

        // 单例核心代码
        let instance = null

        return function (text, cb) {
            if (!instance) instance = new Tip()
            instance.setContent(text)
            instance.callback = cb || function () { }
            return instance
        }
    })()

    let p1 = new Tip1("默认内容", (res) => {
        console.log(res);
    })
})