JS模块化

简介

js目前的主流模块化有CommonJS、AMD、CMD（阿里员工开发，但已经卖给国外，只需要做了解）、ES6规范。

CommonJS

首先是用在服务器端（Node）的规范，后来也可以用在浏览器端，但是需要提前打包编译（使用Browserify）。

基本语法
暴露模块：

module.exports = value
exports.xxx = value

注意暴露的模块是一个对象。

引入模块：require(xxx)
注意引入自定义模块时“xxx”为模块文件路径，引入第三方模块时“xxx”为模块名

AMD

Asynchronous Module Definition，即异步模块加载机制。专门用于浏览器端的模块化规范，模块的加载是异步的。

基本语法
暴露模块：

//定义没有依赖的模块
define(function(){
	return 模块
})
//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){
	return 模块
})

引入模块（需要下载require.js）：
main.js:

requirejs.config({
	baseUrl: 'js/lib' //基本路径
	paths: { //配置路径
		module1: './module1'
	}
});
requirejs(['module1'], function(m1){
	m1.fun();
})

然后在页面文件中引入requirejs，并指定js主文件的入口

<script data-main="js/main.js" src="js/libs/require.js"></script>

CMD

专门用于浏览器端的模块化规范，模块的加载是异步的。模块使用时才会加载执行。

AMD依赖前置，可以方便知道依赖了哪些模块，然后马上加载 , 在加载完成后, 就会执行该模块;
而CMD推崇就近依赖，把模块变为字符串解析一遍, 找到依赖了哪些模块, 在加载模块完成后, 不立刻执行, 而是等到require后再执行;

基本语法
暴露模块：

//定义没有依赖的模块
define(function(require, exports, module){
	exports.xxx = value;
	module.exports = value
})
//定义有依赖的模块
define(function(require, exports, module){
	//引入模块1（同步）
	var module1 = require('./module1')
	//引入模块2（异步）
	require.async('module2', function(m2){
		
	})
	//暴露模块
	exports.xxx = value
})

引入模块（需要下载sea.js）：

define(function(require){
	var module1 = require('./module1')
	module1.fun();
})

然后在页面文件中引入sea.js，使用全局对象seajs的use方法使用模块

<script src="js/libs/sea.js"></script>
<script>
	seajs.use('./js/main.js');
</script>

ES6规范

依赖模块需要编译打包处理。使用Babel将ES6语法转义为ES5代码（此时包含CommonJS语法），使用Browserify编译打包js。
基本语法
暴露模块：

//暴露一般模块
export xxx
//暴露默认模块
export default function(){
}

引入模块：

//引入一般模块
import {fun1, fun2} form './module1'
//引入模块的默认暴露
import module2 from './module2'

在此仅做一个记录。如需了解详细可观看视频