Динамически автоматическая привязка переменных экземпляра к объектным функциям в javascript / jquery?

Question

Я пытаюсь создать надежный аудиоплеер в 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.js:

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.

Спасибо! Мэтт Мюллер

Answer 1

Это не идеальное решение, но я считаю его довольно элегантным:

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

Main.js

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

Это обеспечивает хороший способ связать кнопки с функцией, не передавая огромный массив или предоставляя кучу опций. Я был бы ОЧЕНЬ рад иметь решение, которое НЕ требовало бы от вас вызова init ().

Answer 2

Я думаю, что это был бы более ОО путь. Настройте еще две функции внутри проигрывателя. Одна функция регистрирует элемент пользовательского интерфейса для действия Player, а другая - для отмены регистрации действия. Поэтому вместо того, чтобы сохранять явную коллекцию кнопок, вы можете просто опираться на 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 станет:

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

Или что-то в этом роде.