Вызов нескольких функций в 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>

Оба сценария определены прямо перед конечным тегом body:

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

Поскольку одна функция, определенная в tubular, стоит на втором месте, почему она не указана, когда функция в конце концов вызывается? Обратите внимание, что трубчатый сценарий идет вторым.

Кроме того, решение Фреда тоже не сработало.

Я попробовал это, и это тоже не сработало:

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

}
_onYouTubePlayerReady( playerId );

Кстати, я понятия не имею, когда это вызывается, по-видимому волшебным вызовом Google в какой-то момент, но определенно не в любом из сценариев, которые идут с плагином.

Спасибо за ответ.

Answer 1

Вы можете изменить тот, который идет вторым на что-то вроде этого

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

Answer 2

Способ сделать это - запустить пользовательское событие с помощью 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:

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

и в jQuery:

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

Надеюсь это поможет!