Javarscript中模块(module)、加载(load)与捆绑(bundle)详解

JS模块简介

js模块化，简单说就是将系统或者功能分隔成单独的、互不影响的代码片段，经过严格定义接口，使各模块间互不影响，且可以为其他所用。

常见的模块化有，C中的include (.h)文件、java中的import等。

为什么JS需要模块

很显然，没有模块我们也可以实现同样的功能，为什么我们还要使用模块来写js代码呢？下面几点是模块化给我们带来的一些变化：

ES5及之前的模块系统

在ES5及之前版本，还没有原生的模块语法。不过这并不代表ES5之前，前端没有使用模块。简单介绍两种：IIFE、Revealing Module.

IIFE

Immediately Invoked Function Expression，立即执行函数表达式。

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

看上面的代码，IIFE可以说成是一个在定义的时候就执行的匿名函数。注意函数是先被”()”包起来了，然后后面紧跟”()”表示执行函数。如果是以下代码，将会报错：

function(){  console.log('test'); }() // => Uncaught SyntaxError: Unexpected token )

这种写法表示，先定义一个匿名函数，然后再去解析”()”。由于在第一行”function”出现在首位，这表明此处定义一个函数，函数后紧跟”()”，此时表示单独解析”()”，就会报出上面的错误信息，因此需要先将函数定义包裹起来。
“(function…)”这种写法表示执行”()”内部代码，并返回该语句执行结果，此处返回结果为该函数，后面紧跟”()”即表示执行该函数。IIFE可以帮助我们做到：

显而易见，这种编码方式并没有提供良好的机制来解决依赖管理问题。

Revealing Module

根据字面暂解释为揭示模式，与IIFE形式类似，但是提供了一个返回值。方便集中管理公有的api，使模块、公用api更加简洁清晰。

// Expose module as global variable var singleton = function(){  // Inner logic  function sayHello(){  console.log('Hello');  }  // Expose API  return {  sayHello: sayHello  } }()

稍微注意下，上面的代码，我们并没有用”()”去包裹，因为关键字”function”并不在该行的开头。