es6 Moduel 默认名与非默认名

export default

default 本质是将后面变量(值)赋给 default,然后以default名称输出。

import

在获取default变量时,写在大括号的外面 ,可自定义名称。

变量写法

//a.js
export let b = 4;
export default 8;  
<script type="module">
import nm,{b} from "./a.js";

console.log(b,nm);
</script>

函数写法

匿名写法也可以用于非匿名函数,不过在模块外func1函数名无效,并且视为匿名函数

// a.js
export function func() {
    console.log("函数");
}

export default function () {
    console.log("匿名函数");
}
/*
或

export default function func1() {
    console.log("匿名写法也可以用于非匿名函数,不过在模块外func1函数名无效,并且视为匿名函数。");
}

*/
<script type="module">
import test,{func} from "./a.js";
test();
func();
</script>

字面量写法

// a.js
export const o = {
    name: "0",
    func() {
        console.log("字面量");
    }
}

export default {
    name: "匿名字面量",
    func() {
        console.log("匿名字面量");
    }
}
<script type="module">
import t,{o} from "./a.js";
t.func();
o.func();
</script>

类写法

export class T {
    func() {
        console.log("类");
    }
}

export default class V {
    func() {
        console.log("类名V对外不可见并且属于匿名类");
    }
}
<script type="module">
import M,{T} from "./a.js";

let m = new M();
let t = new T();
m.func();
t.func();
</script>
export default class {
    func() {
        console.log("匿名类");
    }
}
<script type="module">
import SS from "./a.js";

let s = new SS();
s.func();
</script>

* 整体加载

整体加载符号 * 星号,加载的所有变量皆为别名成员。

语法:import * as 变量 from "文件"

export const b = 1;
export default () => {
    console.log("默认");
}
<script type="module">
import * as T from "./a.js";
T.default(); // 调用默认名
console.log(T.b);
</script>
原文地址:https://www.cnblogs.com/whnba/p/10497740.html