ES6模块的导出和导入

ES6模块的导出和导入

​ es6采用export、import进行模块的导出和导入。

​ 假如有如下三个文件，处于相同目录下

A.js
export function a1(){
    console.log("a1 run")
}

export function a2(){
    console.log("a2 run")
}
export const a3 = 5

//或者
// export {a1,a2,a3}

B.js
let b1 = function(data){
    console.log(data)
}
function b2(){
    console.log("b2 run")
}
export const b3 = 6
//只可以使用一次 export default
export default {
    b1,b2,b3
}
export {
	b1,b3
}

main.js

import {a3, a2 as myfunc} from "./A.js"
import MyB from "./B.js" 
import {b1,b3} from "./B.js"

console.log(a3) // 5
myfunc() // a2 run

MyB.b2() // b2 run
MyB.b1("hello world") // hello world

console.log(b3); // 6
b1("word") // word

说明：

1. export default意味着将大括号中的函数、变量封装成default对象全部导出，且该语句在一个js文件中只可以使用一次。在另一个文件中导入时，导入名字可以随便写。

2. export + 变量/常量/函数，部分导出；在另一个文件进行导入时，导入名称必须和模块中定义的相同，但是可以使用as进行重命名，注意导入时需要使用大括号（ES6中对象的解构赋值）。

   let p = {name:"bill", age: 25}
   let {name,age} = p //变量名务必和对象属性名相同，否则会得到undefined
   console.log(name + "," + age) // bill 25
   
   let {log} = console
   log("hello world")