javascript模块化编程-详解立即执行函数表达式IIFE

拼搏现实的明天。 2022-07-12 14:29 138阅读 0赞

转载自：http://www.jianshu.com/p/4dbf4a4c8ebb

## 一、IIFE解释 ##

> 全拼Imdiately Invoked Function Expression，立即执行的函数表达式。

像如下的代码所示，就是一个匿名立即执行函数:

(function(window, undefined){ // 代码... })(window);

## 二、括号的意义 ##

2.1 包住`function(){}`的括号的意义

这个括号的目的，是为了把`function(){}`转化为表达式。像一些库的源码，喜欢用如下方式代替:

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

或者这种方式：

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

其实，作用都一样，都是把`function(){}`转化成一个可执行的表达式，方便执行。  
 如果去掉该括号，则会报错。因为单纯的`function(){}`不是可执行的表达式，会直接报错。如下图：

![1240][]

2.1 第二个括号的意义

理解了第一个括号的意义，第二个括号就很简单了，就是执行表达式了。

## 三、参数的意义 ##

以这段代码为例子，讲解参数

var wall = {}; (function(window, WALL, undefined){ })(window, wall);

参数分为形参和实参。  
 `function(window, WALL, undefined)`三个参数为形参，第二个括号`(window, wall)`的两个参数为实参。  
 也即可以理解为 `window == window`，`wall == WALL`。

2.1 普通形参

普通形参是指由`window`和`wall`这样的实际变量传入指定，可以为任何类型的变量。一个形参就对应一个实参

2.2 特殊形参undefined

为什么形参要多写一个undefined，这是一个很有趣的话题。  
 可以知道这个示例，实参只有两个，而形参有三个。所以在函数执行的时候，形参`undefined`会默认赋值为undefined。

形参`undefined`的作用如下：

2.2.1 防止特殊值undefined被恶意代码篡改。  
 IE6等低版本浏览器，undefined是支持被修改的。而这个特殊值被修改后，像以下这种判断就失效了。

if(wall == undefined){ // 代码... }

所以，这里多加一个形参的目的就是为了防止这种情况发生。只要在这个IIFE作用域内，undefined就能够正常获取到。

2.2.2 压缩代码可以压缩undefined  
 因为undefined作为形参，像YUI compressor这种类型的代码压缩工具，可以将其相关的值进行压缩，减小文件的体积。

## 四、写法解析 ##

4.1 普通写法

先定义一个命名空间，然后再给这个命名空间加东西。这是最普遍的写法，也是最好理解的。  
 不足的地方就是必须先声明一个命名空间，然后才能执行相关的绑定代码。存在顺序加载的问题。

4.2 放大模式

放大模式的好处就是，可以不用考虑代码加载的先后顺序。  
 因为js允许`wall`变量进行重复var声明，所以这段代码是可以执行的。  
 我可以把IIFE函数拆分成多个文件进行加载，而不会出现普通写法需要注意的问题。

需要注意的点：  
 1.IIFE的头部，都要先进行检查命名空间是否已经实例化，如果还没实例化，则进行实例化。  
 2.IIFE的尾部，都要return命名空间的引用，使后续代码能够得到最新的`wall`命名空间内容。

4.3 宽放大模式

宽放大模式的重点注意的地方：就是在实参部分的`window.wall || (window.wall = {})`。  
 用||运算符进行取巧。  
 如果`window.wall`是已经实例化的，非not defined。则直接返回`window.wall`的引用，赋值给形参`WALL`。不会执行||运算符后面的内容。  
 如果`window.wall`还未实例化，则进行实例化。这里要注意的点是实例化是一个赋值操作，需要用括号包起来，变成表达式去执行，才不会报错。  
 表达式`(window.wall = {})`执行完毕后，会返回新对象`window.wall`的引用。

宽放大模式的好处：是可以切割成多个文件进行加载，而不必考虑文件加载的先后顺序，不存在强耦合关系。  
 当然，如果IIFE里面的方法互相引用，还是存在加载依赖的问题。这个问题可以用加载器Require.js等工具解决，这里就不讨论了。

## 五、分文件加载IIFE要注意的点 ##

;(function(window, WALL, undefined){ // 给wall命名空间绑定方法say WALL.say = function(){ console.log('hello'); } })(window, window.wall || (window.wall = {}));

眼尖的已经看出区别了，就是文件开始的地方，先写上分号`;`。  
 这样，多个文件合并的时候，才不会出现收尾相接，代码出现错乱的问题。比如下面这种情况：

// a.js 文件 wall.log() // b.js 文件 (function(window, WALL, undefined){ // 给wall命名空间绑定方法say WALL.say = function(){ console.log('hello'); } })(window, window.wall || (window.wall = {}));

由于a.js文件的`wall.log()`少写了分号，跟b.js文件合并后，js就会认为‘wall.log()(...)’是需要这么执行的，结果代码就报错了。

--------------------

觉得不错的，可以关注`模块化`这个系列的文章，容我后续码字，敬请期待！

学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加 **笑笑微信：iamaixiaoxiao**，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。

![Center][]

[1240]: /images/20220709/b2a2833b7b214378a3187903ee704346.png
[Center]: /images/20220709/e99b64a847af4d43abb995138f8c8174.png