ES6模块化

ES6 Module

• 主要由两个命令构成: export import
• 编译时就引入模块代码, 而不是运行时加载
• 无法实现条件加载, 可以实现静态分析

export导出(推荐)

// 导出写法一
  export var name = "Tom"; // 导出变量
  export function say() {  // 导出函数
    console.log("say something")
  };

// 导出写法二(推荐)
  var name = "Tom";
  var say = function(){
    console.log("say something")
  }
  export {
    name,
    say
  }

// 导入写法一(选择性导入)
import {name,say} from "./app.js"
console.log(name)
console.log(say())

// 导入写法二(一次加载所有方法)
import * as app from "./app.js"
console.log(app.name)
console.log(app.say())

export default导出

• 一个模块只能使用一个export default

  // 导出一个变量
  export default function say(){
    console.log("say something")
  }
  

// 导出多个变量
var name = “Tom”
var say = function(){
console.log(“say something”)
}
export default {
name,
say
};

// 导入
import app from ‘./app.js’

#### export和export default区别
1. 一个模块中, export可以有多个, export default只能有一个
2. export可以导出变量表达式, 而export default不行
  ```js
  export const a = '100'; // 正确
  export defult const a = '100'; // 错误, 将变量a赋值给变量default
    // export default其实是输出了一个叫default的变量, 所以后面不能跟变量声明语句

3. export不能直接输出变量, export default可以
4. export和export default对应的导入方式不同

import详解

• import在编译阶段会提升到模块顶部
• import导入的模块是只读的, 不允许改写

  // import可以省略文件后缀
  import math from 'math.js' // ==>
  import math from 'math' // 导入math.js文件时, 可以省略文件后缀
  

// import可以省略index.js文件名
import math from ‘mathDir/index.js’ // ==>
import math from ‘mathDir’ // 导入mathDir/index.js文件时, 可以省略文件名

// import支持起别名
import {math as myMath} from ‘./math’ // 必须是export导出的方式

---

### 扩展: export和import同时使用实现转发
- 同时导入并导出一个模块
```js
// 从my_module中导入foo和bar, 同时导出这两个方法
// 实现了转发的效果, 注意当前模块不能使用foo和bar
    export { foo, bar } from 'my_module';
  // 可以简单理解为
      import { foo, bar } from 'my_module'; // 导入
      export { foo, bar }; // 导出

应用: 在框架中常见用法: 跨模块常量

• 项目中使用的常量可以统一在constants目录下管理

  .
  ├── constants  // 该目录下放置了一些模块
  |   ├── db.js // 数据库账户信息
  |   ├── user.js // 用户信息
  |   └── index.js // 合并当目录constants下所有模块, 并导出所有
  └── xxx.js       // 在其他文件中使用这些常量
  

// constants/db.js 数据库账户信息
export const db = {
url: ‘http://my.couchdbserver.local:5984',
admin_username: ‘admin’,
admin_password: ‘admin password’
};

// constants/user.js 用户信息
export const users = [‘root’, ‘admin’, ‘staff’, ‘ceo’, ‘chief’, ‘moderator’];

// constants/index.js 导入db,users模块, 并一次性导出
export {db} from ‘./db’;
export {users} from ‘./users’;

// xxx.js
import {db, users} from ‘./constants/index’;