8-模块化

一、概述

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
区别：
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。还有不少⋯⋯这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。
区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。
2. CMD 推崇 as lazy as possible.2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
   // CMDdefine(function(require, exports, module) {
   var a = require('./a')
   a.doSomething()
   var b = require('./b')
   b.doSomething()
   })
   // AMD 默认推荐的是define
   (['./a', './b'], function(a, b) {
   // 依赖必须一开始就写好
   a.doSomething() // 此处略去 100 行
   b.doSomething()
   ...})
   虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。

---

二、模块化：

注意：需要放到服务器环境

1. 如何定义模块?

// 1.js
export const a = 12

2. 如何使用模块

<script type="module">
  import './moudel/1.js'
</script>

3、导出模块和使用模块

  // a.js
  export const a = 12;
  export const b = 14;
  export const c = 15;
  // b.js 
  import {a,b,c} from './moudel/a.js'

只有export default这一种形式导入的时候不需要{}
 // a.js
  export default a = 12;
// b.js
  import a from './moudel/a.js'

  // a.js
  const a = 12;
  const b = 13;
  const c = 14;
  export {
    a as aaa, //起个别名
    b,
    c
  }
  // b.js : b as bbb起个别名
  import {aaa,b as bbb,c} from './moudel/a.js'

import特点:

1. import可以是相对路径，也可以是绝对路径
2. import只会导入一次，无论你引入多少次
3. import './moudel/1.js',如果这么使用，相当于引入文件
4. 有提升效果，import会自动提升到顶部首先执行
5. 导出去模块内容，如果里面有定时器更改，外面也会改动
6. 可以动态加载模块 : 返回值是个promise对象

import('./moudel/1.js').then(res=>{            
})

优点：
1. 按需加载
2. 可以写if引入
3. 路径也可以是动态

---

commonJS模块化

1. 导出：a.js

moudel.exports = 123
moudel.exports = {
  a:1,
  b:2
}

2. 导入

let aa = require('./mousel/a.js')