前端模块化总结

2018-09-10

模块是自动运行在严格模式下并且没有办法退出运行的JS代码，目前前端运行环境分为浏览器环境和Node环境，在这两个环境下使用的模块化方式也自然是不同的。

我们将模块的使用分为两个方法:暴露自身数据、获取其他模块的数据

规范	运行环境	导出	导入
commonjs	浏览器/node	module.exports/exports	require
AMD	浏览器	define return	require
CMD	浏览器	define exports	require
ES6	浏览器/node	export default / export	import from

Node环境
- common.js：CommonJS是服务器模块的规范，Node.js采用了这个规范。
  
  根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。
  
  在这个规范下，暴露数据采用 module.exports 和exports这两个方法，获取数据采用require方法。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  a.js
  var x = 5;
  var y=4;
  var addX = function(value) {
  return value + x;
  };
  module.exports.x = x;
  module.exports.addX = addX;
  exports.y=y;
  }
  1
  2
  3
  4
  5
  b.js
  const a=require('a.js');
  console.log(a.x);//5
  console.log(a.addX(5));//10
  console.log(a.y);//4
  在a.js中通过module.exports暴露出x和addx方法，b.js通过requie获取a模块的暴露出的数据。
  
  那么module.exports和exports有什么区别了？
  
  其实require导入的内容是module.exports的指向的内存块内容，并不是exports的，简而言之，exports是module.exports的引用，辅助后者添加内容用的。
  
  所以，为了避免糊涂，尽量使用module.exports导出数据。

浏览器环境

1. AMD规范

AMD规范的产物是require.js，按需加载

声明一个模块：

1	define(id, dependencies, factory);

输出数据用 return

获取数据用 require

在模块定义中，id和dependencies是可以省略的，话不多说，看代码。

student.js
define(function(){ 
    return { 
       createStudent: function(name, gender){ 
            return { 
                name: name, 
                gender: gender 
            }; 
       } 
    }; 
});

class.js
define(function() { 
var allStudents = []; 
       return { 
           classID: "001", 
           department: "computer", 
           addToClass: function(student) { 
           allStudents.push(student); 
           }, 
           getClassSize: function() { 
           return allStudents.length; 
           } 
       }; 
    } 
);

main.js
require(["student", "class"], function(student, clz) { 
clz.addToClass(student.createStudent("Jack", "male")); 
clz.addToClass(student.createStudent("Rose", "female")); 
console.log(clz.getClassSize());  // 输出 2 
});

以上定义了三个js，其中main.js获取了student和class的模块数据。

student 模块和 class 模块都是独立的模块，下面我们再定义一个新的模块，这个模块依赖 student 和 class 模块，这样主程序部分的逻辑也可以包装进去了。

newmain.js
require(["js/manager"], function(manager) { 
manager.addNewStudent("Jack", "male"); 
manager.addNewStudent("Rose", "female"); 
console.log(manager.getMyClassSize());// 输出 2 
});

2.CMD规范

CMD的产出结果是seal.js，暂时我不讨论AMD与CMD的区别，先讲用法。

CMD规范下的模块和AMD下的模块是极为相似的，你用AMD模块的语法照样可以在CMD中使用，唯一不同CMD使用exports和return 来导出数据。

3.ES6模块标准

导出：export和export default

导入：import from

export default在模块中是唯一的，而export可以有多个，所以在通过export方式导出后，在导入时需要加import { } from ‘模块’，{ }里面是导出的数据名，==虽然这个很像是对象解构，但是，并不是哦。==

后记补充：

|阅读量()