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

Question

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

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

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

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

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

Answer 1

您可以将其封装在单个对象中，并使用柯里化来隐藏多个全局函数。假设您有一个全局对象，并且上面有一个 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，并在下一次调用中接收状态更改参数。

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