一、import 用法
1、導入整個子產品
// 導入my-module的所有接口,并制定子產品名稱為myModule
import * as myModule from '/modules/my-module.js';
// 使用時,需要通過新的子產品名myModule,來通路即可
myModule.doAllTheAmazingThings();
複制
2、導入單個接口
// 導入單個接口
import {myExport} from '/modules/my-module.js';
// 導入多個接口
import {foo, bar} from '/modules/my-module.js';
// 導入接口,并制定别名,編碼時更容易使用
import {reallyReallyLongModuleExportName as shortName} from '/modules/my-module.js';
複制
3、導入預設接口
// 導入預設接口
import myDefault from '/modules/my-module.js';
// 導入預設接口,也可以和其他導入方式一起使用
import myDefault, * as myModule from '/modules/my-module.js';
import myDefault, {foo, bar} from '/modules/my-module.js';
複制
4、動态導入
靜态導入在頁面加載時就會被導入,有時子產品太大且不會在頁面加載時使用,可以使用動态導入,在需要用的時候在導入子產品。
// 方法一:
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
// 方法二:
let module = await import('/modules/my-module.js');
// 方法三:動态導入預設接口
(async () => {
if (somethingIsTrue) {
const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
}
})();
複制
5、文法補充
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");
複制
二、參考文檔
- JS中import怎麼用?