Question

我正在使用YouTube iframe api加载视频，然后我可以对其执行操作。

我使用browserify创建模块化行为，并使用JS模块模式来破坏我的代码。

当我使用在其回调中创建createYT实例的YouTubeIframeLoader启动YT.Player函数时。

我想将YT.Player分配给我可以在我的模块的其他功能中访问的变量。这是我到目前为止

const videos = {
   init: function() {
      this.loadYT();
      this.changeVid();
   },
   loadYT: function() {
      YouTubeIframeLoader.load(function(YT) {
        var player = new YT.Player('video-placeholder', {
          height: '390',
          width: '640',
          videoId: 'fObfRDB0JQw'
        });
      });
   },
   changeVid: function() {
       // access player var to perform methods on YT.Player instance
   }
};

export default videos;

Answer 1

我想将YT.Player分配给我可以在我的模块的其他功能中访问的变量。

解决方法非常简单：在模块的最外层范围内声明一个变量，并在loadYT内为其赋值。例如：

// Declare `player` here instead
let player;

const videos = {
   //...
   loadYT: function() {
      YouTubeIframeLoader.load(function(YT) {
        // Assign value to `player`
        player = new YT.Player('video-placeholder', {
          height: '390',
          width: '640',
          videoId: 'fObfRDB0JQw'
        });
      });
   },
   changeVid: function() {
       if (player) {
           // Use `player` here...
       }
       else {
           // Handle `player` not initialised... or throw an Error
           throw new Error('player not initialised');
       }
   }
};

export default videos;

正如@RGraham在评论中提到的那样，您可能希望更改init的行为，使其返回Promise，该http://docs.fineuploader.com/branch/master/features/delete.html会在调用YouTubeIframeLoader.load的回调时解析。通过这种方式，您可以确保在changeVid回调中使用剩余的API（例如then）时完成初始化。

let resolve, reject, promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
});    

let initialised = false;
let player;

const videos = {
   init: function() {
       if (!initialised) this.loadYT();
       return promise;
   },
   loadYT: function() {
      YouTubeIframeLoader.load(function(YT) {
        // Assign value to `player`
        player = new YT.Player('video-placeholder', {
          height: '390',
          width: '640',
          videoId: 'fObfRDB0JQw'
        });
        initialised = true;
        resolve();
      });
      return promise;
   },
   changeVid: function() {
       if (player) {
           // Use `player` here...
       }
       else {
           // Handle `player` not initialised... or throw an Error
           throw new Error('player not initialised');
       }
   }
};

export default videos;

使用示例：

videos.init().then(() => {
    videos.changeVid();
});

使用JS模块模式在回调函数中设置变量

1 个答案: