javascript - 如何在不复制粘贴相同代码的情况下简化单击相同的类？

Question

我有 2 个单击事件监听器，一个用于切换，第二个用于删除类。现在，我不想一遍又一遍地重复我的代码，而是希望采用干净、干燥的方法来实现同一目标。

正如你所看到的，我有一些类(class)，但唯一的实际区别是切换和删除。有没有更干净的方法来做这样的事情？

我的JS:

    const onNavOpen = e => {
        e.preventDefault();
        body.classList.toggle('nav-body-is-open');
        body.classList.toggle('bg-overlay');
        navigationHamburger.classList.toggle('active');
        navigationMenu.classList.toggle('nav--open');
    };

    const onNavClose = e => {
        e.preventDefault();
        if (
            body.classList.contains('nav-body-is-open') &&
            e.keyCode === 27
        ) {
            body.classList.remove('nav-body-is-open');
            body.classList.remove('bg-overlay');
            navigationHamburger.classList.remove('active');
            navigationMenu.classList.remove('nav--open');
        }
    };

Answer 1

创建一个函数对象，根据条件指向remove或toggle函数。

如下所示。 (注意 - 我尚未测试代码)

const resolvedFunction = body.classList.contains('nav-body-is-open') && e.keyCode === 27 ? body.classList.remove : body.classList.toggle;

resolvedFunction('nav-body-is-open');
resolvedFunction('bg-overlay');
resolvedFunction('active');
resolvedFunction('nav--open');