关于前端开发中的模块化理解

作为一个前端开发者，掌握必要的专业知识是必要的，css,js,html,frame等，但对于规范还是要有一定的掌握，如开发规范，前端越来越复杂，其中模块化的问题引起重视，工程的模块化究竟是什么？

首先来了解下各种概念：

（1）CommonJS 

它就是为了JS的表现来制定规范，因为js中没有模块的功能，CommonJS应运而生，它定义的模块分为：模块引用require 、模块定义exports和模块标识module。（Node遵循CommonJS规范，但相比还是有所不同）

require()用来引入外部模块，exports对象用于导出当前模块的方法或变量，唯一的导出口，module对象就代表模块本身，详细的栗子代码如下：

	//sum.js
	exports.sum = function(){
		//todo
	}
	//main.js
	var m = require('sum');
	exports.add = function(n){
		return m.sum(n);
	}

但是CommonJS是主要为了JS在后端的表现制定的，并不适合前端，为何，这就要思考下浏览器端js和服务器端js的不同了，首先，资源的加载方式不同，服务器端require一个模块，直接从硬盘或内存中读取，而浏览器则不同，需要从服务端下载所需的文件，然后发送资源请求，于是AMD（异步模块定义）出现了。

（2）AMD

"Asynchronous Module Definition"

 它是一种对模块的定义，将模块和它的依赖可以被异步的加载，还可以正确的顺序执行，模块的加载不影响它后面的语句执行，所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成后，这个回调函数才会执行。

（3）RequireJS

是一个工具库，主要用于客户端的模块管理，它可以让客户端的代码分成一个个模块，实现异步或者动态加载，从而提高代码的性能和可维护性，它的模块管理遵循AMD规范。（后续关于具体的requirejs的使用）

（4）CMD

seajs遵循CMD规范，与AMD类似，但是更加方便些。

用seajs定义模块的写法如下：

	//a.js
	define(function(require,exports,module){
		console.log('a.js执行..');
		return {
			hello:function(){
				console.log('hello a.js');
			}
		}
	})
	//main.js
	define(function(require,exports,module){
		console.log('main.js执行..');
		var exam = require('a');
		exam.hello();
	});

（5 ）面向ES6的模块标准

定义一个模块不需要专门的工作，因为一个模块的作用及时对外提供的API，所以只需要export导出即可。

使用模块的时候用import关键字：

        import { run as go} from 'a'

run()

如果要想使用模块中的全部API，使用module关键字

module foo from 'a'

a.run()