先了解一下什么是模块化？

指将一个复杂的系统分解为多个模块，是一种开发规范。在对一定范围内的不同功能或相同功能不同性能、不同规格的产品进行功能分析的基础上，划分并设计出一系列功能模块，通过模块的选择和组合可以构成不同的产品，以满足市场的不同需求的设计方法。比如一个网站，按照不同的模块来开发。采取模块化便于测试， 由于模块化之后，由于各个模块之间互不依赖，我们可以将单独模块拿出来测试，不会因为相互依赖导致测试不便

模块化侧重的功能是封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

模块可以通过传递参数的不同修改这个功能的的相关配置，每个模块都是一个单独的作用域，根据需要调用。一个模块的实现可以依赖其它模块。

模块化的优势：解决命名冲突、解决文件依赖这两大问题

Web端主流的模块化标准：

CommonJS   AMD  CMD  UMD  ES6

下面只介绍CommonJS和ES6

CommonJS：

CommonJS规范中，每个文件就是一个模块，有自己的作用域，模块的变量、函数、类，都是私有的，外部不可见

CommonJS的使用方式:

导出：

module.exports.TestModule = function() {

    console.log('exports');

}

或者

exports.TestModule = function() {

    console.log('exports');

}

导入：

const mymodule = require('./MyModule');

ES6

 ES6逐渐取代了CommonJS和AMD规范,缺点：无法直接运行在大部分JavaScript运行环境下，必须通过工具转换成标准的ES5才能正常运行

ES6之后的模块化分为导出（export）与导入（import）

ES6模块化的使用：

export 导出模块；import 导入模块

导出：export{sum}

导入：import{sum}from"./example.js"

ES6模块默认是严格模式

一个文件一个模块

es6的import可以在模块中的任何位置，但是一定要在顶层，如果在块级作用域会报错

export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时值