Fixjs——事件回调的this

 

 

Fixjs介绍

Fixjs是一款javascript界面基础框架，主要为开发复杂组件提供底层的框架支持。

框架的类与接口我会尽量参考flash框架的实现。同时，我也会开放Fixjs的源代码，欢迎同仁一起学习、交流。

 

事件回调的this问题

在javascript中，函数调用的时候，this指向调用的对象，这个特性会造成代码上下文的不一致。请看一下代码片段：

在hui.layout.MovableExtension实例中向this._target注册一个mousedown事件，回调时调用hui.layout.MovableExtension实例的mouseDownHandler处理函数

hui.layout.MovableExtension = fixjs.Object.extend({

    init: function(target) {

        this._target = target;

        //略…

        this.stagePoint = new fixjs.geom.Point(0, 0);

        //略…

        this._target.addEventListener(fixjs.events.MouseEvent.MOUSE_DOWN, this._mouseDownHandler);

    },

    _mouseDownHandler:function (event) {

        if (event.currentTarget!= this._target || event.type != fixjs.events.MouseEvent.MOUSE_DOWN)

           return;

        //以下代码将报错，因为this并不指向当前的hui.layout.MovableExtension实例

        this.stagePoint.x = event.stageX;

        this.stagePoint.y = event.stageY;

        //略…

现在的问题是，mouseDownHandler中的this并不指向当前hui.layout.MovableExtension实例，这导致事件注册和事件处理的上下文不一致，对代码的编写造成困扰。

 

修正事件回调的this

Javascript函数提供了call或applly方法，能够重新设定函数调用的this。如果在注册事件的时候，传入回调时的this对象，在派发事件时调用call设置this对象，上下文不一致的问题就解决了。

因此，fixjs.events.EventDispatcher的注册和事件派发要做一些调整：

注册事件时addEventListener新增caller参数，由外部传入函数回调的this对象；派发事件时调用函数的calll方法并传入caller。

fixjs.events.EventDispatcher = fixjs.Object.extend({

    //略…

    addEventListener: function(type, func, caller){

        if (!this._isFunction(func)){

           return;

        }

        var list = this._events.get(type);

        if (!list) {

           list = [];

           this._events.set(type, list);

        }

        var item = { func: func,caller: caller };

        if (!item.caller)

           item.caller = this; //caller为空时将指向当前的fixjs.events.EventDispatcher实例

        list.push(item);

    },

    dispatchEvent: function(event) {

        if (!(event instanceof fixjs.events.Event))

           return;

        var list = this._events.get(event.type);

        if (!list || !list.length) {

           return;

        }

        if (!event.target){

           event.target = this;

           if (this._target)

               event.target = this._target;

        }

        event.currentTarget = this;

        if (this._target)

           event.currentTarget = this._target;

 

        var buffer = list.slice(0);

        while (buffer.length){

           varitem = buffer.splice(0, 1)[0];

           if (list.indexOf(item) >= 0) {

               item.func.call(item.caller,event); //调用函数的call并传入caller

           }

        }

    }

});

经过上述调整后，事件回调的上下文能够自行控制了，以下是修正后的hui.layout.MovableExtension代码：

hui.layout.MovableExtension = fixjs.Object.extend({

    init: function(target) {

        this._target = target;

        //略…

        this.stagePoint = new fixjs.geom.Point(0, 0);

        //略…

        this._target.addEventListener(fixjs.events.MouseEvent.MOUSE_DOWN,this._mouseDownHandler,this); //传入当前的hui.layout.MovableExtension实例this

    },

    _mouseDownHandler:function (event) {

        if (event.currentTarget!= this._target || event.type != fixjs.events.MouseEvent.MOUSE_DOWN)

           return;

        // this指向当前的hui.layout.MovableExtension实例

        this.stagePoint.x = event.stageX;

        this.stagePoint.y = event.stageY;

        //略…

注册事件时传入多一个参数this。

 

相关文章

Fixjs专栏