javascript - 在javascript中调用多个函数而不覆盖原来的多态问题？

Question

我正在使用两个不同的插件，需要 onyoutubeplayerready 功能:

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

它们都声明并初始化 onyoutubeplayerready 函数。因此，其中一个插件最终无法工作。

我的 head 标签中有这三个:

<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 Programmer's Reference 一书:

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>

既然在 tuberparity 中定义的函数排在第二位，为什么它不是最终调用该函数时所指向的函数呢？请注意，管状脚本排在第二位。

此外，Fred 的解决方案也不起作用。

我尝试了这个，但它也不起作用:

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

}
_onYouTubePlayerReady( playerId );

顺便说一句，我不知道什么时候调用它，显然在某个时候神奇地调用了 google，但绝对不是在插件附带的任何脚本中。

感谢您的回复。

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

管状:

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

在 jQuery 中:

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

希望这有帮助!