手写订阅发布模式

最新推荐文章于 2024-06-01 21:13:15 发布

5月初

最新推荐文章于 2024-06-01 21:13:15 发布

阅读量829

点赞数 1

分类专栏： js 文章标签： js设计模式订阅发布

本文链接：https://blog.csdn.net/zzh738579138/article/details/124387132

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路

1.一个on方法用来收集订阅的事件和事件对用的名称；名称用来发布时候触发事件

一个名称可以对应多个事件，一个事件可以对应多个名称；

2. 一个off 方法来去掉on 方法收集的事件；

3.emit 发布on 收集的事件

下面上代码（可复制直接运行试试输出）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            class EventEmitter {
                constructor(){
                    this.events = {};
                }// 补全代码
                on(event,fn){
                   if(Array.isArray(event)){
                       for(let i = 0; i < event.length; i++ ) {
                           this.on(event[i],fn);
                       }
                   }else {
                       (this.events[event] || (this.events[event] = [])).push(fn);
                   }
                    return  this;
                }
                off(event,fn){
                    if(!event){
                        this.events = object.create(null);
                        return this
                    }
                    if(Array.isArray(event)){
                        for (let index = 0; index < event.length; index++) {
                            const element = event[index];
                            this.off(element,fn);
                        }
                        return this;
                    }else {
                        if(!fn){
                            this.events[event] = [];
                            return this;
                        }
                        const eventsList = this.events[event];
                        for (let index = eventsList.length - 1; index >= 0; index--) {
                            const element = eventsList[index];
                            if(fn === element ){
                                eventsList.splice(index,1);
                            }
                        }
                    }
                }
                emit(event){
                    if(!this.events[event]) return this;
                    const arg = Array.from(arguments).slice(1);
                    for(let i = 0; i < this.events[event].length;i++){
                        
                        this.events[event][i](...arg);
                    }
                }
            }
            (function (){
                let sign1 = 0;
                let sign2 = 0;
                const emitter = new EventEmitter();
                var fun1 = function() {sign1 ++};
                var fun2 = function() {sign2 ++};
                emitter.on('add',fun1 );
                emitter.on('add',fun2);
                emitter.off('add',fun1);
                emitter.emit('add');
                
                
                // emitter.emit('add');
                const judge = sign1 === 0 && sign2 === 1;
                console.log(judge,sign1,sign2,8)
            })();
        </script>
    </body>
</html>

5月初

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写订阅发布模式

思路1.一个on方法用来收集订阅的事件和事件对用的名称；名称用来发布时候触发事件一个名称可以对应多个事件，一个事件可以对应多个名称；2. 一个off 方法来去掉on 方法收集的事件；3.emit 发布on 收集的事件下面上代码（可复制直接运行试试输出）<!DOCTYPE html><html> <head> <meta charset=utf-8> </head> <body
复制链接

扫一扫

专栏目录