Export和import

2020-04-24 10:43:19 浏览数 (1)

Es6的模块功能几乎所有人都在用,而且实现的非常简单,可以说成为了通用的模块方案。主要就到处模块export和导入模块import。

Export

到导出模块可以是函数、类,也可以是var、let、const定义的变量,但是一定不能直接导出一个字符串或者数字,一个js里面可以有多个export,可以一起导出用花括号{}把要导出的内容都包裹起来:

代码语言:javascript复制
const a = 10;
const b = {
    c: 5
};
const d = () => {
    console.log(8)
}
function f() {
    console.log(9)
}

export {a, b, d, f}

也可以分别单个一个一个导出:

代码语言:javascript复制
export const a = 10;
export const b = {
    c: 5
};
export const d = () => {
    console.log(8)
}
export function f() {
    console.log(9)
}

Import

导入只需要注意命名要跟导出的命名一样,然后用花括号{}包起来:

代码语言:javascript复制
import {a, b, d, f} from "./utils/plugin1";
console.log(a)
console.log(b)
console.log(d)
console.log(f)

如果没有名字对应打印出来的就是undefined。

还可以整个模块导入:

代码语言:javascript复制
import * as lib from "./utils/plugin1";
console.log(lib.a)
console.log(lib.b)
console.log(lib.d)
console.log(lib.f)

还有一种默认导出一个的export default:

代码语言:javascript复制
var obj = 5
export default obj;

用export default导出不需要用花括号{}包起来,导入的时候也不需要花括号{},名字也可以自己起

代码语言:javascript复制
import lib from "./utils/plugin1";

因为export default只能导出一个,所以可以导出一个对象:

代码语言:javascript复制
var obj = {
    a: 10,
    b(){

    },
    c: function () {

    },
    d:{
        e: 15
    }
}
export default obj;
或者:
export default {
    a: 10,
    b(){

    },
    c: function () {

    },
    d:{
        e: 15
    }
}

需要注意的是export和import只支持静态导入和导出,你只可以在模块的最外层作用域使用import和export,不可在条件语句中使用,也不能在函数作用域中使用import。

(完)

0 人点赞