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