如何在 JavaScript 中实现模块模式？请结合 IIFE 和 ES6 模块进行解释。

推荐答案

使用 IIFE 实现模块模式

// www.javascriptcn.com code example
const MyModule = (function() {
    // 私有变量和函数
    let privateVariable = 'I am private';

    function privateMethod() {
        console.log(privateVariable);
    }

    // 返回公共接口
    return {
        publicMethod: function() {
            privateMethod();
        }
    };
})();

MyModule.publicMethod(); // 输出: I am private

使用 ES6 模块实现模块模式

// www.javascriptcn.com code example
// myModule.js
let privateVariable = 'I am private';

function privateMethod() {
    console.log(privateVariable);
}

export const publicMethod = function() {
    privateMethod();
};

// main.js
import { publicMethod } from './myModule.js';

publicMethod(); // 输出: I am private

本题详细解读

IIFE 实现模块模式

IIFE（立即调用函数表达式）是 JavaScript 中实现模块模式的一种常见方式。通过 IIFE，可以创建一个独立的作用域，避免变量污染全局命名空间。在 IIFE 中，可以定义私有变量和函数，并通过返回一个对象来暴露公共接口。这种方式在 ES6 之前非常流行。

ES6 模块实现模块模式

ES6 引入了模块系统，通过 export 和 import 关键字，可以更简洁地实现模块模式。ES6 模块具有以下优点：

1. 显式导出和导入：通过 export 和 import 关键字，可以清晰地定义模块的公共接口。
2. 静态分析：ES6 模块支持静态分析，使得工具（如打包工具）能够更好地优化代码。
3. 异步加载：ES6 模块支持异步加载，适用于现代 Web 应用。

对比

• IIFE：适用于不支持 ES6 模块的环境，如旧版浏览器。
• ES6 模块：现代 JavaScript 开发的首选，具有更好的可维护性和工具支持。