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>