目前现代化的JS开发方式大行其道。撸代码时，你可能也会不理解为啥要使用这些繁复的现代化工具。

接下来我们就来一起学习下js模块、模块化解决方案、模块加载器和模块打包器的区别。

本文的主要意图是帮大家快速理解现代前端JS开发的概念，并不会深入去探讨每种工具和模式。

什么是模块？

模块是一块可复用的代码。它封装了实现细节，对外提供公开的API以便其他代码可以轻松加载和使用。

为啥要使用模块？

从技术应用的角度来说，模块并不是必须的。

模块化是一种代码组织方式。开发者们从六七十年代开始在各种编程语言中以多种形式使用了。

在JS中，模块化理想情况下应该允许我们：

• 抽象代码：将功能实现抽离到特定的库，使用者无需去关注复杂的内部实现逻辑。

• 封装代码：如果不希望代码被修改，则将代码隐藏在模块中。

• 复用代码：以避免重复写相同的代码。

• 管理依赖：轻松改变依赖而无需重写我们的代码。

ES5中的模块模式

ES5及更早之前的版本，在设计时并没有考虑到模块机制。随着时间的推移，开发者想出了多种方式在JS中模拟实现模块机制。

这里我们介绍2个简单的实现方式。

Immediately Invoked Function Expression(IIFE)

(function(){
    // ...dosomething
})()

IIFE本质上定义一个立即执行的匿名函数。

要注意的是匿名函数是被括号围起来的，在JS中，如果代码行是以关键字function开始，表示声明一个函数。

// 函数声明
function(){
    console.log('test');
}

直接调用函数声明会报错：

// 直接调用函数声明
function(){
    console.log('test');
}()
// => Uncaught SyntaxError: Unexpected token )

通过给函数加上圆括号，使其成为一个函数表达式:

// 函数表达式
(function() {
  console.log("test");
});
// => 返回 function(){ console.log('test') }

函数表达式返回一个函数，因此我们可以直接调用它：

// IIFE：立即执行函数表达式
(function() {
  console.log("test");
})();
// => console中打印字符串 'test'

IIFE 带来的好处：

• 将代码的复杂性封装到 IIFE 中，我们无需关注其实现。

• 在 IIFE 中定义变量，避免对全局作用域造成污染。

不过，IIFE 没有提供依赖管理机制。

Revealing Module partten

Revealing Module partten 与 IIFE 类似，不同之处是它把IIFE的返回值赋给一个变量。

// 将模块导出为一个全局变量
var singleton = (function() {
  // 内部逻辑
  function sayHello() {
    console.log("Hello");
  }
  // 对外暴露的 API
  return {
    sayHello: sayHello,
  };
})();

这里我们没有把匿名函数放在括号内，因为function关键字没有在行首。

// 访问模块的方法
singleton.sayHello();
// => Hello

除了导出单例对象，模块还可以导出一个构造函数：

// 将模块暴露为全局变量
var Module = function() {
  // 内部逻辑
  function sayHello() {
    console.log("Hello");
  }
  // 导出 API
  return {
    sayHello: sayHello,
  };
};

注意，我们没有在声明时立即执行函数。