【前端】模块化开发

前端模块化规范

Node.js采用CommonJS模块规范，每个文件就是一个模块，有自己的作用域，所有的代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是存在缓存机制，只会在第一次加载时运行一次，以后再加载就直接读取缓存结果。

CommonJS基本语法

• 暴露模块：module.exports = value 或exports.xxx = value。
• 引入模块：require(xxx)，如果是第三方模块，xxx为模块名，如果为自定义模块，xxx为模块文件路径。

//math.js
exports.add = function(){
	var args = arguments;
	args ++;
	return args;
}

//increment.js
var add = require('math').add;
exports.increment = function(val){
	return add(val);
}

AMD

AMD的意思是异步模块定义，它采用异步方式加载模块，解决了无全局变量的污染、标准的模块定义、清晰的依赖管理、异步非阻塞方式的加载的问题。

• 定义暴露模块

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

• 引入模块

require(['module1','module2'],function(m1,m2){
	//使用m1\m2
})

CMD

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。它整合了CommonJs和AMD的特点。

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

//引入模块
define(function(require){
	var m1 = reuqire('./module1');
	m1.show();
})

AMD和CMD区别

• 加载机制类似
• 模块定义的方式和模块加载时机不同
• AMD依赖前置，CMD依赖就近

ES6模块化

设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

/** 定义模块 math.js **/
var num = ;
export {num}

/**引用模块**/
import {num} from './math'
function(number){
	number = num+9;
}

导入使用模块，script标签要指定type=”module"。

与CommonJS模块的差异

• CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用。
• CommonJS模块是运行时加载，ES6模块是编译时确定引用关系。