关于javascript:JS中import怎么用

一、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 怎么用？