前端项目问题import 之命名导出/默认导出

今天突然收到业务反映,系统的图片无法预览了. 我就赶快查看服务器各服务状态:

1.后端代码返回结果正常

2.前后端服务器服务运行正常

3.图片服务器运行也正常

4.前端图片展示异常

排查问题:图片组件的js没有正常发挥作用.ps:因问题已被处理,这里无法贴图.

问题定位:throttle 组件没有正确使用,原代码如下

import throttle from "element-ui/node_modules/throttle-debounce";

经过是命名导出和默认导出混淆导致的错误.立马修改为下列代码.也就是加了一组{}

import {throttle} from "element-ui/node_modules/throttle-debounce";

解决的关键:本来该组件有很多功能,但没加{},只能使用默认功能.加了{}就像开了vip,解锁了所有功能.

现在问题解决了,我们来复盘知识:

1.什么是命名导出/默认导出?

2.使用命名导出/默认导出的好处?

通过合理使用默认导出和命名导出，可以构建清晰、可维护的模块化代码结构。

大白话就是避免重复造轮子.个人理解.

知识扩充:

ES6 Modules 基本概念

ES6 模块（ESM）是 JavaScript 中的模块标准，允许你将代码分割成不同的模块单元，并在需要时导入它们。模块的导出和导入是模块系统的核心特性。

最后,希望大家开发的时候都不要粗心,养成良好的习惯,不要像A同学一样.