掌握事件委托：简化你的学习过程

最编程 2024-08-07 13:50:30

...

今天学到了一个很有意思的模式，很多大佬也把他称为事件委托，在这之前，我只听过和学习过，面向过程编程和面向对象编程，现在又加了一个面向委托。他是一种不同于类的设计模式

事件委托

1.原理

不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点。

用法：这里不好用一个直接的dom来表现，就用代码来表现了

Task = {
    setID: function(ID) { 
        this.id= ID;
    }，
    outputID: function() { 
        console.log(this.id); 
        }
    } ;
        
 //让XYZ委托Task
XYZ= Object.create(Task);
XYZ. prepareTask = function(ID, Label) {
    this.setID(ID);
    this.label = Label;
};
XYZ.outputTaskDetails = function() {
    this.outputID();
    console.log(this.label)
}
    
//ABC = Object. create (Task);// ABC ... =...

在这段代码中，Task和XYZ并不是类（或者函数），它们是对象。XYZ通过Object. create(..)创建，它的[[Prototype]]委托了Task对象。

在委托行为中：我们会尽量避免在[[Prototype]]链的不同级别中使用相同的命名，否则就需要使用笨拙并且脆弱的语法来消除引用歧义。这个和类设计模式中恰好相反。

这里运用的this的隐式绑定规则，他会先查找本地XYZ，因为是先绑定到XYZ上，如果没有找到，则会通过Prototype来委托到Task上，这样就可以找到这个方法。因为XYZ委托了Task

互相委托是禁止的，如果这样是进行了无限循环查找，是不允许的。

下面来对比原型和委托的写法方式

这差不多就是我学到的一种新的思想

上一篇：搞定事件委托！原理和应用全解析（必备学习要点总结）

下一篇：事件委托是什么？原理和用处解析

掌握事件委托：简化你的学习过程

事件委托

1.原理

轻松掌握JSP EL表达式（上）：简化你的学习过程

掌握事件委托：简化你的学习过程