JS详解-设计模式

news2025/1/21 0:56:13

工厂模式：

单例模式：

// 1、定义一个类
        class SingleTon{
            // 2、添加私有静态属性
            static #instance
            // 3、添加静态方法
            static getInstance(){
                // 4、判断实例是否存在
                if(!this.#instance){
                    // 5、实例不存在，创建实例
                    this.#instance = new SingleTon();
                }
                // 6、返回实例
                return SingleTon.#instance;
            }
        }
        // 测试代码
        const s1 = SingleTon.getInstance();
        const s2 = SingleTon.getInstance();
        console.log(s1 === s2); // true

观察者模式：

发布订阅模式:

$on

$emit

$off

$once

源码集合：

<h2>发布订阅模式</h2>
    <button class="on">注册事件</button>
    <button class="emit">触发事件</button>
    <button class="off">移除事件</button>
    <button class="once-on">一次性事件注册</button>
    <button class="once-emit">一次性事件触发</button>
    <script>
        class MyEmmiter {
            // 添加私有属性
            #handlers = {
                // 事件名称：[事件处理函数1，事件处理函数2]
            }
            // 添加事件监听
            $on(event,callback){
                // 1.2保存事件
                if(this.#handlers[event] === undefined){
                    this.#handlers[event] = [];
                }
                this.#handlers[event].push(callback);
            }
            // 触发事件
            // 接收不定长参数
            $emit(event,...args){
                // 循环触发事件
                const funcs = this.#handlers[event] || []
                funcs.forEach(callback=>callback(...args))
            }
            // 移除事件
            $off(event){
                // 清空事件
                this.#handlers[event] = undefined
            }
            // 一次性事件注册
            $once(event,callback){
                // 注册$on事件
                this.$on(event,(...args)=>{
                    callback(...args)
                    // 事件内部移除
                    this.$off(event)
                } )
            }
        }
            // 实例化
            const bus = new MyEmmiter();

            // 注册事件
            document.querySelector('.on').addEventListener('click',()=>{
                bus.$on('event1',()=>{console.log('回调函数')})
                bus.$on('event2',(name,info)=>{console.log(name,info)})
                bus.$on('event2',(name,info)=>{console.log('event 第二个回调函数',name,info)})
            })
            // 触发事件
            document.querySelector('.emit').addEventListener('click',()=>{
                bus.$emit('event1')
                bus.$emit('event2','ian','18')
            })
            // 移除事件
            document.querySelector('.off').addEventListener('click',()=>{
                // 移除事件1
             bus.$off('event1')
            })
            // 一次性事件注册
            document.querySelector('.once-on').addEventListener('click',()=>{
                bus.$once('event3',(name,info)=>{console.log('一次性事件',name,info)})
            })
            // 一次性事件触发
            document.querySelector('.once-emit').addEventListener('click',()=>{
                bus.$emit('event3','ian','18')
            })