appelant plusieurs fonctions en javascript sans écraser le problème d'origine - polymorphisme?

Question

J'utilise deux plugins différents nécessitant la fonction onyoutubeplayerready:

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

Les deux déclarer et initialiser la fonction onyoutubeplayerready. Par conséquent, l'un des plugins finit par ne pas fonctionner.

J'ai ces trois dans la balise de tête:

<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> 

Les deux scripts sont bien définis avant la balise body fin

<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

J'ai essayé votre solution. Celui qui vient en premier a ceci:

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

Celui qui arrive en deuxième position a ceci:

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

_onYouTubePlayerReady(playerId); 

}

Les sorties de la console ceci:

2 
2 

Par conséquent, la celui qui est déclaré premier est appelé les deux fois. Et le second n'est appelé parce que la console génère jamais 1.

Mais selon le livre de référence de JavaScript programmeur:

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. 

Donc, si tel est le cas:

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

Depuis une fonction défini dans tubulaire vient en second lieu, pourquoi n'est-ce pas celui qui est pointé lorsque la fonction est finalement appelée? Notez que le script tubulaire vient en second. En outre, la solution de Fred ne fonctionnait pas non plus.

J'ai essayé et cela n'a pas fonctionné non plus:

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

} 
_onYouTubePlayerReady(playerId); 

D'ailleurs, je n'ai aucune idée quand on l'appelle, semble-t-magiquement un appel à Google à un moment donné, mais certainement pas dans tous les des scripts fournis avec le plugin.

Merci pour la réponse.

Answer 1

Une façon de procéder consiste à déclencher un événement personnalisé avec la fonction .trigger() de jQuery (je ne connais pas la méthode JS pure pour ce faire).Ensuite, vous pouvez changer votre code à ce qui suit:
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:

function onMyCustomEventTwo(playerId) { 
    ytplayer = document.getElementById("myytplayer"); 
    ytplayer.setPlaybackQuality('medium'); 
    ytplayer.mute(); 
} 

et jQuery:

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

Hope this helps!

Answer 2

Vous pouvez changer celui qui arrive en deuxième position à quelque chose comme ça

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