模块化是什么？浅谈对于模块化的理解。es6里的模块化是es module模块化吗？关于AMD、CMD、UMD

模块化是什么？浅谈对于模块化的理解。es6里的模块化是es module模块化吗？关于AMD、CMD、UMD

模块定义：变量（基础数据类型、引用数据类型）、函数、类

模块暴露：module.exports、exports（CommonJs）、export default、export const、export {}（ES6）

模块引入：require（CommonJs）、import（ES6）

模块调用：对于引入模块可以直接进行模块.xxx、模块.xxx()

函数与构造函数之间的关联，以及类与构造函数之间的关系。

ES6模块化：

export default、export {}、export const==>不管哪种方式的暴露，最终暴露出去的内容是对象

import xxx from ‘xxx’ 一般引入

import {default as xxx} from ‘xxx’ 默认并别名引入

import {xxx,yyy,zzz} from ‘xxx’ 解构引入

import xxx,{yyy,zzz} from ‘xxx’ 默认与解构引入

import * as xxx from ‘xxx’ 全部引入

export {xxx,yyy,zzz} from ‘xxx’ 引入并暴露

AMD:Asynchronous Module Definition (异步模块定义)

CMD：Common Module Definition （通用模块定义）

UMD：是一种规范，就是一种兼容 CommonJS/AMD/CMD 的兼容写法。

AMD

• 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

• js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

  //引入模块
  require(['math'], function (math) {
      math.add(2, 3);
  });
  //导出模块math.js
  define(function () {
      function add(a, b) {
          return a + b
      }
      return {
          add: add
      };
  });
  

  但是在浏览器环境下，math.js 通常存储在服务器。等待时间取决于网速的快慢，可能要等很长时间，会使得浏览器处于"假死"状态。

  因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

CMD

//引入模块
seajs.use(['math.js'],function(math){
    console.log(math.add(1, 2))
});

//导出模块 math.js
define(function(require, exports, module) {
    exports.add = function(a, b) {
        return a + b;
    };
});

AMD在加载完成定义（define）好的模块就会立即执行，所有执行完成后，遇到require才会执行主逻辑。（提前加载）

CMD在加载完成定义（define）好的模块，仅仅是下载不执行，在遇到require才会执行对应的模块。（按需加载）