在JavaScript中調用多個函數而不覆蓋原始 - 多態性問題？

Question

我使用要求onyoutubeplayerready函數的兩個不同的插件：

http://code.google.com/p/jquery-tubular/ 
http://badsyntax.github.com/jquery-youtube-player/examples/player.html 

他們兩個聲明並初始化onyoutubeplayerready功能。因此，其中一個插件最終無法工作。

我有這三頭標籤：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
<script type="text/javascript" src="js/jquery.youtube.player.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script> 

腳本的兩個結束標記之前正確的定義：

<script type="text/javascript"> 
//<![CDATA[ 

(function($){ 
    var config = { 

     repeatPlaylist: 1, 

     // Custom playlist 
     playlist: { 
      title: 'Random videos', 
      videos: [ 
       { id: 'CJCTiC1po8E', title: 'VCore Intro'}, 
       { id: 'ydCF922o944', title: 'VCore Admin' }, 
       { id: 'yC-_eqPqaoY', title: 'VCore Admin System' }, 
       { id: '7qkE30S2Btk', title: 'VCore Site' } 
      ] 
     } 

     /* 
     // Youtube playlist 
     playlist: { 
      playlist: '71B8152559FA2805' 
     } 

     // Latest user videos 
     playlist: { 
      user: 'TheSensless' 
     } 
     */ 
    }; 

    $('.youtube-player').player(config) 

})(this.jQuery); 
//]]> 
</script> 
<script type="text/javascript"> 
(function($){ 
function initializeTub(){ 
    $('body').tubular('_VKW_M_uVjw','wrapper'); 

} 
$('a').click(function(){initializeTub()}); //clicking a random link just to test it 
})(jQuery) 
</script> 

@epascarello

我想你的解決方案。附帶第一所述一種具有這樣的：

  window.onYouTubePlayerReady = function(id){ 
       console.log('2'); 


       var player = document.getElementById(id); 

       player.addEventListener("onStateChange", 'onytplayerStateChange' + id); 

       player.addEventListener('onError', 'onytplayerStateChange' + id); 

       window['onytplayerStateChange' + id](9); 
      }; 

附帶第二所述一種具有這樣的：

var _onYouTubePlayerReady = onYouTubePlayerReady; 
function onYouTubePlayerReady(playerId) { 
console.log('1'); 
ytplayer = document.getElementById("myytplayer"); 
ytplayer.setPlaybackQuality('medium'); 
ytplayer.mute(); 

_onYouTubePlayerReady(playerId); 

}

控制檯輸出該：

2 
2 

因此，首先被宣佈的一次被稱爲兩次。而第二個從未被調用，因爲控制檯從不輸出1

但根據書中的JavaScript程序員參考：

In fact, if you attempt to overload a function, the most recent definition will be used. This is because of the mutable nature of objects such as functions. 

所以，如果是這樣的話：

<script type="text/javascript" src="js/jquery.youtube.player.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script> 

由於一個功能爲什麼不是在函數最終被調用時指向的那個？注意管狀腳本排在第二位。

此外，弗雷德的解決方案也沒有工作。

我想這和它沒有工作，要麼：

var _onYouTubePlayerReady = onYouTubePlayerReady; 
function _onYouTubePlayerReady(playerId) { 
console.log('1'); 
ytplayer = document.getElementById("myytplayer"); 
    ytplayer.setPlaybackQuality('medium'); 
    ytplayer.mute(); 

} 
_onYouTubePlayerReady(playerId); 

順便說一句，我沒有在這個被稱爲線索，顯然是神奇地調用谷歌在某些時候，但肯定不是在任何插件附帶的腳本。

感謝您的回覆。

Answer 1

做到這一點的一種方法是用jQuery的.trigger()函數（我不知道純JS方式來做這件事）觸發一個自定義事件。然後你就可以更改您的代碼如下：
Youtube.player.js：

window.onMyCustomEventOne = function(id){ 
    var player = document.getElementById(id); 
    player.addEventListener("onStateChange", 'onytplayerStateChange' + id); 
    player.addEventListener('onError', 'onytplayerStateChange' + id); 

      window['onytplayerStateChange' + id](9); 
     }; 
    } 

Tubular：

​​

和jQuery中：

window.onYouTubePlayerReady = function(vars){ 
    $('window').trigger('myCustomEventOne',vars).trigger('myCustomEventTwo',vars); 
}; 

希望這有助於！

Answer 2

你可以改變來第二次這樣的事情

var _onYouTubePlayerReady = onYouTubePlayerReady; 
function onYouTubePlayerReady(playerId) { 
    //whatever code needs to be here 
    _onYouTubePlayerReady(playerId); 
}