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、动态导入 【JS中import怎么用()】静态导入在页面加载时就会被导入,有时模块太大且不会在页面加载时使用,可以使用动态导入,在需要用的时候在导入模块。
// 方法一: 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怎么用?

    推荐阅读