javascript - 面向对象的 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. 显然，我可以在开头使用一行代码来检查发件人的属性。例如，.someButton 可以有一个属性 userID="12345"。然而，这并不理想，因为函数是从几个不同的地方运行的——这意味着这种检查并不总是可用(并且代码更难管理)。

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

3. 理想的情况是，如果我可以修改上面的代码以直接传递一个变量——即使是 undefined variable 。有谁知道这是如何实现的？

Answer 1

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

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

此外，我建议改用委托(delegate)，或者在 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);
    }
}