模块载入代码区别

模块载入代码区别

export

  1. 将代码分割在独立的模块里使用,为什么?在es6之前,都是共享一个全局作用域的,随着web应用越加复杂,这样做会引起诸如:命名冲突,安全问题,于是引入了模块。

  2. 清楚一个概念 很重要

  • export 和 export default 是ES6里面的API(这里只介绍ES6)
  • exports 和 model..exports是node.js里面的API,更确切的说是Common.js里的。(与require和import相似)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//  a.js
export let a = 1 // 输出变量
export fn(){...} // 输出函数
export class Class{
constructor(a, b){
this.a = a;
this.b = b;
}
} // 输出类
// 建议以在末尾统一输出的方式export

export a // 输出一个变量
export {a, fn, Class} // 导出多个变量,需要{}
export {fn as asFn2} // 导出时重命名,要有{}

// b.js

import {fn} from 'a.js' // export的引入要加{},单个也需要
import {a, fn as asFn} from 'a.js' // 引入多个要用“,”隔开
import * as example from 'a.js' // 引入整个模块

export default(模块的默认值)

1
2
3
4
5
6
7
8
9
10
//  a.js
export default function(num1, num2){...} // 导出默认值,只能有一个
export let a = 1

// b.js

import any from 'a.js' // 引入默认值,any任意取名,不用{}
import {a} from 'a.js' // 引入a
import any, {a} from 'a.js' // 默认值必须放在非默认值前面
import {default as any, a} from 'a.js' // 有重命名便需要大括号

总结

  • export

    • 单个不用括号,多个要用{},导出时as也要用{}
  • import

    • 除了* as, 别的重命名都要用{}
    • 既有export也有default时,default写前面
文章作者: Luo Jun
文章链接: /2018/05/04/export/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Aning