JavaScript内核与高级编程之：`JavaScript`的`IIFE`：其在模块化和作用域隔离中的设计模式。

各位观众老爷，大家好！今天咱们就来聊聊JavaScript里一个老朋友，但又经常被误解的家伙：IIFE (Immediately Invoked Function Expression)。别看名字挺唬人，其实它就是个“立即执行函数表达式”，专门用来在模块化和作用域隔离中搞事情的。

开场白：别让你的变量裸奔！

想象一下，你写了一堆JavaScript代码，然后直接丢到HTML里。如果你的变量名太常见，比如i, temp, result，很有可能就和别人的代码冲突了。到时候，你的代码可能莫名其妙地报错，或者更可怕，悄悄地改变了别人的代码行为，这可就尴尬了。

IIFE就像一个“代码隔离舱”，把你写的代码包起来，防止它污染全局作用域，也防止别人污染你的代码。

IIFE的庐山真面目：语法解析

先来看看IIFE的基本结构：

(function() {
  // 你的代码
})();

是不是有点像套娃？别慌，咱们一步步来解析：

1. 函数表达式: function() { ... } 这部分是一个匿名函数表达式。注意，它是一个表达式，而不是一个函数声明。表达式和声明的区别在于，表达式会产生一个值，而声明只是声明一个东西。

2. 圆括号包裹: (function() { ... }) 这部分用圆括号把函数表达式包起来。这是关键！JavaScript引擎看到以 function 开头的代码，默认把它当作函数声明。但是，如果用圆括号包起来，引擎就知道这是一个函数表达式，而不是声明。

3. 立即执行: () 最后的这组圆括号，就是用来立即调用这个函数表达式的。就像你定义了一个函数，然后马上就 myFunction() 这样调用它一样。

所以，整个IIFE就是：定义一个匿名函数表达式，然后立即执行它。

IIFE的妙用：模块化和作用域隔离

1. 作用域隔离：防止变量污染

这是IIFE最核心的功能。在IIFE内部声明的变量，只能在IIFE内部访问，外部无法触及。

(function() {
  var mySecret = "This is a secret!";
  console.log(mySecret); // 可以访问
})();

console.log(mySecret); // 报错！mySecret is not defined

在这个例子中，mySecret 变量只存在于IIFE内部。外部试图访问它，就会报错。这就像给你的变量穿上了一件隐身衣，防止它们被全局作用域里的其他代码看到和修改。

2. 模块化：模拟模块

在ES6模块化出现之前，IIFE是实现模块化的主要手段。通过IIFE，我们可以创建私有变量和方法，然后通过return语句暴露一些公共接口。

var myModule = (function() {
  var privateVariable = "I'm private!";

  function privateMethod() {
    console.log("I'm a private method.");
  }

  return {
    publicMethod: function() {
      console.log("I'm a public method.");
      privateMethod(); // 可以在内部访问私有方法
      console.log(privateVariable); //也可以访问私有变量
    }
  };
})();

myModule.publicMethod(); // 输出：I'm a public method. I'm a private method. I'm private!
//myModule.privateMethod(); //报错，因为是私有方法
console.log(myModule.privateVariable); //输出 undefined 因为是私有变量

在这个例子中：

• privateVariable 和 privateMethod 是私有的，只能在IIFE内部访问。
• publicMethod 是公共的，可以通过 myModule.publicMethod() 访问。
• IIFE返回一个对象，这个对象包含了我们想要暴露的公共接口。

这种模式可以有效地组织代码，隐藏内部实现细节，只暴露必要的接口，提高代码的可维护性和可重用性。

IIFE的进化：带参数的IIFE

IIFE还可以接收参数，这使得我们可以更灵活地使用它。

(function($, window, document) {
  // 可以在这里使用 jQuery, window 和 document
  $(document).ready(function() {
    console.log("Document is ready!");
  });
})(jQuery, window, document);

在这个例子中，我们把 jQuery, window 和 document 作为参数传递给IIFE。这样做的好处是：

• 缩短变量名: 在IIFE内部，我们可以用 $ 代替 jQuery，简化代码。
• 解决冲突: 如果全局作用域中已经有了一个名为 $ 的变量，我们可以通过参数传递来避免冲突。
• 提高性能: 把全局变量作为参数传递给IIFE，可以减少在IIFE内部查找变量的时间，提高性能（虽然提升很小，但积少成多嘛）。

IIFE的变种：几种写法

IIFE有很多种写法，但它们本质上都是一样的。

• 最常见的写法:

  (function() {
    // 代码
  })();

• 另一种写法:

  (function() {
    // 代码
  }());

  这两种写法唯一的区别是，把调用圆括号 () 放在了IIFE的内部还是外部。它们的效果是一样的。

• 使用 ! , +, -, ~ 等运算符的写法:

  !function() {
    // 代码
  }();
  
  +function() {
    // 代码
  }();
  
  -function() {
    // 代码
  }();
  
  ~function() {
    // 代码
  }();

  这些写法利用了JavaScript的自动分号插入机制。当JavaScript引擎遇到以 function 开头的代码时，如果前面没有语句，它会认为这是一个函数声明，而不是函数表达式。但是，如果前面有 ! , +, -, ~ 等运算符，引擎就会知道这是一个函数表达式。

  这些写法虽然看起来很酷，但可读性较差，不建议在实际开发中使用。

• 箭头函数的IIFE：

  (() => {
      //代码
  })();

IIFE的实际应用场景

• 插件开发: 编写jQuery插件或者其他JavaScript库时，可以使用IIFE来隔离插件的代码，防止它与用户的代码冲突。

• 循环中的闭包问题: IIFE可以用来解决循环中的闭包问题。

  for (var i = 0; i < 5; i++) {
    (function(j) {
      setTimeout(function() {
        console.log(j);
      }, 1000);
    })(i);
  }
  //输出 0 1 2 3 4

  如果没有IIFE，那么循环结束后，i 的值会变成 5。当 setTimeout 中的函数执行时，它会访问到 i 的最终值，导致输出 5 5 5 5 5。

  通过IIFE，我们可以把每次循环的 i 的值作为参数传递给IIFE，然后在IIFE内部创建一个新的作用域，把 i 的值保存在这个作用域中。这样，setTimeout 中的函数就可以访问到正确的 i 的值了。

• 配置初始化: 在应用程序启动时，可以使用IIFE来执行一些初始化操作，例如读取配置文件、连接数据库等。

IIFE的替代方案：ES6模块化

随着ES6模块化的普及，IIFE在模块化方面的作用逐渐减弱。ES6模块化提供了更强大、更简洁的模块化方案。

ES6模块使用 import 和 export 关键字来导入和导出模块。

// moduleA.js
var privateVariable = "I'm private in module A!";

export function publicMethod() {
  console.log("I'm a public method in module A.");
  console.log(privateVariable);
}

// moduleB.js
import { publicMethod } from './moduleA.js';

publicMethod(); // 输出：I'm a public method in module A. I'm private in module A!
//console.log(privateVariable); // 会报错，因为privateVariable没有被导出

ES6模块的优点：

• 语法更简洁: import 和 export 关键字比IIFE更易于理解和使用。
• 静态分析: ES6模块可以在编译时进行静态分析，提高代码的可靠性和性能。
• 循环依赖: ES6模块可以更好地处理循环依赖问题。

虽然ES6模块化是更好的选择，但IIFE仍然有其存在的价值。例如，在一些不支持ES6模块化的老项目中，或者在需要更细粒度的作用域控制的场景下，IIFE仍然可以发挥作用。

IIFE的注意事项

• 可读性: 虽然IIFE有很多种写法，但为了提高代码的可读性，建议使用最常见的写法： (function() { ... })();。
• 性能: IIFE的性能开销很小，可以忽略不计。
• 调试: 调试IIFE中的代码可能会比较麻烦，因为IIFE内部的变量和函数都是私有的。可以使用浏览器的开发者工具来调试IIFE中的代码。

总结

IIFE是一个强大而灵活的工具，可以用来隔离作用域、模拟模块、解决闭包问题等。虽然ES6模块化是更好的模块化方案，但IIFE仍然有其存在的价值。希望通过今天的讲解，大家对IIFE有了更深入的理解。

实战演练：

咱们来搞个小例子，用IIFE做一个简单的计数器：

var counter = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getValue: function() {
      return count;
    }
  };
})();

console.log(counter.increment()); // 输出：1
console.log(counter.increment()); // 输出：2
console.log(counter.decrement()); // 输出：1
console.log(counter.getValue());   // 输出：1

在这个例子中，count 变量是私有的，只能通过 increment, decrement 和 getValue 方法来访问和修改。这保证了计数器的状态不会被外部代码随意修改。

再来一个例子，防止循环闭包问题：

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
  (function(index) {
    buttons[index].addEventListener('click', function() {
      alert('This is button #' + index);
    });
  })(i);
}

在这个例子中，我们给每个按钮添加一个点击事件监听器。如果没有IIFE，那么当点击按钮时，alert 中显示的 index 值总是最后一个按钮的索引。通过IIFE，我们可以把每次循环的 i 的值作为参数传递给IIFE，然后在IIFE内部创建一个新的作用域，把 i 的值保存在这个作用域中。这样，当点击按钮时，alert 中就可以显示正确的按钮索引了。

总结表

特性	IIFE	ES6 模块化
语法	(function() { ... })();	import 和 export 关键字
作用域隔离	通过函数作用域实现	通过模块作用域实现
模块化	通过返回对象暴露公共接口	通过 export 关键字导出公共接口
静态分析	不支持	支持，可以在编译时进行静态分析
循环依赖	处理起来比较麻烦	可以更好地处理循环依赖问题
兼容性	兼容所有浏览器	需要浏览器支持 ES6 模块化，或者使用构建工具（例如 webpack）进行转换
使用场景	老项目、需要细粒度作用域控制的场景、插件开发、解决循环闭包问题等	新项目、模块化开发、需要静态分析的场景

结束语

好了，今天的IIFE讲座就到这里。希望大家以后在写JavaScript代码的时候，能够合理地运用IIFE，让你的代码更健壮、更易于维护。记住，保护好你的变量，别让它们裸奔！ 咱们下期再见！