ES6 导入导出

ES6 导入导出

ES6引入了原生的模块化支持,使得JavaScript代码可以被划分为可重用的模块。这些模块可以导出部分代码(如函数、对象、类等),并被其他模块导入使用。


export
  1. 命名导出(Named Exports)

可以从模块中导出多个值。每个值的导出都有一个名称。

javascript 复制代码
// file: mathFunctions.js
export const add = (x, y) => x + y;
export const subtract = (x, y) => x - y;
  1. 默认导出 (Default Exports)
javascript 复制代码
// file: MyComponent.js
export default class MyComponent {
  // class definition
}

import - 导入
导入命名导出
  1. 使用花括号{}来导入特定的命名导出。
javascript 复制代码
// file: main.js
import { add, subtract } from './mathFunctions.js';

console.log(add(2, 3)); // 5
  1. 导入默认导出时,不使用花括号,并且可以指定任意名称
javascript 复制代码
// file: App.js
import MyComponent from './MyComponent.js';
  1. 混合导入,可以同时导入默认导出和命名导出
javascript 复制代码
// 假设 MyLibrary.js 中有默认导出和命名导出
import MyLibrary, { someFunction } from './MyLibrary.js';

和上边的导入和导出都不一样的一个例子。

Mock.js 的工作原理与常规的模块导出导入有所不同。当你在文件中引入 Mock.js 并调用 Mock.mock() 方法时,你实际上是在执行一个"全局"操作,它影响的是整个应用的网络请求层。

javascript 复制代码
import Mock from 'mockjs'
Mock.mock('/api/food', {...})

为什么不需要 export

在你的 mock.js 文件中,你并不需要导出任何东西,因为你的目的是执行配置,而非提供可以在其他地方使用的函数或对象。

当你在 main.js 中做了如下引入:

复制代码
javascriptCopy code
import './mock/index'

你实际上是在执行 mock/index.js 文件中的代码,其中包括 Mock.mock() 方法的调用。这些调用在应用启动时执行,从而设置了全局的Mock规则。这就是为什么即使没有 export,它仍然能够生效的原因。

相关推荐
DoraBigHead9 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧2 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程