事件池 dom0 dom2

• 设计模式

  • 发布订阅-观察者
    • 事件池 存放->按顺序执行
  • 模块模式
    • 闭包
  • 工厂模式
    • 无法区分关系
  • 构造函数模式
  • 混合模式（工厂 模块）
    • 定制化
  • 单例模式
    • 有且只有一个

• JQ的发布订阅

  • pond1=('.submit').click(function(){
    pond1.add(func) //添加到事件池中的方法
    $pond1.remove(func) //移除事件池中的方法

• DOM0和DOM2

  • 语法上的区别
    • dom0 box.onclick=function(){}
    • dom2 box.addEventListener('click',function(a,b,c){}) //a:事件名 click b:方法名 c:true-捕获阶段调用 false-冒泡阶段调用
  • 底层运行机制
    • dom0 元素某个属性绑定方法值 有效绑定的方法只有一个（后面替换之前的）
    • dom2 基于事件池机制完成，每增加一个绑定的方法，都会往事件池中存放一个 当事件触发会依次执行事件池中的事件（类似发布订阅模式 模拟事件池机制），可以给同一个元素的某个事件绑定多个不同的方法
  • dom2中可以给一些特殊的事件类型绑定方法，这些类型dom0不支持绑定，DOMContentLoaded(dom结构加载完成 触发执行事件)、transitioned(css3 过渡动画执行完成触发)
    • (function(){}) dom2 可以绑定多个
      • dom结构加载完成就执行
    • window.onload dom0 只能绑定一个 => dom2 window.addEventListener('onload',function(){})
      • dom树+所有相关资源均加载完毕才执行
  • dom2的事件池机制
    1. 基于addEventListener/attachEvent(IE6-8)向事件池追加方法、新版本浏览器会根据元素和事件类型对新增方法做重复校验，但是IE6-8不可以
    2. removeEventListener/dttachEvent删除事件 不能移除匿名函数
    3. 当事件行为触发，会把事件池中的方法按照增加的顺序执行，但IE6-8中执行的顺序是不固定的（乱序执行） 捕获 目标 冒泡

• 事件池--数组塌陷

        let _subscribe=(function(){
            //发布订阅类subscribe
            class Sub(){
                constructor(){
                    //创建事件池 存储后期需要执行的方法
                    this.$pond = [];
                    
                    //向事件池中追加方法   func(需要追加的方法 判断是否是方法 去重)
                    add(func){ 
                        /*some
                            arr.some(item=>{
                                return item>1
                            })
                            找true
                            是否存在满足条件的 true   循环结束没有 false 不检测空数组，不改变原始数组) 
                        
                        every
                            找false
                            找到后终止并返回false 每个对象是否满足条件
                        
                        find
                            arr.find(item=>{
                                return item.flag
                            })   
                            返回找到的满足条件的第一项，停止循环 不改变原始数组 循环完毕没找到返回undefined，不检测空数组)
                        
                        
                        includes(arr.includes(1)  true/false) filter(筛选 返回新数组,不改变旧的) 
                        
                        map(映射 返回新数组,不改变旧的) 
                        */
                        let flag = this.$pond.some(item=>{
                            return item===func
                        })
                        if(!flag){
                            this.$pond.push(func)
                        }
                        // !flag ? this.$pond.push(func) : null;
                    }

                    //移除事件池中的方法
                    remove(func){
                        //splice filter  浅拷贝 堆内存 引用类型
                        let $pond=this.$pond;
                        for(let i=0;i<$pond.length;i++){
                            let item=$pond[i];
                            if(item===func){
                                //移除 不改变方法顺序（改变顺序 删除当前项 将最后一项添加到当前位置，然后删除最后一位--性能优化） splice(i,n)
                                $pond.splice(i,1);  //导致数组塌陷-->假移除 赋值为null
                                $pond[i]=null//解决数组塌陷 伪删除 保证索引
                                break;  
                                //终止循环 区别return（终止当次循环）  
                            }
                        }
                    }

                    //通知事件池中的方法依次执行
                    fire(...args){   //...扩展运算符   args  传进来所有参数的数组（不确定参数有几个）
                        let $pond=this.$pond
                        for(let i=0;i<$pond.length;i++){
                            let item=$pond[i]
                            if(typeOf item!=='function'){
                                $pond.splice(i,1);  //再进行删除
                                i--;
                                continue;//跳过循环体中剩下的语句                                 
                            }
                            item.call(this,...args)  //this指向当前实例   单独传参 在三个或以上参数时 call的性能略优与apply  --apply  数组传参
                        }
                    }
                }
            }
            return function subscribe(){  //暴露外界使用 做普通函数
                return new Sub()
            } 
        })();//闭包 防止污染 冲突

        let s1 = _subscribe(); //创建实例 事件池
        document.querySelector('.submit').onclick=function(event){
            let evt=event?event:window.event;    //cancelBubble  取消事件冒泡        stopPropagation  取消事件冒泡和下沉
            s1.fire(evt) //执行事件池中的方法执行
        }
        s1.add(func)
        s1.remove(func)

• B站学习偶然看到的 up主-光影哔哩 珠峰培训课程
• 之前的知识忘却大部分了 有错误的地方欢迎大佬联系我改正
• 好久不学习了~ 咸鱼太久了啊