4.4 IIFE 与现代模块模式

4.4 IIFE 与现代模块模式

IIFE（Immediately Invoked Function Expression，立即执行函数表达式）是 JavaScript 中一种常见的模式，用于创建一个独立的作用域，避免变量污染全局命名空间。结合 IIFE，可以实现模块化编程，这是现代 JavaScript 模块化开发的基础。本节将详细介绍 IIFE 的用法及其在现代模块模式中的应用。

4.4.1 IIFE 的基本概念

IIFE 是一个定义后立即执行的函数表达式，通常用于创建一个独立的作用域。

1. 语法

(function () {
  // 函数体
})();

2. 特点

• 函数表达式被包裹在括号 () 中，表示这是一个表达式而不是声明。
• 最后的 () 表示立即调用该函数。

3. 示例

(function () {
  let message = "Hello, IIFE!";
  console.log(message); // 输出 "Hello, IIFE!"
})();

4.4.2 IIFE 的作用

1. 创建独立作用域
IIFE 可以创建一个独立的作用域，避免变量污染全局命名空间：

(function () {
  let localVar = "I am local";
  console.log(localVar); // 输出 "I am local"
})();
console.log(localVar); // 报错：ReferenceError

2. 避免命名冲突
IIFE 可以隔离变量，避免与其他脚本中的变量冲突：

(function () {
  let count = 0;
  console.log(count); // 输出 0
})();

(function () {
  let count = 10;
  console.log(count); // 输出 10
})();

3. 初始化代码
IIFE 可以用于初始化代码，确保代码在定义后立即执行：

(function () {
  console.log("Initialization complete!");
})();

4.4.3 现代模块模式

现代模块模式是基于 IIFE 的一种模块化编程方式，通过返回一个对象或函数，将模块的公共接口暴露给外部。

1. 基本结构

const MyModule = (function () {
  // 私有变量和函数
  let privateVar = "I am private";

  function privateFunction() {
    console.log(privateVar);
  }

  // 公共接口
  return {
    publicMethod: function () {
      privateFunction();
    },
  };
})();

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

2. 特点

• 私有性：模块内部的变量和函数是私有的，外部无法直接访问。
• 公共接口：通过返回对象或函数，暴露模块的公共接口。

3. 示例

const Counter = (function () {
  let count = 0;

  return {
    increment: function () {
      count++;
      console.log(count);
    },
    reset: function () {
      count = 0;
      console.log("Counter reset!");
    },
  };
})();

Counter.increment(); // 输出 1
Counter.increment(); // 输出 2
Counter.reset(); // 输出 "Counter reset!"

4.4.4 IIFE 与现代模块模式的应用场景

1. 避免全局污染
IIFE 可以隔离变量，避免污染全局命名空间。

2. 模块化开发
现代模块模式可以将代码组织成独立的模块，提高代码的可维护性和复用性。

3. 封装私有逻辑
通过 IIFE 和模块模式，可以封装私有变量和函数，只暴露必要的公共接口。

4.4.5 示例代码

示例 1：IIFE

(function () {
  let message = "This is an IIFE!";
  console.log(message); // 输出 "This is an IIFE!"
})();

示例 2：现代模块模式

const Calculator = (function () {
  let result = 0;

  function add(x) {
    result += x;
  }

  function subtract(x) {
    result -= x;
  }

  function getResult() {
    return result;
  }

  return {
    add,
    subtract,
    getResult,
  };
})();

Calculator.add(10);
Calculator.subtract(5);
console.log(Calculator.getResult()); // 输出 5

4.4.6 总结

• IIFE：立即执行函数表达式，用于创建独立作用域，避免变量污染。
• 现代模块模式：基于 IIFE 的模块化编程方式，封装私有逻辑，暴露公共接口。
• 应用场景：避免全局污染、模块化开发、封装私有逻辑。

通过掌握 IIFE 和现代模块模式，你可以编写更模块化、更易维护的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. IIFE 的主要作用是什么？如何定义 IIFE？
2. 现代模块模式如何实现私有变量和公共接口？
3. 在现代开发中，IIFE 和模块模式是否仍然常用？为什么？