总结起来就是： 先订阅–再发布
1.将注册的函数收集起来。 （订阅)
2.在触发时，逐个触发。 （发布)
3.还可以根据key来删除某个监听函数。

<!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>sub and pub</title>
</head>
<body>
    <h3>This is a subscribe and publish demo!</h3>
    <script>
        function SubPub(){
            this.allFunObj = {}
        }
        SubPub.prototype = {
            // 收集某个key的所有函数
            on: function(key,fun){
               // let self = this;
                // 首先判断是否已经存在该key了，将所有注册函数收集起来
                if(this.allFunObj.hasOwnProperty(key)){
                    this.allFunObj[key].push(fun)
                }else{
                    this.allFunObj[key] = [];
                    this.allFunObj[key].push(fun)
                }
            },
            // 触发事件
            emit: function(key){
                // 截取从第二个开始到结束的所有参数，返回一个参数数组
                // let args = Array.prototype.slice.call(arguments,1);
                // 相当于将数组第二项之后的截取出来
                console.log('--arguments',arguments)
                let [firstOne,...args] = arguments
                console.log('##key:',firstOne,',args:',args)
                for(let i=0;i<this.allFunObj[key].length;i++){
                    // 此处的apply和call的区别就是传入的参数不一样，前者是传入参数数组，后者将参数一个个传入。
                    // this.allFunObj[key][i].apply(this,args);
                    this.allFunObj[key][i].call(this,...args);
                }
            },
            // 删除事件
            off: function(key,fun){
                for(let i=0;i<this.allFunObj[key].length;i++){
                    if(this.allFunObj[key][i] == fun){
                        this.allFunObj[key].splice(i,1)
                    }
                }  
            }
        }

        // 创建实例
        let sp = new SubPub();
        
        // 注册事件
        sp.on('a',function(data){
            console.log('--data1',data)
        })
        sp.on('a',function(data,data1){
            console.log('--data2',data,data1)
        })
        var cb = function(data){
            console.log(data)
        }
        sp.on('a',cb);

        sp.on('b',function(data,data1){
            console.log('--data2',data,data1)
        })
        
        // 触发事件
        sp.emit('a',123,455);
        sp.off('a',cb) // 删除cb事件
        sp.emit('a','第二次调用','第3次调用')
        sp.emit('b','第1次调用','第2次调用')
    </script>
</body>
</html>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue