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