IIFE 功能在我导出后不起作用

Question

我遇到了一些小问题需要帮助吗？我在一个模块中有这个 IIFE，我导出函数并将其导入到主 app.js 中。由于该函数是一个 IIFE，我预计它会调用自身，但似乎并非如此。模块内容：

const playerModal = (function () {

    let modal = document.querySelector('.modal');
    let startBtn = document.querySelector('#startBtn');

    window.onload = function () {
        modal.style.display = 'block';
    };

    startBtn.onclick = function () {
        modal.style.display = 'none';
    };

    window.onclick = function (e) {
        if (e.target == modal) {
            modal.style.display = 'none';
        }
    };
})()

export {playerModal}

app.js内容：

import { playerModal } from "./DOM/layout/playerInput";

它说：playerModal 已声明，但它的值从未被读取

Answer 1

有两个不同的问题：

显然，在 import 之后，您再也不会使用 playerModal。
没有必要导出调用 IIFE 的结果，因为它 return 什么都没有；你的 const playerModal 将是 undefined.

我怀疑您正在尝试做的是仅为其 side-effects 导入一个模块。如果是这样，你会这样做：

模块：

// No need for a function wrapper, modules run in their own scope
let modal = document.querySelector('.modal');
let startBtn = document.querySelector('#startBtn');

window.onload = function () {
    modal.style.display = 'block';
};

startBtn.onclick = function () {
    modal.style.display = 'none';
};

window.onclick = function (e) {
    if (e.target == modal) {
        modal.style.display = 'none';
    }
};

export {}; // You may or may not need this empty export, depending on your environment

app.js:

import "./DOM/layout/playerInput";

这只是说“导入模块”，而没有从中导入任何东西，这就是纯粹为 side-effects.

加载模块的方式

也就是说，经常拥有一个纯粹为 side-effects 加载的模块并不是最佳做法。您可能改为让它导出一个函数，您可以使用 modal 和 startBtn 的选择器字符串调用该函数来设置处理程序（以及 returns 一个函数来删除它们）。

模块：

export function setupPlayerModal(modalSelector, buttonSelector) {
    let modal = document.querySelector(modalSelector);
    let startBtn = document.querySelector(buttonSelector);

    const windowLoad = () => {
        modal.style.display = 'block';
    };
    const buttonClick = () => {
        modal.style.display = 'none';
    };
    const windowClick = (e) => {
        if (e.target == modal) {
            modal.style.display = 'none';
        }
    };

    window.addEventListener("load", windowLoad);
    startBtn.addEventListener("click", buttonClick);
    window.addEventListener("click", windowClick);

    return () => {
        window.removeEventListener("load", windowLoad);
        startBtn.removeEventListener("click", buttonClick);
        window.removeEventListener("click", windowClick);
    };
}

app.js:

import { setupPlayerModal } from "./DOM/layout/playerInput";

const cleanupPlayerModal = setupPlayerModal('.modal', '#startBtn');
// ...and then call `cleanupPlayerModal` if/when appropriate...

或者如果真的没有必要删除那些处理程序：

import { setupPlayerModal } from "./DOM/layout/playerInput";

setupPlayerModal('.modal', '#startBtn');

IIFE 功能在我导出后不起作用

IIFE function not working after i export it

javascript

iife