前端模块化(AMD、CMD、commonJs、ES6)

为什么需要模块化？

1.没有模块化的项目，通常需要在一个页面里引用多个<script>文件，分类性不强，不易维护，较多script时，可能会同名变量。。
2.一个复杂的项目肯定有很多类似的功能，将独立的功能按规范封装成一个个独立的模块，并且可以被其他模块引用。
3.常用的javascript模块化规范有四种：AMD，CMD，CommonJs，ES6模块化。

AMD和CMD的区别？

AMD是基于RequireJs(需要引入require.js)的规划范写的，它是通过define()函数来定义，第一个参数是数组，里面是一些需要依赖的包，第二个参数是一个回调函数，通过变量来引用模块，和前面的数组一一对应。
特点：异步加载，依赖前置。

define(['package/lib'],function(lib){
   var msg = lib();
   console.log(msg)
})

CMD是是基于SeaJs(需要引入sea.js)的规范化写的，它也是通过define(function(require,exports,moudle){})定义，通过require()来加载模块，在什么地方使用模块就在什么地方require()该模块，即用即返。
特点：异步加载，就近依赖。

define(function(require,exports,moudle){
   const lib = require(/package/lib);
   var msg = lib();
   console.log(msg)
})

CommonJs和ES6模块化的区别？

1.CommonJs模块引入方式使用require()，导出的方式是module.exports=value或exports.xx=value。
ES6使用import {} from(必须放在文件开头)和export let/const或export {}引入和导出。
2.CommonJs模块输出的是一个值的拷贝。
ES6输出的是值的引用。

//CommonJs   值拷贝
var a = 1;
function add(){
    a ++;
}
moudle.exports = {
    a: a,
    /*get a(){
        return a;
    }*/
    //改成这样add方法会为2
    add: add
}

var mod = require('./lib');
console.log(mod.a);   //1
mod.add();
console.log(mod.a);   //1   输入时必须查找对象属性，已经加载的值还是会拷贝exports中的a，所以还是1

//ES6    值引用
export var a = 1;
export var add = ()=>{
   a++;
}

import { a,add } from './lib'
console.log(mod.a);   //1
mod.add();
console.log(mod.a);   //2   //值的引用，当值发生改变时，输出的值也会同步变化。

3.CommonJs模块是运行时加载，加载的是一个对象(exports或module.exports)。
ES6模块是编译(将import语法转化为require)时加载的，效率更高，不是对象，它的对外接口是一种静态定义，只有在脚本使用时才会调用。
ES6渐渐取代CommonJs

参考：https://juejin.cn/post/6844903717947310093#heading-4