IIFE函数在导出后不起作用

Question

我遇到一个小问题需要帮助吗？我在一个模块中有这个IIFE，我导出函数并将其导入到主应用程序.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

有两个独立的问题：

1. 显然，在import之后，您永远不会使用playerModal
2. 导出调用IIFE的结果是没有意义的，因为它不会返回任何内容；您的const playerModal将是undefined

我怀疑您试图导入的只是一个模块的副作用。如果是这样，你会这样做：

模块：

// 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";

这只是说"；导入模块；而不从中导入任何内容，这就是纯粹为了副作用而加载模块的方式。

也就是说，通常拥有一个纯粹为了副作用而加载的模块并不是最佳实践。相反，您可以让它导出一个函数，您可以使用modal和startBtn的选择器字符串来调用该函数，以设置处理程序(并返回一个函数来删除它们(。

模块：

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');