7

假设我有一个具有一些属性和方法的对象：

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？有最佳实践吗？

4

3 回答 3

6

我喜欢@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 演示

于 2012-04-25T20:57:59.040 回答
3

更好地组织您的标记并将类添加到与事件处理程序方法匹配的元素，以便您可以轻松创建处理程序列表并遍历它们以将它们绑定到目标元素。

Var Form = {
    ....,
    handlers: {
        country: function() {},
        checkbox: function() {}
    }
};

$.each(FORMS.handlers, function(k, v) {
    $('.' + k).on('change', v);
});


<select class="country">....</select>
<input class="checkbox" type="checkbox" />

然后你所要做的就是添加类和处理程序来扩展

于 2012-04-25T09:05:02.123 回答
0

好吧，您不需要一开始就将您的函数包装在更多函数中。难道你不能：

$('#country-select').bind('change', Form.updateCurrency);
$("input[type='checkbox']").bind('change', Form.handleCheckBox);
于 2012-04-25T09:52:44.657 回答