javascript - 解决 ESLint 错误 "no-unused-vars"

Question

错误

由于以下 eslint 错误，模块构建失败:

Error 1: 'player' is assigned a value but never used no-unused-vars

Error 2: 'YT' is not defined no-undef

Error 3: 'onYouTubeIframeAPIReady' is defined but never used no-unused-vars

代码

function videoInit() {
    // Initialise video
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Initialise the player
    var player;

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.ENDED) {
            event.target.playVideo();
        }
    }
    
    function onYouTubeIframeAPIReady() { 
        player = new YT.Player('player', {
            height: '100%',
            width: '100%',
            videoId: 'ScMzIvxBSi4',
            playerVars : {
                'mute' : 1,
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
            },
        });
    }
}

目标

解决no-unused-vars和no-undef错误。

函数调用不存在于本地文件中，而是来自 YouTube API，如 documentation :

onYouTubeIframeAPIReady – The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.

可以通过使用忽略错误no-unused-vars /* eslint-disable no-unused-vars */，但我相信有更好的方法来解决这些问题。

非常感谢任何建议。

Answer 1

此函数应可作为全局变量(= window 对象的属性)。就目前情况而言，它只是一个本地的，可以在 videoInit() 中使用 - 但不能从外部调用。所以 ESLint 在这一点上实际上是正确的。

使用类似于...的东西

window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

对于player，如果您打算使用new YT.Player()调用的返回值(播放器实例)，则只需要此变量。在这种特殊情况下，您不会使用它，因此会出现警告。考虑将 videoInit 转换为返回 Promise 的函数(通过 player 值解析)。