javascript - jQuery 中使用函数处理程序 + 参数调用事件

Question

我有以下代码，重复了几次，只有一些变化:

$('#mapContainer').on({
    mouseenter: function () {
        Map.ApplyEvents.Country(this.id);
    },
    click: function () {
        Map.Zoom.State(this.id);
    }
},
'.mapaCountry path');

// this is in another function
$('#mapContainer').on({
    mouseenter: function () {
        Map.ApplyEvents.State(this.id);
    },
    click: function () {
        Map.Zoom.County(this.id);
    }
},
'.mapaState path');

在所有事件中，我都必须调用匿名函数才能调用内部的 1 个函数。

有没有办法压缩此代码，将处理程序分配给所需的函数，同时还使用 this.id 通知参数？

我想实现这样的目标:
(注意:我知道这是错误的语法。)

$('#mapContainer').on({
    mouseenter: Map.ApplyEvents.Country(this.id),
    click: Map.Zoom.State(this.id)
},
'.mapaCountry path');

$('#mapContainer').on({
    mouseenter: Map.ApplyEvents.State(this.id);
    click: Map.Zoom.County(this.id)
},
'.mapaState path');

Answer 1

恕我直言，您的第一个片段是实现您想要的目标的最惯用的方式。

<小时/>

如果您确实有无数这样的绑定(bind)，并且您的 Map API 仅由仅采用一个字符串参数的函数组成，那么您可以设计一个定制的绑定(bind)器:

$.fn.bindIDlistener = function(handlers, sel) {
    var wrapper  = {}, evt;
    for (evt in handlers) {
        wrapper[evt] = function(){ handlers[evt](this.id); };
    }
    this.on(wrapper, sel);
}

//usage :
$('#mapContainer').bindIDlistener({
    mouseenter: Map.ApplyEvents.Country,
    click: Map.Zoom.State
},
'.mapaCountry path');

$('#mapContainer').bindIDlistener({
    mouseenter: Map.ApplyEvents.State,
    click: Map.Zoom.County
},
'.mapaState path');

但我仍然建议强烈考虑这种方法的小好处(每个事件处理程序 20 个字符)，以应对您可能遇到的快速限制(在链中添加另一个故障点，代码对外部方来说可读性较差，很难将第二个参数传递给处理程序等...)