对象文字和事件监听器,最佳实践？

Question

假设我有一个对象,有一些属性和方法:

var Form = {
    name: 'sign-up',

    show: function() {...},
    hide: function() {...},
    validate: function() {...},
    updateCurrency: function() {...},
    handleCheckBox: function() {...}
}

现在我想在我的表单中发生某些事件时调用不同的方法,如下所示:

$('#country-select').bind('change', function() {
    Form.updateCurrency();
});

$("input[type='checkbox']").bind('change', function() {
    Form.handleCheckBox();
});

我有很多这些事件监听器,坦率地说,我发现它们像这样一个接一个地列出,并没有直接与它们相关的对象联系在一起.有没有更优雅的方法将它们封装在我的对象文字中Form？有最好的做法吗？

Answer 1

我喜欢@gillesc回答,它在正确的轨道上.但是,我认为我们可以做得更好.

@gillesc回答的主要问题是它缺少事物的动态方面(例如事件处理程序),它也强制你定义丑陋的回调函数.

所以我认为你应该如何解决你的问题.

// Test object
var testObj = {
    // Our event handlers. 
    // Notice how we must only define the callback function name here. 
    // Not the function itself. The callback function must be defined in testObj.
    handlers: {
        '#form submit': 'onSubmit'
    },
    // Method that will register all handlers to some selector
    registerHandlers: function() {
        var that = this;
        // Go through the handlers list.
        $.each(this.handlers, function(k, v) {
            // Parsing the event to two different parts. 
            // 1. trigger event
            // 2. selector
            var split = k.split(" "),
                el = split[0],
                trigger = split[1];

            // Delegating the trigger to selector
            $(document).delegate(el, trigger, that[v]);
        });
    },
    // Our actual callback function
    onSubmit: function(evt) {
        evt.preventDefault();
        alert("submit");
    }
};

它会如何运作？这很简单!我们只需要打电话testObj.registerHandlers().

JSFiddle演示