在函数内部定义监听器函数

Question

当我在函数外部定义函数时，我不能访问glide参数：

export const setFocusListenersForKeyboardNavigation = (glide) => {
    const slides = glide._c.Html.slides;
    for (let i = 0; i < slides.length; i++) {
        const currentSlide = slides[i];
        const slideButton = currentSlide.querySelector(".js-slide-button");
        const slideLink = currentSlide.querySelector(".js-slide-link");
        slideButton && slideButton.addEventListener('focus', focusListener);
        slideLink && slideLink.addEventListener('focus', focusListener);
    }
};

const focusListener = (event) => {
    const activeIndex = glide._i;
    const buttonIndex = event.target.dataset.slideIndex;
    if (activeIndex !== parseInt(buttonIndex)) {
        glide.go(`=${buttonIndex}`);
    }
};

因此，我做了这样的事情：

export const setFocusListenersForKeyboardNavigation = (glide) => {
    const focusListener = (event) => {
        const activeIndex = glide._i;
        const buttonIndex = event.target.dataset.slideIndex;
        if (activeIndex !== parseInt(buttonIndex)) {
            glide.go(`=${buttonIndex}`);
        }
    };

    const slides = glide._c.Html.slides;
    for (let i = 0; i < slides.length; i++) {
        const currentSlide = slides[i];
        const slideButton = currentSlide.querySelector(".js-slide-button");
        const slideLink = currentSlide.querySelector(".js-slide-link");
        slideButton && slideButton.addEventListener('focus', focusListener);
        slideLink && slideLink.addEventListener('focus', focusListener);
    }
};

我想知道这是hack还是一种好的做法？有没有更方便的方法来做这件事。

Answer 1

有外面的功能更好。主要是为了可读性和测试，但如果你的函数被调用了很多次(例如几百次)，那么每次重新定义它都可能对性能造成影响。

您可以向侦听器添加箭头函数，该侦听器将使用正确的参数调用focusListener。你可以这样做：

​

export const setFocusListenersForKeyboardNavigation = (glide) => {
    const slides = glide._c.Html.slides;
    for (let i = 0; i < slides.length; i++) {
        const currentSlide = slides[i];
        const slideButton = currentSlide.querySelector(".js-slide-button");
        const slideLink = currentSlide.querySelector(".js-slide-link");
        slideButton && slideButton.addEventListener('focus', (event) => {focusListener(event, glide)});
        slideLink && slideLink.addEventListener('focus', (event) => {focusListener(event, glide));
    }
};

const focusListener = (event, glide) => {
    const activeIndex = glide._i;
    const buttonIndex = event.target.dataset.slideIndex;
    if (activeIndex !== parseInt(buttonIndex)) {
        glide.go(`=${buttonIndex}`);
    }
};

​