2019独角兽企业重金招聘Python工程师标准>>> 
模块化简介
具有相同属性和行为的事物的集合。在前端中，将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件成为模块，为了每个js文件只关注与自身相关的事情，让每个js文件各执其职。
模块的几个特点：独立，完整，依赖关系
在开始阶段，并没有模块机制，后来制定规范，出现了Common.js和AMD
node.js是写后台脚本，用来写服务器的。
模块化的实现
- 函数
- 对象写法
- 匿名函数，返回对象
- 依赖传入实参
以上缺点依赖关系不好处理，需要顺序加载，会阻塞页面
1.common.js规范（主要适用于后台，服务器端）
根据common.js规范，每一个文件就是一个模块化（可以解耦的就分开），其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。
该规范最初是用在服务器端的node的，前端的webpack（内部用了很多node.js的环境，变量）也是对common.js原生支持的。（node.js就是用js写的）
webpack就是一个工具，帮人可以做功能简单，但比较繁琐的代码。（vue：占市场比例大些，react）
Common.js的核心思想就是通过require方法同步加载所需要依赖的其他模块，然后通过exports或者module.exports来导出需要暴露的接口。
例：
// index.js
var module = require('module.js'); // 同步加载 变量可以是module以外的变量
module.add('ad');
// module.js (common.js规范)
module.exports = { // 固定的"module.exports"
ad ： function(str){
console.log(str);
}
}
浏览器不兼容common.js，原因是浏览器缺少module，exports，require，global（node提供的环境变量）四个环境变量，如要使用，需要工具转换。
common.js采用同步加载不同模块文件，适用于服务器端的，因为模块文件都存放在服务器的各个硬盘上，读取加载时间快，适合服务器端，不适应浏览器。
适用于浏览器规范，并且是异步加载的。便有AMD规范进行开发。
2.AMD规范(模块前置，提前加载)
common.js为服务器端而生，采用的同步加载方式，因此不适用浏览器。因为浏览器需要到服务器加载文件，请求时间远大于本机读取时间，倘若文件较多，网络迟缓就会导致网页页面瘫痪，所以浏览器更希望能够实现异步加载的方式。
AMD规范则是异步加载模块，允许指定回调函数，等模块异步加载完成后即可调用回调函数。
AMD得起的产出的require.js
（这里涉及到了两个概念：
同步加载：
异步加载：
）
AMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。
// main.js
(模块数组：jquery模块，math模块)
||
require(['jquery','math'],function($，math){ // .....}) // 加载模块,jquery模块，math模块
// math.js
define(function (){ // .....}) // 定义math模块
使用require.js(下载在地址：http://requirejs.org/)，提前加载所有依赖，方可使用
<!-- index.html -- >
<script src="./js/require.js" data-main="./js/main.js"></script>
// main.js
require.config({
baseUrl:'./js/tool', // 基础路径
path:{
"jquery":'jquery', // 引用是jquery.js(下载路径：http://jquery.com/download/)
"math":'math'
}
})
require(['jquery','math'],function($,math){ // []内部的参数为导入的js文件数组参数
console.log($());
console.log(math.add(1,2));
} )
// math.js
define(['mylib'],function(mylib){
function add(a,b){
return a+b;
}
return {
add:add
}
})
// mylib.js
define(function(){ return a: 12356})
3.CMD规范 （就近加载，按序加载）
- CMD异步加载，跟AMD的主要区别在于
AMD依赖前缀，提前加载依赖，而CMD就近加载，按需加载
产物是sea.js,跟require.js（下载地址：http://www.zhangxinxu.com/sp/seajs/#downloads）使用有些相似。
- CMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。
<index.html>
<script src="./js/sea.js"></script>
// main.js
define(function(require,exports,module){
var math = require('math');
console.log(math);
})
// math.js
define(function(require,exports,module) {
function add(a,b){
return a+b;
}
exports.math = add;
})
4.ES6 （重点）
es6自带模块化，看可以使用import关键字引入模块，通过export关键字导出模块，功能较之前的几个方案更为强大。但由于es6目前无法在浏览器中执行，所以，只能通过babel将不被支持的import编译为当前受到广泛支持的require。
例：
import tool from '../js/tool.js'; // 导入
export class show { // 导出
constructor(){
this.age = 18;
}
shouName(){
return this.age;
}
}