JS事件处理中心的构想

时间 2019-12-09

原文原文链接

在以jQuery为基础库的前端开发体系中，常常会在一个页面上经过各类标识绑定许许多多的事件。就算简单的使用了事件代理，也仍是形成了事件的分散，很差维护和管理。javascript

那么，如何解决这个问题呢？而我，想到了backbone中的events。以下:html

events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  }

也就是，把事件汇集到一块儿，相似事件处理中心这么一个概念。前端

简单的理了一下实现思路：java

使用事件代理的方式，将事件绑定到body节点。（某些事件自身是不冒泡的，在此暂时不作研究）函数
对于事件的执行对象，给一个统一标识。this
事件的执行函数，集中处理。代理

<body>
    <div data-click-center="handler1"></div>
    <div data-click-center="handler2"></div>   
</body>

// 事件处理中心
var ClickEventCenter = {
    "handler1": function () {
        // do something...
    },
    "handler2": function () {
        // do something...
    }
    // ...
}
// 事件绑定
$body.on("click", "[data-click-center]", function () {
    var handlerName = $(this).data("click-center");
    var handler = ClickEventCenter[handlerName]

    if ($.isFunction(handler)) handler()
})

这样的话，一种类型的事件，集中到一块儿。code

在某些时候，可以起到很好的做用。htm