填坑十萬個為什麼?(22)

NO IMAGE

簡介:很多概念不清或忘記,重新構建自己的知識體系。每天問自己1~多個問題。我是菜鳥 成為大神之路!

1.認識exportLink export

export語句用於在創建JavaScript模塊時,從模塊中導出函數對象原始值,以便其他程序可以通過 import 語句使用它們。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

2.認識import Link import

import語句用於導入由另一個模塊導出的綁定。無論是否聲明瞭 strict mode ,導入的模塊都運行在嚴格模式下。在瀏覽器中, import語句只能在聲明瞭type="module"script的標籤中使用。

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

多個導入導出

// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube,foo };

這樣的話,在其它腳本 (比如import),我們可以這樣使用:

import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

3.認識exportexport default

1、exportexport default均可用於導出常量、函數、文件、模塊等
2、你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠對其進行使用
3、在一個文件或模塊中,export、import可以有多個,export default僅有一個
4、通過export方式導出,在導入時要加{ }export default則不需要

這樣來說其實很多時候exportexport default可以實現同樣的目的,只是用法有些區別。注意第四條,通過export方式導出,在導入時要加{ }export default則不需要。使用export default命令,為模塊指定默認輸出,這樣就不需要知道所要加載模塊的變量名

相關文章

基於Vue的任務節點圖繪製插件(vuetasknode)

填坑十萬個為什麼?(25)

填坑十萬個為什麼?(24)

填坑十萬個為什麼?(23)