js的导入导出

js 的导入导出

在 JavaScript 中,可以使用 import 关键字来导入其他模块或文件。而使用 export 关键字则可以将变量、函数等内容从当前模块导出供其他地方引用。

下面是一些示例代码

导入模块:

// 导入名为 "module" 的模块
import module from './path/to/module';
 
// 导入多个模块
import { functionA, variableB } from './path/to/anotherModule';
 
// 重命名导入的模块
import { functionC as func } from './path/to/yetAnotherModule';

//以*as foo 的方式全部使用
import * as foo  from './foo.js'

导出变量或函数:

// 导出单个变量
export const myVariable = 'Hello World!';
 
// 导出默认值(只能有一个),且导出的是值
export default function() {
    console.log('This is a default exported function');
}
 
// 导出多个变量或函数
export function functionA() {}
export var variableB;

//在{}中做统一导出
//{}不是一个对象,其中放置要导出的变量的引用列表
export {name,age,hello}

//以别名的方式导出
export {
  name as BName,
  age as BAge,
  hello as Bhello
}

### JavaScript 中模块的导入和导出 #### 使用 `export` 导出模块内容 为了使某个脚本文件成为可被其他文件使用的模块,可以利用 `export` 关键字来暴露函数、类、变量或其他声明给外部使用。例如,在一个名为 `info.js` 的文件里定义了一些属性: ```javascript // info.js const name = "Alice"; const age = 25; const height = 168; export { name, age, height }; ``` 这段代码展示了如何创建一个简单的对象,并将其成员作为公共API的一部分公开出去[^1]。 #### 使用 `import` 加载模块 当希望在一个新的上下文中使用这些已发布的组件时,则可以通过 `import` 来获取它们。假设有一个叫做 `main.js` 的入口文件,它会像这样加载来自 `info.js` 的数据: ```javascript // main.js import { name, age, height } from "./info.js"; console.log(`${name}, ${age} years old, is ${height}cm tall.`); ``` 这里说明了怎样精确地选取所需的部分而不会引入不必要的全局命名空间污染。 对于整个模块的功能性调用也十分简单,只需指定路径即可完成自动化的初始化过程: ```javascript // m4.js for (let i = 0; i < 3; i++) { console.log(i); } // 另一文件中直接执行该模块内的逻辑而不必关心具体实现细节 import './m4.js'; ``` 此片段体现了即使不显式提取任何特定项也能让目标脚本按需运行的效果[^2]。 另外一种常见的方式是在 HTML 文档内部通过 `<script>` 标签标记为 `type="module"` 后嵌入上述任意一段 JS 脚本来触发相应行为: ```html <script src="info.js" type="module"></script> <script src="main.js" type="module"></script> <!-- 或者 --> <script type="module"> import { someFunction } from './someModule.js'; </script> ``` 这种方式允许开发者更灵活地管理依赖关系以及优化资源加载策略。 值得注意的是,ESM(ECMAScript Modules)标准下的模块机制不同于 CommonJS 规范下 Node.js 所采用的那种基于同步 I/O 的方式;后者通常借助于 `require()` 函数来进行静态分析前后的动态解析操作[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值