2

我有一个关于开发面向对象的 javascript 和解析变量的问题。有关更多信息，请参阅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. 更好的选择可能是使用另一种方法，并使用此方法从 DOMuser.willGetUserDetails获取属性。userID这可以从页面上的任何位置运行，并getUserDetails在获取userID. 每当用户详细信息来自另一个函数时，我们都会直接调用getUserDetails。

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

4

1 回答 1

4

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

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

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

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);
    }
}
于 2013-03-21T16:02:07.393 回答