JavaScript 模块导入导出(export与import)用法
2023-09-11 14:21:26 时间
一、前言
导出模块就是让 .js 文件中的某些值对外可见,导入模块就是将那些对外可见的值导入到当前 .js 文件中。
模块导入与导出分别使用关键字import 、export。
二、exports 导出方式
存在两种 exports 导出方式:① 命名导出(每个模块包含任意数量)② 默认导出(每个模块包含一个)
1、默认导出(每个模块包含一个)
默认导出关键字为:default
// 导出变量
export default name;
// 导出对象
export default {name: '憨瓜',age: 3};
// 导出函数
export default function (…) { … }
export default function name1(…) { … }
export { name1 as default, … };
2、 命名导出
// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// 解构导出并重命名
export const { name1, name2: bar } = o;
注意点
在每一个模块中可以定义多个命名导出,但是只允许有一个默认导出。每种方式对应于上述的一种语法:
三、import 导入方式
1、导入默认值
引入模块可能有一个 default export(无论它是对象,函数,类等)可用。然后可以使用 import 语句来导入这样的默认接口。
import myDefault from '@/idnex.js';
2、单独导入
// 导入单个接口
import {getInfo} from '@/index.js';
// 导入多个接口
import {getInfo, removeInfo} from '@/index.js';
// 导入带有别名的接口
import {reallyReallyLongModuleExportName as shortName} from '@/index.js';
// 导入时重命名多个接口
import {reallyReallyLongModuleMemberName as shortName,anotherLongModuleName as short} from '@/index.js';
3、整体导入
import * as name
语法导入所有导出接口,即导入模块整体
参数
name 参数是“导入模块对象”的名称,它将用一种名称空间来引用导入模块的接口。export 参数指定单个的命名导出
import * as myModule from '@/index.js';
4、仅为副作用而导入一个模块
整个模块仅为副作用而导入,这将运行模块中的全局代码,但实际上不导入任何值。
import '@/index.js';
相关文章
- aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【把数据存到LBS云1/2】
- Javascript验证用户输入URL地址是否正确
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Multiply Two Arrays over a Function in JavaScript
- [WASM] Set up wasm-bindgen for easy Rust/JavaScript Interoperability
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] Multiply Two Arrays over a Function in JavaScript
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Decorators in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] An Introduction to JSPM (JavaScript Package Manager)
- [Javascript] Linting JavaScript with ESLint
- [Javascript] Refactoring: Array.prototype by example [filter, some, forEach]
- [Javascript] Hoisting in JavaScript
- JavaScript学习(一)
- postman测试重定向接口,We're sorry but system-cn doesn't work properly without JavaScript enabled. Please enable it to continue
- JavaScript 运行机制详解:再谈Event Loop
- 92行JavaScript代码实现的类似Excel外观的UI
- 在javascript中重新加载/刷新页面的不同方法
- 从零开始学_JavaScript_系列(16)——CSS<3>(文本、对齐、圆角、盒模型、背景)
- JavaScript--序列化以及转义
- web前端框架Javascript开发基础之JavaScript作用域
- web前端框架Javascript开发基础之JavaScript作用域