import/export：前端模块化实战｜JS 基础语法与数据操作篇

【ES Modules】前端模块化实战从代码拆分逻辑到落地实操彻底搞懂import/export的最佳写法避开模块化高频坑 文章目录一、先体验一下没有模块化有多难受1.1 一个真实的场景1.2 模块化能做到的三件事二、import / export 基础2.1 先搞懂 export导出2.2 再搞懂 import引入三、完整的可运行示例3.1 项目结构3.2 完整代码可直接复制3.3 怎么运行四、这一套结构在解决什么问题4.1 utils通用纯函数4.2 api请求层4.3 composables可复用逻辑4.4 constants常量与配置五、常见坑六、小结 系列模块导航 API 与异步请求规范 系列总览同学们好我是 Eugene尤金一个拥有多年中后台开发经验的前端工程师~Eugene 发音很简单/juːˈdʒiːn/大家怎么顺口怎么叫就好你是否也有过明明学过很多技术一到关键时候却讲不出来、甚至写不出来你是否也曾怀疑自己是不是太笨了明明感觉会却总差一口气就算想沉下心从头梳理可工作那么忙回家还要陪伴家人。一天只有24小时时间永远不够用常常感到力不从心。技术行业本就是逆水行舟不进则退。如果你也有同样的困扰别慌。从现在开始跟着我一起心态归零利用碎片时间来一次彻彻底底的基础扫盲。这一次我们一起慢慢来扎扎实实变强。不搞花里胡哨的理论堆砌只分享看得懂、用得上的前端干货咱们一起稳步积累真正摆脱“面向搜索引擎写代码”的尴尬。一、先体验一下没有模块化有多难受1.1 一个真实的场景假设你要做一个「用户列表」页面需要格式化日期调用用户列表接口显示加载中状态如果全写在一个文件里大概是这样的!-- index.html --!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title用户列表/title/headbodydividapp/divscriptsrc./app.js/script/body/html// app.js - 所有逻辑全塞在一起有 100 多行constAPI_BASE/api;constlist[];letloadingfalse;functionformatDate(date){returnnewDate(date).toLocaleDateString(zh-CN);}functiongetUserList(){loadingtrue;fetch(API_BASE/user/list).then(resres.json()).then(data{listdata;// 注意这里 list 是 const会报错变量多了容易搞混loadingfalse;});}// 假设还有 10 个其他函数...// 三个月后你回来改 bug根本找不到 formatDate 在哪...问题很快就出来了变量、函数全混在一起改一处容易影响别处formatDate如果别的页面也要用只能复制粘贴文件越来越长找个函数要翻很久模块化要解决的就是这三个问题。⬆ 返回目录1.2 模块化能做到的三件事隔离每个文件有自己的作用域不互相污染依赖清晰用import明确「谁用了谁」可维护按职责拆文件找代码、改代码都更轻松后面我们就用ES Modulesimport/export来做这件事。⬆ 返回目录二、import / export 基础2.1 先搞懂 export导出两种常见用法方式一命名导出一个文件可以导出多个// utils/format.jsexportfunctionformatDate(date){returnnewDate(date).toLocaleDateString(zh-CN);}exportfunctionformatMoney(num){return¥${num.toFixed(2)};}方式二默认导出一个文件只能有一个 default// config.jsexportdefault{apiBase:/api,timeout:5000,};命名导出可以导出很多个import时要用同名默认导出只有一个import时可以随便起名字⬆ 返回目录2.2 再搞懂 import引入// 引入命名导出名字必须和 export 的一致import{formatDate,formatMoney}from./utils/format.js;// 引入默认导出名字可以随便起importconfigfrom./config.js;console.log(config.apiBase);// /api// 把整个模块当作对象引入import*asformatUtilsfrom./utils/format.js;formatUtils.formatDate(newDate());记住一个区别写法含义import { foo }引入命名导出{}是语法不是解构import foo引入默认导出⬆ 返回目录三、完整的可运行示例下面是一个最小可运行项目涵盖utils、api、constants、composables可以直接照抄跑起来。3.1 项目结构my-project/ ├── index.html ├── package.json ├── vite.config.js └── src/ ├── main.js # 入口 ├── constants/ │ └── index.js # 常量 ├── utils/ │ ├── format.js # 格式化 │ └── index.js # 统一导出 ├── api/ │ ├── request.js # 请求封装 │ ├── user.js # 用户接口 │ └── index.js # 统一导出 ├── composables/ # Vue 组合式函数可复用逻辑 │ └── useUserList.js └── App.vue # 根组件⬆ 返回目录3.2 完整代码可直接复制1. package.json{name:module-demo,version:1.0.0,type:module,scripts:{dev:vite},dependencies:{vue:^3.4.0,axios:^1.6.0},devDependencies:{vite:^5.0.0,vitejs/plugin-vue:^5.0.0}}2. index.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title用户列表 - 模块化示例/title/headbodydividapp/divscripttypemodulesrc/src/main.js/script/body/html3. src/constants/index.js// 常量放那些「写死不变」的值以后改起来只改这一处exportconstAPI_BASE/api;exportconstTIMEOUT10000;// 订单状态用常量代替魔法数字 0、1、2、3exportconstORDER_STATUS{PENDING:0,PAID:1,SHIPPED:2,COMPLETED:3,};exportconstORDER_STATUS_TEXT{0:待支付,1:已支付,2:已发货,3:已完成,};4. src/utils/format.js// 纯函数同样的输入一定得到同样的输出不依赖外部状态exportfunctionformatDate(date,options{}){if(!date)return-;returnnewDate(date).toLocaleDateString(zh-CN,{year:numeric,month:2-digit,day:2-digit,...options,});}exportfunctionformatMoney(num){if(numnull||isNaN(num))return¥0.00;return¥${Number(num).toFixed(2)};}exportfunctionformatPhone(phone){if(!phone||phone.length!11)returnphone;return${phone.slice(0,3)}****${phone.slice(7)};}5. src/utils/index.js// 统一导出别人只需要 import from /utils 就能拿到所有工具export{formatDate,formatMoney,formatPhone}from./format.js;6. src/api/request.jsimportaxiosfromaxios;import{API_BASE,TIMEOUT}from../constants/index.js;// 创建一个配置好的 axios 实例所有请求都走它constrequestaxios.create({baseURL:API_BASE,timeout:TIMEOUT,});// 响应拦截器统一处理错误和数据结构request.interceptors.response.use((res)res.data,// 直接返回 data调用方少写一层(err){if(err.response?.status401){console.warn(未登录请先登录);// 实际项目跳转登录页}returnPromise.reject(err);});exportdefaultrequest;7. src/api/user.jsimportrequestfrom./request.js;// 每个函数对应一个接口参数和返回值一目了然exportfunctiongetUserList(params{}){returnrequest.get(/user/list,{params});}exportfunctiongetUserDetail(id){returnrequest.get(/user/${id});}8. src/api/index.jsexport*from./user.js;// 以后有 order.js再加一行export * from ./order.js;9. src/composables/useUserList.jsimport{ref,watch}fromvue;import{getUserList}from../api/index.js;// 把「拉列表 loading error」抽成组合式函数任何组件都能复用exportfunctionuseUserList(params{}){constlistref([]);constloadingref(false);consterrorref(null);asyncfunctionfetchList(){loading.valuetrue;error.valuenull;try{constresawaitgetUserList(params);list.valueres.data||res;}catch(err){error.valueerr.message;}finally{loading.valuefalse;}}// 当 params 变化时重新请求watch(()[params.page,params.pageSize],()fetchList(),{immediate:true});return{list,loading,error,fetchList};}10. src/App.vuetemplatedivv-ifloading加载中.../divdivv-else-iferror出错了{{ error }}/divdivv-elsestylepadding:20pxh1用户列表/h1ulliv-foruser in list:keyuser.id{{ user.name }} - 注册时间{{ formatDate(user.createdAt) }}/li/ul/div/templatescriptsetupimport{useUserList}from./composables/useUserList.js;import{formatDate}from./utils/index.js;const{list,loading,error}useUserList({page:1,pageSize:10});/script11. src/main.jsimport{createApp}fromvue;importAppfrom./App.vue;createApp(App).mount(#app);12. vite.config.jsimport{defineConfig}fromvite;importvuefromvitejs/plugin-vue;exportdefaultdefineConfig({plugins:[vue()],});⬆ 返回目录3.3 怎么运行cdmy-projectnpminstallnpmrun dev浏览器打开http://localhost:5173即可接口需自行 mock 或接真实后端。⬆ 返回目录四、这一套结构在解决什么问题4.1 utils通用纯函数职责格式化、校验、防抖节流等和业务无关的函数原则尽量纯函数不依赖接口、路由、业务状态示例formatDate、formatMoney、isValidPhone⬆ 返回目录4.2 api请求层职责封装 axios/fetch按业务拆接口文件原则只负责发请求、返回数据不写业务判断示例getUserList、getUserDetail⬆ 返回目录4.3 composables可复用逻辑职责把「请求 loading error」等可复用逻辑抽成组合式函数原则只在多处复用时抽不要过度抽象示例useUserList、useDebounce⬆ 返回目录4.4 constants常量与配置职责状态码、业务码、环境配置等原则只放常量不放逻辑示例ORDER_STATUS、API_BASE⬆ 返回目录五、常见坑坑建议utils 里写业务逻辑工具函数只做通用处理不依赖具体业务api 层写业务判断api 只管请求和错误业务逻辑在组件/composable 里魔法数字状态码、业务码用常量如ORDER_STATUS.PENDINGwatch 依赖写错watch的监听源要写对否则会多请求或漏更新ref 忘记 .value在 script 里访问 ref 要加.value模板中自动解包循环依赖保持单向依赖constants → api → composables → 组件⬆ 返回目录六、小结模块化的目的就三点职责清晰、依赖明确、好维护。先按 utils、api、composables、constants 这几类把代码分好再按项目规模慢慢细化不必一上来就设计得很复杂。⬆ 返回目录 系列模块导航 JS 基础语法与数据操作一、《var/let/const变量与作用域实战选型JS 基础语法与数据操作篇》二、《this、箭头函数与普通函数前端实战避坑指南 | JS 基础语法与数据操作篇》三、《对象解构赋值接口数据解包 10 个实战写法JS 基础语法与数据操作篇》四、《map/filter/reduce数组10个常用实战操作JS 基础语法与数据操作篇》五、《find/some/every/includes数组查找与判断实战用法JS 基础语法与数据操作篇》六、《sort/localeCompare对象数组排序与分组实战JS 基础语法与数据操作篇》七、《模板字符串 /split/join/ 正则字符串处理实战JS 基础语法与数据操作篇》八、《Date/dayjs日期时间处理实战JS 基础语法与数据操作篇》九、《try/catch/Promise前端错误处理实战JS 基础语法与数据操作篇》十、《import/export前端模块化实战JS 基础语法与数据操作篇》 跟着系列慢慢学把技术功底扎扎实实地打牢 系列总览前端体系化学习完全体基础 → 规范 → 架构 → 大厂面试四套系列、百余篇高质量实战文从入门到进阶一站式补齐前端核心能力前端基础实战系列 《前端基础实战JS/TS与Vue体系化扫盲47 篇完整目录 避坑》前端规范实战系列工程化编码规范 API / 交互 / 组件统一标准持续更新中前端架构实战系列聚焦工程化、性能优化、可维护架构、中后台体系设计规划中前端大厂面试系列覆盖高频考点、手写题、项目深挖、简历与面试技巧规划中每个系列完结后都会整理成一篇完整导航文并附上直达链接方便大家按顺序、体系化学习。全套内容持续更新中敬请期待⬆ 返回目录学习本就是一场持久战不需要急着一口吃成胖子。哪怕今天你只记住了一点点这都是实打实的进步。后续我还会继续用这种大白话、讲实战方式带大家扫盲更多前端基础。关注我不迷路咱们把那些曾经模糊的知识点一个个彻底搞清楚。如果你觉得这篇内容对你有帮助不妨点赞收藏下次写代码卡壳时拿出来翻一翻比搜引擎更靠谱。我是 Eugene你的电子学友我们下一篇干货见