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个选项：

我显然可以在开始时有一行代码，可以检查发件人的属性。例如，.someButton可以包含属性userID="12345"。但是，这并不理想，因为该函数是从几个不同的地方运行的 - 这意味着此检查并不总是可用（并且代码更难管理）。
更好的选择可能是使用另一种方法，例如user.willGetUserDetails，并使用此方法从DOM中获取属性userID。这可以在页面的任何位置运行，并在获得getUserDetails后调用userID。每当用户详细信息来自其他功能时，我们只需直接致电getUserDetails。
什么是理想的，如果我可以修改上面的代码直接传递变量 - 甚至是未定义的变量。有谁知道如何实现这一目标？

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);
    }
}

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

1 个答案: