在javascript/jquery中动态地将实例变量自动链接到对象函数？

我正在尝试用javascript（&jQuery）创建一个健壮的音频播放器。我知道还有其他玩家，但我想尝试创建自己的（所以请不要让我参考jquery插件）。这基本上就是我想做的：

Main.js:

var player = new Player(AudioObj); // Audio object links to Audio class (not shown)
player.buttons.play = $('play');
player.buttons.pause = $('pause'); // Play and pause ID's link to HTML Document Element

Player = function(Audio) {
   this.Audio = Audio;
   this.buttons = {};
   for(var button in this.buttons) {
      button.live('click', this.button); // This is the line I Have NO idea about..
   }
} 

Player.prototype = {
   play : function() {
      // Do Something
   },
   pause : function() {
      // Do something
   }
}

Player.js:

var player = new Player(AudioObj); // Audio object links to Audio class (not shown)
player.buttons.play = $('play');
player.buttons.pause = $('pause'); // Play and pause ID's link to HTML Document Element

Player = function(Audio) {
   this.Audio = Audio;
   this.buttons = {};
   for(var button in this.buttons) {
      button.live('click', this.button); // This is the line I Have NO idea about..
   }
} 

Player.prototype = {
   play : function() {
      // Do Something
   },
   pause : function() {
      // Do something
   }
}

因此，本质上，我希望属性在初始化播放器时预先链接到对象函数，并在将其链接到HTML元素时使其工作

谢谢！

---

马特·穆勒（Matt Mueller）

我认为这是一个更糟糕的方式。在播放器内设置两个以上的功能。一个函数将向玩家操作注册UI元素，另一个函数将取消注册该操作。因此，您可以依靠jQuery.live和jQuery.die，而不是保持一个显式的按钮集合。例如：

function registerAction(selector, action) {
    // you could have some logic to map the passed in action
    // to the actual function name
    $(selector).live('click', action/functionName);
}
function unRegisterAction(selector, [action]) {
    // you could have some logic to map the passed in action
    // to the actual function name
    $(selector).die('click', [action/functionName]);
}

然后，上面的main.js示例将变成：

var player = new Player(AudioObj); // Audio object links to Audio class (not shown)
player.registerAction('#play', play);
player.registerAction('#pause', pause); // Play and pause ID's link to HTML Document Element

Player = function(Audio) {
    this.Audio = Audio;        
}

您的播放器构造函数将成为：

var player = new Player(AudioObj); // Audio object links to Audio class (not shown)
player.registerAction('#play', play);
player.registerAction('#pause', pause); // Play and pause ID's link to HTML Document Element

Player = function(Audio) {
    this.Audio = Audio;        
}

---

或者类似的东西。

这不是一个完美的解决方案，但我发现它非常优雅：

Player.js

Player.prototype = {

 init: function() {
  var Player = this;

  // Attach buttons to respected functions
  for(var button in this.buttons) {
   if(typeof Player[button] === "function")
    $(this.buttons[button]).bind('click', {Player : this}, Player[button]);
  }
 },

 play: function(e){
  var Player = e.data.Player;
  var Audio = Player.Audio;

  Audio.play();
 },

 pause: function(e){
  var Player = e.data.Player;
  var Audio = Player.Audio;

  Audio.pause();  
 }
}

 var audio = new AudioCore("UpToYou.mp3");
 var player = new Player(audio);
  player.buttons.play = $('#play');
  player.buttons.pause = $('#pause');
 player.init();

Main.js

Player.prototype = {

 init: function() {
  var Player = this;

  // Attach buttons to respected functions
  for(var button in this.buttons) {
   if(typeof Player[button] === "function")
    $(this.buttons[button]).bind('click', {Player : this}, Player[button]);
  }
 },

 play: function(e){
  var Player = e.data.Player;
  var Audio = Player.Audio;

  Audio.play();
 },

 pause: function(e){
  var Player = e.data.Player;
  var Audio = Player.Audio;

  Audio.pause();  
 }
}

 var audio = new AudioCore("UpToYou.mp3");
 var player = new Player(audio);
  player.buttons.play = $('#play');
  player.buttons.pause = $('#pause');
 player.init();

---

这提供了一种很好的方法，可以将按钮链接到函数，而无需传入大量数组或提供大量选项。我很高兴有一个不需要您调用init（）的解决方案。

谢谢您的回复！这正是我想做的。我只想通过在方法中设置相等的函数来注册操作。我认为这比注册所有东西都要干净。函数和变量名之间存在耦合（因此buttons.play将与方法的play耦合），但我认为这是非常容易管理的。