面向对象的 Javascript 自定义 addEvent 方法

Question

我有一个关于开发面向对象的 javascript 和解析变量的问题。请参阅this blog by net.tutsplus - The Basics of Object-Oriented JavaScript 了解更多信息。

我有以下创建事件的代码：

$(document).ready(function() {
    tools.addEvent('.someButton', 'click', user.getUserDetails);
)};

var tools = {
    addEvent: function(to, type, fn) {
        $(to).live(type, fn);
    }
}

var user = {
    getUserDetails: function(userID) {
        console.log(userID);
    }
}

如您所见，它使用三个变量调用addEvent 方法；要将事件附加到的 DOM 元素、事件的类型以及触发事件时要运行的函数。

我遇到的问题是将变量解析为 getUserDetails 方法，我知道 2 个选项：

1. 我显然可以在开头有 1 行代码来检查发件人的属性。例如，.someButton 可以具有属性userID="12345"。但是，这并不理想，因为该函数从多个不同的地方运行 - 这意味着此检查并不总是可用（并且代码更难管理）。

2. 更好的选择可能是使用另一种方法，例如 user.willGetUserDetails，并使用此方法从 DOM 中获取属性 userID。这可以从页面上的任何位置运行，并在获得userID 后调用getUserDetails。每当用户详细信息来自另一个函数时，我们只需直接调用getUserDetails。

3. 理想的情况是，如果我可以修改上面的代码以直接传递一个变量——甚至是一个未定义的变量。有谁知道如何做到这一点？

Answer 1

在您的 addEvent 代码中再添加一个参数，以接受要传递给事件的数据。

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(to).live(type, data, fn);
    }
}

另外，我建议改用委托，或者在 1.7+ 中使用 .on

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(document).delegate(to, type, data, fn);
    }
}

或

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(document).on(type, to, data, fn);
    }
}

现在你可以像这样使用它了：

$(document).ready(function() {
    tools.addEvent('.someButton', 'click', {userID: theuserid}, user.getUserDetails);
)};

var user = {
    getUserDetails: function(event) {
        console.log(event.data.userID);
    }
}