前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JS中import怎么用?

JS中import怎么用?

原创
作者头像
Learn-anything.cn
发布2021-11-27 07:07:49
发布2021-11-27 07:07:49
9.8K0
举报
文章被收录于专栏:learn-anything.cnlearn-anything.cn
一、import 用法
1、导入整个模块
代码语言:txt
复制
// 导入my-module的所有接口,并制定模块名称为myModule
import * as myModule from '/modules/my-module.js';

// 使用时,需要通过新的模块名myModule,来访问即可
myModule.doAllTheAmazingThings();

2、导入单个接口
代码语言:txt
复制
// 导入单个接口
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、导入默认接口
代码语言:txt
复制
// 导入默认接口
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、动态导入

静态导入在页面加载时就会被导入,有时模块太大且不会在页面加载时使用,可以使用动态导入,在需要用的时候在导入模块。

代码语言:txt
复制
// 方法一:
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、语法补充
代码语言:txt
复制
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");

二、参考文档

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、import 用法
    • 1、导入整个模块
    • 2、导入单个接口
    • 3、导入默认接口
    • 4、动态导入
    • 5、语法补充
  • 二、参考文档
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档