可想完成一个本身的简朴jQuery库？(九)

2024年3月23日 242次阅读 来源: 二哲

Lesson-8

事宜机制

在讲事宜机制之前呢,我们有一个很重要的东西要先讲,那就是怎样完成事宜托付(代办).

只要必须先邃晓了怎样完成一个事宜托付,我们才更好的去完成on和off.在我看来,on和off里最难完成的就是他的事宜托付.

function delegate(agent,type,selector,fn) {
    agent.addEventListener(type,function(e) {

        var target = e.target;
        var ctarget = e.currentTarget;
        var bubble = true;

        while(bubble && target != ctarget) {
            if(filiter(agent,selector,target)) {
                bubble = fn.call(target,e);
            }
            target = target.parentNode;
            return bubble;
        }
    },false);
    function filiter(agent,selector,target) {
        var nodes = agent.querySelectorAll(selector);
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i] == target) {
                return true;
            }
        }
    }
}

以上是我对全部托付的完成,当然在这只做了异常简朴的完成,没有对许多别的状况举行推断,也没有多个参数是不是捕获.

我们先拆解下剖析.

function filiter(agent,selector,target) {
    var nodes = agent.querySelectorAll(selector);
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i] == target) {
            return true;
        }
    }
}

先看这个要领,这实在就是一个元素过滤,作用就是为了过滤出我们托付的元素详细是谁.target就是我们详细的托付元素

agent.addEventListener(type,function(e) {

    var target = e.target;
    var ctarget = e.currentTarget;
    var bubble = true; //是不是阻挠冒泡

    while(bubble && target != ctarget) {
        if(filiter(agent,selector,target)) {
            bubble = fn.call(target,e);
        }
        target = target.parentNode;
        return bubble;
    }
},false);

然后是我们的重要部份.实在这里就很简朴,while的前提推断两个,第一个是是不是阻挠冒泡,第二个推断是冒泡是不是到顶.

接着我们举行filiter举行过滤,假如返回true,则是我们的托付元素,直接call即可.

假如不做过量的兼容处置惩罚,完成一个托付照样比较轻易的.

PS:假如您照样不太邃晓,可以来这看更详细的诠释.http://www.meckodo.com/?p=309

您的star是磨练代码的唯一标准!:)

github地点: https://github.com/MeCKodo/forchange/tree/master/lesson-8
可想完成一个本身的简朴jQuery库？(八)：http://segmentfault.com/a/1190000004025152

    原文作者：二哲
    原文地址: https://segmentfault.com/a/1190000004028768
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞