ECMAScript2015-Module

1. 模块化的目的:

1. 解决全局变量污染
2. 解决变量重名
3. 解决文件依赖顺序

   2. 模块化命令:

   1. export: 规定模块的对外接口

   1. export default 只能使用一次，export可以使用多次
   2. export default 不能跟变量声明语句,错误示例: export default var a=10;
   3. export 导出要指定对外接口
   4. export 和 export default 可以一起使用

1. 定义后导出变量/常量/函数为模块

const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2, 3]
const say = (content) => {
    console.log(content)
}
let run = () => {
    console.log('run')
}
export {
  name,
  addr,
  list,
    say,
  run
}

2. 分别导出变量/常量/函数为模块

export const name = 'hello'
export let addr = 'BeiJing City'
export var list = [1, 2, 3]
export function say(content) {
    console.log(content)
}
export function run() {
    console.log('run')
}

3. 导出对象为模块

1. 定义后导出模块

let data = {
    code: 0,
    message: 'success'
}
export {
    data
}

2. 直接导出模块

export ({
     code: 0,
     message: 'success'
})

4. 导出类(Class)

1. 定义后导出模块

class Test {
  constructor() {
      this.id = 2
  }
}
export {
    Test
}

2. 直接导出模块

export class Test {
  constructor() {
      this.id = 2
  }
}

5. 重命名(as)后导出模块

const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2, 3]
export {
  name as cname,
  addr as caddr,
  list
}

6. 方便快速使用(export default)导出模块

const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2, 3]
export {
    name as cname,
  addr as caddr
}
export default list

2. import: 输入其他模块提供的功能

1. 导入的值为只读状态
2. 导入的对象可以修改属性,但不推荐

导入2-1-6模块

import list, {
  cname,
  caddr
} from A

修改导入的名称

import list, {
  cname as name,
  caddr
} from A

批量导入

  import list, * as mod from A
  console.log(list)
  console.log(mod.cname)
  console.log(mod.caddr)