模块化

演变过程

文件
命名空间方式

var moduleA={
  name: 'module-a',
  method1:function (){
  ...
  },
  method2:function (){
  ...
  }
}

立即执行函数（私有成员，参数做依赖）

规范的出现

commonJs
- 一个文件就是一个模块
- 每个模块单独作用域
- 通过module.exports导出
- require导入
AMD
esModule

模块化最佳实践（esModule）

特性
- 自动采用严格模式
- 单独私有作用域
- 通过cors请求外部js
- 延迟执行脚本（首次渲染过后再执行，相当于script的defer）

注意事项

  var name = 'zzzxc'
  var age = 18
  export {name, age} // 这个是固定写法，不是导出一个对象
  
  import {name,age} from './module.js' //这个不是解构的概念，也是固定用法
  ```
```ts
export default {name, age}; //这里是到出了一个对象，但是导入的
 
import xxx from './module.js' //只能这么写，再解构

export {name, age} from './module.js';
import xxx,{name,age} from './module.js'
import * as xxx from './module.js'

export default 'Button';
export {default as Button} from './button.js'

导出导入的是引用传递，导入的是只读的，不能修改导入的元素。
esmodule原生的时候导入一定要指定到文件名包含后缀，用打包工具后可以不需要

动态加载模块

const module = './modules.js'
 
import(module).then(function (xxx){
...
})

兼容性

Polyfill
nomodule属性