js也可以有自定义事件注入就是这么爽

2022-07-15 80酷酷网 80kuku.com

　　在c#中有delegate，还有特殊的可以直接应用于事件编程的delegate，那就是event。而在js中没有c#的event，更没有delegate，有的只是dom元素内置的的native的不可扩展的event，比如无法为input元素添加事件，只能在其拥有的事件（如onclick=handler）上扩展应用。那么能不能做到自定义的事件模拟效果呢？答案是肯定的，也就是本文的主题。
　　首先弄明白一下事件的意图——可以在发生一件事的时候执行额外的代码，如document.attachEvent('onclick', function(){alert('u click document')})，当点击页面时（事件发生了），就会执行我们为其挂接的其它代码（js中以function为语句集合，以下称为function），当然我们可以在一个事件上挂接任意多的function，这样就实现了一种灵活的可扩展编程接口。试想如果可以像在元素事件扩展应用一样可以在任意对象的任意方法上扩展，那对于js编程来讲就更加灵活了。先看一个例子，平时我们把相对对立的一个功能命名为一个function，并在需要的地方（通常是另一个function）调用以实现代码复用：
function F(){
    this.method = function(){
        alert('f.method is called')
        g();
    }
}
function g(){
    alert(123)
}
var f = new F();
f.method()

我们把f.method中直接调用g改写一下，封装到一个Event对象中达到一样的效果，代码如下：
var Event = {
    __list:[],
    observe:function(obj, ev, fun){
        this.__list.push({o:obj, e:ev, f:fun})
    },
    occor:function(obj, method){
        var arr = []
        for(var i=0; i<this.__list.length; i++){
            if(this.__list[i].o==obj && this.__list[i].e==method) arr.push(this.__list[i]);
        }
        for(var i=0; i<arr.length; i++){
            arr[i].f();
        }
    }
}

function F(){
    this.method = function(){
        alert('f.method is called')
        Event.occor(this, 'method');
    }
}

var f = new F();
Event.observe(f, 'method', function(){alert(123)})
f.method()这样乍看上去好像费了“太多”功夫，但却把“在f中调用g的写法”更通用化了，如果要在f中调用h则只需要多些一行Event.occor(this, 'methodName')，写到这里你肯定也注意到methodName的写法和最开始的写法是一样的，都是硬编的不具灵活性，如果在每个类的方法中都写入Event.occor(this, 'method')就太不雅观了，也背离了我们的初衷，动态修改一下method把它加到最后一行就ok了，下一步就是解决它，改进代码如下：

function F(){
    this.method = function(){
        alert('f.method is called')
    }
}

var f = new F();
Event.inject(f);
Event.observe(f, 'method', function(){alert(123)})
f.method()我们把显示的在被调用方法体内调用Event.occor改写到Event.inject中。到此我们就简单（还有一些安全代码没有处理，如没有判断obj[p]是否需要被改写、没有测试效率问题，没有处理更多添加Event.occor时的逻辑判断，下一步准备把它实现为一个Observeable对象，就更加灵活了）的完成了自定义事件。

js也可以有自定义事件 注入就是这么爽

js也可以有自定义事件注入就是这么爽