了解 JavaScript 中的导出和导入-js教程-PHP中文网

了解 JavaScript 中的导出和导入

碧海醫心

发布： 2024-10-26 19:21:02

转载

554人浏览过

了解 javascript 中的导出和导入

在 javascript 中，模块是独立的代码单元，可以使用导出将资产公开给其他模块，并使用导入使用其他模块的资产。这种机制对于在现代 javascript 应用程序中构建模块化和可重用的代码至关重要。

默认导出

一个模块只能有一个默认导出。
要导出默认资源，请在导出的实体之前使用 default 关键字。
要导入默认导出，可以直接将其分配给变量，而无需指定导出名称：

// exporting a default asset
export default function greet(name) {
  console.log(`hello, ${name}!`);
}

// importing the default export
import greet from './mymodule';

登录后复制

命名导出

一个模块可以有多个命名导出。
要导出命名资产，请在导出的实体之前使用导出关键字并为其命名。
要导入命名导出，您必须指定要导入的资产的名称：

// exporting named assets
export function greet(name) {
  console.log(`hello, ${name}!`);
}

export function farewell(name) {
  console.log(`goodbye, ${name}!`);
}

// importing named exports
import { greet, farewell } from './mymodule';

登录后复制

结合默认导出和命名导出

立即学习“Java免费学习笔记（深入）”；

您可以在单个模块中同时拥有默认导出和命名导出：

export default function greet(name) {
  console.log(`hello, ${name}!`);
}

export function farewell(name) {
  console.log(`goodbye, ${name}!`);
}

登录后复制

要导入默认导出和命名导出：

PowerLib图书馆门户小程序

前后端完整代码包括本馆动态，新书来了，书籍榜单，服务指南，进馆预约，活动讲座预约等功能，采用腾讯提供的小程序云开发解决方案，无须服务器和域名预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项预约凭证：支持线下到场后校验签到/核销/二维码自助签到等多种方式详尽的预约数据：支持预约名单数据导出Excel，打印

查看详情

import greet, { farewell } from './mymodule';

登录后复制

要记住的要点

导出用于公开模块中的资产。
import 用于消耗其他模块的资源。
一个模块只能有一个默认导出。
命名导出可以单独或集体导入。
用于导入的名称是任意的，不必与导出模块中使用的名称匹配。

实际示例

考虑一个 react 组件：

import react from 'react';

export default function greeting({ name }) {
  return <h1>hello, {name}!</h1>;
}

登录后复制

在此示例中，greeting 组件被导出为默认导出。可以导入并在其他组件中使用：

import Greeting from './Greeting';

function MyComponent() {
  return <Greeting name="Alice" />;
}

登录后复制

通过了解导出和导入，您可以有效地组织和重用 javascript 项目中的代码。

以上就是了解 JavaScript 中的导出和导入的详细内容，更多请关注php中文网其它相关文章！