摘要：规范异步模块声明规范公共模块声明模块化的核心价值模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系。
一、什么是模块？
定义：具有相同属性和行为的事物的集合
在前端中：将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块
目的：为了每个js文件只关注与自身有关的事情，让每个js文件各行其职
①模块化：指的就是遵守commonjs规范，解决不同js模块之间相互调用问题
②CommonJS：
A.js文件中调用另一个B.js文件，一定要在A.js中引入B.js
require("B.js");
另一个被调用的js，也就是B.js一定要对外提供接口。
module.exports=B;
过程如下：
B.js
var b = "Hello,I"m module B."; module.exports = b;//暴露一个接口，与b对接。这个接口既可以是函数，也可以是对象，甚至是数组。
A.js
var _b = require("./B.js");//实际过程中应当是B.js相对于A.js的路径，这比使用绝对路径去获取要规范得多
//此时_b获得了B.js的接口，这个接口指向B.js中的变量b
console.log( _b );//"Hello,I"m module B.";
这就实现了一个简单的模块化工作方式，即：
模块间相互调用，协同工作，实现某特定功能。
④AMD规范：Async Module Define 异步模块声明
⑤CMD规范：Common Module Define 公共模块声明
⑥模块化的核心价值：模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系。
三、模块化的一些工具
gulp + browerify
构建步骤：
安装gulp
``npm install gulp --save-dev //要安装全局还是本地依赖根据实际情况来``
安装browserify --save--dev
npm install browserify --save--dev
安装文件输出流工具
npm install vinyl-source-stream --save-dev
在gulpfile里编写任务实现模块化
gulpfile.js
//基本模块引入
var gulp = require("gulp");
var brow = require("browerify");
var source = require("vinyl-source-stream");
//任务编写
gulp.task("bundle", function() {
//将任务交付给browserify
//brow读取入口文件后，能自动查找相互之间有依赖的关系的模块
return brow("./entry.js")
.bundle()//输出一个文件流变量（gulp的工作机制）
.pipe(source("bundle.js"))//将文件流变量输出为文件
.pipe(gulp.dest("js"));//将文件最终输出
}
webpack
参考webpack的配置及使用
requireJS
模块声明规范：AMD
声明模块
参数1：id 是这个模块的名称，它是一个可选参数，默认为require加载此模块时指定的名称，若定义这个参数，那么这个模块名应当为“顶级”的，不允许相对名称。
参数2：数组，为这个模块所依赖的其他模块
匿名函数参数：为依赖模块在这个模块中的接口，它们是一一对应的，因此即便不需要某个模块的接口，但若是需要它后面模块的接口，那也必须给它增加一个用于占位的参数。
define( "id", [ "module1", "module2" ], function( m1, m2 ) {
return {
arg1: m1,
arg2: m2
}
//返回值即是module3的接口
});
使用步骤
下载requireJS
bower install requirejs//根据个人习惯选择下载方式，只要保证后续引入的路径正确
配置config文件和main.js
config.js
require.config( {
base: "",//引入模块的起始路径
//paths对象为要引入的模块的名称及路径，且不需.js后缀，require默认会为文件添加.js后缀
paths: {
"jquery": "./jquery-1.11.0"//这就引入了juery作为一个模块。 PS：jquery自己已经实现了AMD，并且"jquery"是一个顶级模块名。
}
} );
main.js
require(["jquery"], function( $ ) {
$(document).css("background", "#000");//这就实现了引入使用jquery模块，并用它进行dom操作
});
在页面中引入