Question

我正在尝试使用YouTube API来控制多个有关视频的视频。我正在关注google code example。但问题是他们需要一个全局字符串来进行侦听回调。

ytplayer.addEventListener("onStateChange", "onPlayerStateChange");

其中ytplayer是包含flash视频播放器的“object”元素。按照他们的例子，似乎我需要为每个玩家创建一个新的全局函数 - onPlayerStateChange2等。他们不允许函数引用（匿名或其他）代替字符串，本地定义的字符串不要也工作。如何避免显式命名的全局函数？以下作品

var localStateChangeHandler = function (newState) {
  updateHTML("playerState", newState);
}
var globalStateChangeString = 'onPlayerStateChange'+ytplayer.id;
eval(globalStateChangeString + ' = localStateChangeHandler');
ytplayer.addEventListener("onStateChange", globalStateChangeString);

但它不是很漂亮，它仍在创建全局函数，并使用“eval”。还有更好的方法吗？

Answer 1

您可以将其封装在单个对象中，并使用currying来隐藏多个全局函数。假设你有一个全局对象，并且有一个dispatchEvent方法。

Player = {};

Player.dispatchEvent = function(id) {
    var player = document.getElementById(id);
    return function(newState) {
        console.log("player id %s changed state to %s", id, newState);
    };
};

然后在添加状态更改事件侦听器时，将对dispatchEvent的调用添加为具有正确id的字符串。

var call = 'Player.dispatchEvent("{id}")'.replace("{id}", somePlayerId);
ytplayer.addEventListener('onStateChange', call);

当字符串由Youtube评估时，它将返回对匿名函数的引用，该函数通过闭包保存玩家ID，并在下次调用时接收状态更改参数。

我写了一篇小小的课程YoutubePlayer，受到这篇blog文章的启发，可以播放多个视频并分别处理每个视频中的事件，同时保持全局状态最小化，您可能会发现这些视频很有用

用于YouTube API的JavaScript全局函数和eval使用

1 个答案: