YouTube API 的 JavaScript 全局函数和评估使用

Question

我正在尝试使用 YouTube API 来控制多个 you-tube 视频。我正在关注 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

您可以将其封装在单个对象中，并使用柯里化(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文章，播放多个视频并分别处理每个视频的事件，同时保持全局状态最小化，您可能会发现这很有用。