更好的事件处理

在Js应用中事件的处理很重要,写出漂亮的事件处理方法显得更重要。

需求背景:

产品经理说:在鼠标点击这个按钮时,根据鼠标位置显示一个弹窗。

巴拉巴拉写完了:

function handleClick(event) {
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

addListener(element, "click", handleClick);

思路:获取点击时鼠标位置,然后给弹窗定位最后展示。

上面的代码看上去很好,满足需求。

第二天产品说:“小伙,昨天干的不错。可是今天还有一个需求,就是在鼠标滑进该区域时,也显示一个弹窗!”说完产品洋洋洒洒走了。你只能服从,产品是上帝,“产品虐我千百遍,我待产品如初恋。”

这么简单的问题怎么会难道我,三下五除二写好了代码:

function handleMouseOver(event) {
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

addListener(element, "click", handleMouseOver);    

接着第三天,第四天……渐渐的发现一样的代码被复制了好多变。不行!!!懒惰是程序员的天性。于是我把代码抽离拆分:

var MyApplication = {

    handleClick: function(event) {
        this.showPopup(event);
    },

    handleMouseOver:function(event){
        this.showPopup(event);
    }

    showPopup: function(event) {
        var popup = document.getElementById("popup");
        popup.style.left = event.clientX + "px";
        popup.style.top = event.clientY + "px";
        popup.className = "reveal";
    }
};

addListener(element, "click", function(event) {
    MyApplication.handleClick(event);
});

addListener(element, "mouseover", function(event) {
    MyApplication.handleMouseOver(event);
});

再也不用怕产品的弹窗需求,哈哈!!! 停,别高兴太早。有没有发现一些不大舒服的地方:event对象被多次传递,其实在弹窗函数里面我们只需要知道坐标就行,所以我们可以继续完善我们的代码:

var MyApplication = {

    handleClick: function(event) {
        this.popup(event.clientX, event.clientY);
    },

    handleMouseOver:function(event){
        this.popup(event.clientX, event.clientY);
    }

    showPopup: function(x, y) {
        var popup = document.getElementById("popup");
        popup.style.left = x + "px";
        popup.style.top = y + "px";
        popup.className = "reveal";
    }
};

综述最后代码到底好在哪里呢?

  • 将应用逻辑(和应用相关的功能性代码,而不是和用户行为相关的)从所有事件处理程序中抽离出来,方便多处调用;

  • 方便测试人员测试,不需要模拟事件对象就可以轻松显示弹窗;

  • 不要分发事件对象;

分享到: