2020-09-05 前端模块化以及commonJS与ES6模块化

在计算机程序开发中，开发一个项目往往需要大量的代码，如果把这些代码都放在一个文件中太多太多 ，维护起来太困难 。我们根据功能和方法的把代码放在不同的文件中这样每个文件包含的代码就相对较少。（一个js文件就是一个模块）这就是模块化。

模块化后的优点：一、提到代码的可维护性，二、提高代码的复用性，三、避免代码污染

模块化之后每个js文件都有自己的作用域，就是说每个js文件都是私有的要用的话要遵循一定的规则：commonJS和ES6模块化。

CommonJS：

Node应用由模块组成，采用commonJS模块规范。每一个文件就是一个模块，有自己的作用域。在一个文件里面的定义的变量、函数、类、都是私有的，其他文件不能随便用。在服务器端模块的加载是运行时同步加载的，而在浏览器端，模块需要提前编译打包处理

基本语法：

导出模块：exports.变量=value 或者module.exports=value

引入模块：require()，括号里面可以是第三方的模块名，可以是自定义的模块文件路径

例：let a = 5;

        let addx= function(value) {

            return  value + a

};

module.exports.x=x

module.exports.addx= addx

上面的代码通过module.exports输出变量x和addx

var ex =reqire("./example.js")

console.log(example);

console.log(example.x);

console.log(example.addx(1));

通过上面的代码可以发现require引入的是一个对象

ES6模块化：

ES6模块化的设计思想尽量的静态化，使得编译时就能确定模块的依赖关系，以及输出的变量，CommonJS和AMD模块，都只能在运行时确定这些东西，比如，CommonJS模块就是对象，输入时必须查找对象属性。

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

let num= 0；

let add =function(a,b){

return a+b

};

export { num ,add };

import { num , add} from "./math";

function test (else) { 

ele.textcontent=add(99+num);

}

如上图所示，使用import命令的时候，用户需要知道所要加载的变量名或者函数名，否则无法加载，为了给用户提供方便，让他们不用读文档就能加载模块，就要用到export default命令，为模块指定默认输出

ES6模块与CommonJS模块的差异

两个重大的差异：

一、CommonJS模块输出的是一个值得拷贝，ES6模块输出的是值得引用

二、CommonJS模块试运行时加载，ES6模块是编译时输出接口

第二个差异是因为CommonJS加载的是个对象，该对象只有在脚本运行时才会生成，而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成

CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为浏览器是异步加载的，因此有了AMD和CMD解决方案

AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块，

CMD和AMD规范相似，都用于浏览器编程，依赖就近，延迟执行，很容易在Node,js中运行，不过依赖SPM打包

ES6在语言标准层面上，实现了模块功能，而其实现的简单，完全可以取代CommonJS和AMD规范，成为服务器和浏览器的模块化通用的解决方案。