面向对象的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+

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