在前端开发中，在使用webpack等构建工具开发中我们经常使用import *** from ** 或者是require来引入我们需要的模块，那么下面来聊聊前端模块化几种规范。
为什么需要模块化
在早期我们写js代码通常是这样子：
var a=1;
var b=1;
function a(){
}
function b(){
}
这样子会造成命名冲突和全局污染。
同时当我们在同一个页面请求过多的js文件时会造成页面阻塞和http请求过多。
模块化规范
由于上面的种种缺点，这时候模块化显得非常重要，前期的模块化通过闭包来达到变量私有化和模块化。
var module=(function(){
var a = 1;
var b = function(){
}
return {
b:b
}
})()
但是这样子还是不能解决加载问题。 这时js模块加载器诞生了，并逐渐形成几种模块化规范。
CommonJS规范
CommonJS简介
CommonJS规范是在node的模块系统基础上提出来的，也就是CommonJS在服务器中使用，不能在浏览器环境中使用。
CommonJS规范规定，每个模块内部，module变量代表当前模块（一个js文件就是一个模块）。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
CommonJS代码书写
var a = 1;
var b = function (){
}
module.exports.a = a;
module.exports.b = b;
上面代码通过module.exports输出变量a和函数b。
require方法引入
var main = require('./main')
main.a
main.b
其实这些代码在我们使用webpack配置的时候经常用到，webpack是运行在node环境中的，他使用的是CommonJS规范。
CommonJS规范特点
- 所有模块都是运行在模块作用域，不会污染全局
- 模块多次运行，只执行一次，然后缓存起来，要让模块重新执行只能清缓存
- 他是按照引入的顺序执行的，也是就是同步执行
AMD
AMD简介
上面说了CommonJS的执行是同步进行的，而且浏览器环境中没有CommonJS模块中的必要的字段，所以他不适合浏览器环境，这时候requirejs应势而生，它的诞生逐渐形成了AMD规范。
AMD规范中规定所有模块和依懒项异步加载，这样子js文件就不是一次性引入了。
AMD模块代码书写
我们说AMD规范主要使用requirejs。
//a.js
define([jquery.js],function($){
var aa = 1
return{
a:aa
}
})
//b.js
define([jquery.js],function($){
var bb = 2;
return {
b:bb
}
})
上面文件a.js和b.js通过define方法定义各自的模块。
通过require方法引入:
require([a.js,b.js],function(a,b){
console.log(a.aa) //1
console.log(b.bb)//2
})
AMD规范模块特点
- 按需加载，也就是说你引入模块才加载，不会在页面上一次性加载
- 异步加载，所有加载都是异步，不会阻塞页面
CMD
CMD介绍
在seajs出现后又形成了CMD规范，CMD规范和AMD类似，都是为了适应浏览器，但是CMD推崇就近依赖，AMD推崇依赖前置。
CMD模块代码书写
define(function(require,exports,module){
var $ = require(jquery.js)
exports.sayHello = function() {
$('#hello').toggle('slow');
};
})
CMD规范中模块代码书写和CommonJS相似，其实AMD规范中也可以这样子引用模块。具体可以看seajs使用文档和requirejs使用文档
CMD和AMD规范
CMD规范和AMD规范是类似的，都是异步按需引入。 但是他们执行的时机不同。
CMD是加载模块后立刻执行，也就是提前执行，
而AMD是加载模块后遇到require方法才执行模块，也就是延迟执行，可以参考这篇文章中的几个列子。
ES6模块化规范
在前面几个模块化规范发展中，逐渐形成了ES6规范，也是我们在项目中用的最多的了，也是我们最熟悉的模块化规范了，这里就不展开说了。
参考：