JS发布订阅模式实现-优快云博客

本文链接：https://blog.youkuaiyun.com/QG_zhang/article/details/79255360

直接上代码

js代码test.js

var xEvent=(function(){
    function xEvent(){
        this._events={};
    }
    xEvent.prototype={
        emit:function(name,obj){
            if(name in this._events){
                for(var i=0;i<this._events[name].length;i++){
                    this._events[name][i](obj);
                }           
            }
        },
        on:function(name,callback){
            if(!(name in this._events)){
                this._events[name]=[];
            }
            this._events[name].push(callback);
        },
        remove:function(name,callback){
            this._events[name]?this._events[name].splice(this._events[name].indexOf(callback), 1) : void 0;
        },
        removeAll:function(name){
            this._events[name]=[]
        }
    }
    return xEvent;
})();

测试代码test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js发布/订阅模式</title>
</head>
<body>
    <script src="./test.js">
    </script>
    <script>
        var event=new xEvent();
        var test0=function(res){
            console.info('test0-----监听',res);
        };

        var test1=function(res){
            console.info('test1-----监听',res);
        };

        console.info('test0--------------------------start');
        event.on('test0',test0);

        event.emit('test0',{
            code:0,
            msg:'test0---0',
            data:null
        });

        console.info('test1-------------------移除监听测试');
        event.on('test1',test1);
        event.remove('test1');                              
        event.emit('test1',{
            code:1,
            msg:'test1---1',
            data:null
        });
    </script>
</body>
</html>

测试结果

test0--------------------------start
test.html:15 test0-----监听 {code: 0, msg: "test0---0", data: null}
test.html:31 test1-------------------移除监听测试

js 发布/订阅模式

直接上代码