理解JavaScript模块的执行机制
当使用ES模块（ECMAScript Modules）语法，例如 import { function2 } from './blah.js' 导入一个模块时，许多开发者可能误以为只有 function2 相关的代码会被解析和加载。然而，JavaScript模块的工作方式是，当一个模块首次被导入时，其所有顶层代码都会被完整地执行一次。这意味着，即使你只希望使用模块中的一个特定函数，模块内任何位于函数外部的语句（如 console.log、变量声明或函数调用）都会被执行。
考虑以下场景：一个名为 blah.js 的文件包含一个在页面加载时自动运行的 function1()，以及一个可供其他页面使用的 function2()。当 page2.html 尝试通过 import { function2 } from './blah.js' 导入 function2 时，function1() 也会被执行，这显然不是我们期望的行为。无论是使用 import 语句还是传统的 方式，只要模块文件被加载，其顶层代码便会执行。
核心策略：避免模块顶层副作用
解决此问题的关键在于避免在模块的顶层（全局作用域）编写具有副作用的代码。所谓副作用，是指会改变外部环境状态的操作，例如修改DOM、发送网络请求、打印日志到控制台等。
如果一个操作具有副作用，并且你希望它只在特定条件下或被明确调用时才执行，那么就应该将其封装在一个函数中，并将该函数导出。这样，导入模块时，只有函数本身的定义被加载，而函数内部的代码只有在被显式调用时才会运行。
立即学习“Java免费学习笔记（深入）”；
实践示例：重构模块以消除顶层副作用
让我们以上述 blah.js 为例，将其重构以遵循这一最佳实践。
原始模块结构（可能存在问题）：
// blah.js
// 假设这里有一些代码会在页面加载时自动运行，例如：
(function() {
const fnToRun = () => {
console.log('function1() running automatically on page load.');
// 实际的 function1 逻辑
};
if (document.readyState === 'complete') {
fnToRun();
} else {
window.addEventListener('DOMContentLoaded', fnToRun);
}
})();
export const function2 = () => {
console.log('function2() is called.');
// 实际的 function2 逻辑
};在这个例子中，function1() 的自动运行逻辑被放在了顶层。当其他页面导入 function2 时，这段自动运行的逻辑也会被触发。
重构后的模块结构（推荐）：
为了解决这个问题，我们将 function1 的自动运行逻辑也封装成一个可导出的函数。
// blah.js
/**
* 在页面加载完成后执行的函数。
* 封装了原先自动运行的逻辑。
*/
export const runFunction1WhenPageLoads = () => {
const fnToRun = () => {
console.log('runFunction1WhenPageLoads() executed.');
// 这里是 function1 的实际逻辑
// 例如：初始化UI、发送初始数据请求等
};
// 确保在DOM加载完成后执行
if (document.readyState === 'complete') {
fnToRun();
} else {
window.addEventListener('DOMContentLoaded', fnToRun);
}
};
/**
* 供其他页面使用的通用函数。
*/
export const function2 = () => {
console.log('function2() is called.');
// 这里是 function2 的实际逻辑
// 例如：处理用户交互、执行特定计算等
};
// 模块顶层不再有任何副作用代码通过这种方式，blah.js 的顶层只包含函数定义，没有立即执行的副作用代码。
如何在不同页面中使用重构后的模块
在 page1.html 中使用 runFunction1WhenPageLoads：
page1.html 可能需要 function1 的行为，即在页面加载时自动运行。
Page 1
Page 1 Content
在 page2.html 中仅使用 function2：
page2.html 只需要 function2，并且不希望 runFunction1WhenPageLoads 自动执行。
Page 2
Page 2 Content
注意事项与最佳实践
- 明确区分： 清楚地知道哪些代码是纯粹的计算逻辑（无副作用），哪些是具有副作用的（如DOM操作、网络请求）。
- 封装副作用： 将所有具有副作用的代码封装到函数中，并仅在需要时调用这些函数。
- 命名约定： 对于封装了副作用的函数，可以考虑使用清晰的命名，例如 initSomething()、setupPage()、runOnLoad() 等，以表明其作用。
- 模块的纯粹性： 尽量保持模块顶层的“纯粹性”，使其只包含声明和导出，而不包含执行逻辑。这有助于提高模块的可测试性和可复用性。
- 按需加载： 这种模式也为未来的代码分割和按需加载提供了更好的基础，因为你只加载和执行真正需要的代码。
总结
JavaScript模块的顶层代码在首次导入时总是会被执行。为了避免不必要的副作用和提高模块的灵活性，最佳实践是将所有具有副作用的代码封装在导出的函数中。这样，消费者可以按需导入并调用这些函数，从而实现更精细的控制和更清晰的代码结构。遵循这一原则，将有助于构建更健壮、更易于维护和复用的模块化JavaScript应用。
