一、引入

1. 什么是模块化？

度娘是这么说的：模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。

简单的说，模块就是实现特定功能的一组方法，模块化将使代码更好的管理、维护和使用。

2. 为什么要模块化？

在ES6之前 JavaScript 并没有内置的标准模块系统，无法把大文件有组织地划分成小块，并管理之间地依赖。随着我们写的js代码越来越庞杂，如果不进行模块化，就可能引发命名冲突，造成不易复用、维护性高。

而如果有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

3. 那么，什么为commonjs呢？

commonjs是JavaScript的一种模块规范，是nodejs也就是服务器端广泛使用的模块化机制。

该规范的主要内容是：模块必须通过module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。

二、CommonJs

1、概述

每个文件就一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

2. 特点

（1）代码运行在模块作用域，不会污染全局作用域。

（2）加载模块顺序按照其在代码中出现的顺序加载。

（3）加载模块是同步的。

（4）单例加载：也就是加载的模块会缓存起来，再次使用时，会直接用运行结果，不会再加载（除非手动清除）。

3. module对象

每个模块内部，都有一个module对象，代表当前模块。它有以下属性。

①module.id 模块的识别符，通常是带有绝对路径的模块文件名。

②module.filename 模块的文件名，带有绝对路径。

③module.loaded 返回一个布尔值，表示模块是否已经完成加载。

④module.parent 返回一个对象，表示调用该模块的模块。

⑤module.children 返回一个数组，表示该模块要用到的其他模块。

⑥module.exports 表示模块对外输出的值。

（1）module.exports

module.exports属性表示当前模块对外输出的接口，其他文件在加载该模块时，实际上就是读取module.exports变量。

（2）exports

为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。

var exports = module.exports;

需要注意的是，如果一个文件中 module.exports 被重新赋值，该文件中其他exports出去的变量（属性）也是无效的。

4. 加载  require

（1）基本用法

node采用CommonJS规范。内置require命令用于加载模块：var foo = require("filename")，引入后了直接通过foo.的方式访问到其对外的接口或属性。

require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。

（2）加载规则

① require命令用于加载文件，后缀名默认为.js。

var foo = require('foo');

//  等同于

var foo = require('foo.js');

路径分三种情况

a. ('/main/app.js')  --绝对路径

b. ('./main/app.js') --相对路径 （当前路径下的main文件夹下的appjs文件）

c. ('react') --没有 以 ‘./  和 /’开头的路径，则表示加载的一个默认提供的核心模块，会去node_modules文件夹下找或node的系统安装目录中找。

② 如果指定的文件没有发现，node会尝试为文件名添加.js .json .node后缀，再搜索。.js文件会以文本格式的js脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。

（3）模块缓存

第一次加载某个模块，node会缓存该模块，以后再次加载会直接从缓存中取出该模块的module.exports属性

// 删除指定模块的缓存

delete require.cache[moduleName];

// 删除所有模块的缓存

Object.keys(require.cache).forEach(function(key) {

  delete require.cache[key];

})

5. AMD理解及与CommonJS的区别

（1）AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。

（2）CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。

参考：阮一峰http://www.w3cbus.com/nodejs/module.html