Js模块化规范（commonJs、Es6模块化）

一、Js模块化

常见的模块化规范：

1、CommonJS——nodeJS模块化规范

规定：

• 每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等（采用同步加载方式），对其他的模块都不可见。

• 每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。

特点：

• 所有代码都运行在模块的作用域内，不会污染全局作用域。

• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

• 模块加载的顺序，按照其在代码中出现的顺序，同步加载。

• 模块定义（导出）：

  module.exports属性 ：加载该模块其实就是加载模块的module.exports属性

  module.exports.add = function () {   //
  ...
  }
  module.exports = function () {		//匿名写法
  return ...
  }
  

  **exports变量:**node为每一个模块提供了一个exports变量(可以说是一个对象)，指向 module.exports。

  即：相当于每个模块中都定义：
  	var exports = module.exports;
  对外输出时，可以在变量export上添加要导出的方法
  
  

  使用：

  exports.add = function (r){return Math.PI * r *r};
  

  **注意：**不能把exports直接指向一个值，这样就相当于切断了 exports 和module.exports 的关系。

  例如：exports=function(x)	{console.log(x)};
  

  推荐使用module.exports属性 ，exports了解即可

• 模块引用：

  var add = require('./xxx.js');  //相对路径导入
  var config = require('xxx.js');  //直接导入
  var http = require('http');		//导入一个模块
  

  因为nodeJS会被部署在服务端，不存在js模块下载阻塞的问题，但是浏览器则是本地客户机存在下载js文件阻塞的问题。

  所以浏览器不兼容CommonJS，原因就在于缺少这些Node.js环境的变量。

  • module
  • exports
  • require
  • global

  那么只要解决了这几个变量就可以了，下面示例：

  var module = {
    exports: {}
  };
  (function(module, exports) {
    exports.multiply = function (n) { return n * 1000 };
  }(module, module.exports))
  
  var f = module.exports.multiply;
  f(5) // 5000 
  

  向一个立即执行函数提供 module 和 exports 两个外部变量，模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中，这样就实现了模块的加载

  知道了原理，就能做出工具了。Browserify 是目前最常用的 CommonJS 格式转换的工具。

  可查看阮一峰老师相关文章继续了解：http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html

  commonJs了解更多：http://javascript.ruanyifeng.com/nodejs/module.html

2、ADM——requireJS倡导的一种模块化规范

AMD推崇依赖前置；在requireJS中模块是通过define来进行定义的，如果模块之间相互依赖，需要先将依赖模块导入进来，待导入完毕之后，在通过回调函数的方式执行后面的代码，从而有效的解决了模块依赖的问题。

模块定义：

define({
	method1: function() {}
	method2: function() {}
});  

//或者
define(function(){
	return {
		 method1: function() {},
		 method2: function() {},
	}
});    

模块引用：

require(['a', 'b'], function(a, b){
a.method();
b.method();
})

3、ES6Module

ES6 在语言标准的层面上，实现了模块功能，旨在替代AMD、CommonJs成为浏览器和服务器通用的模块解决方案。

规则：每个js文件都是一个独立的模块

• 按需导入：import，命令用于输入其他模块提供的功能

• 按需导出 ：export，命令用于规定模块的对外接口

// 定义模块 math.js 
var data = 0;
var add = function (a, b) { return a + b };

// 导出暴露basicNum变量和add方法
export { data, add };

//引用模块 可省略.js，需要清楚加载的变量名或函数名
//as可以进行重命名
import { data as newName, add } from './math.js';

• 默认导入、导出

//为模块指定默认输出，import时不需要使用大括号，每个模块只允许一次
export default { ... };

import 接受名（要求合法） from '模块路径、标识符'

• 直接导入并执行

import '..../xxx.js'

ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。