type
status
date
tags
category
icon
password

为什么需要模块化

当前端工程到达一定规模后,就会出现下面的问题:
  • 全局变量污染
  • 依赖混乱
上面的问题,共同导致了代码文件难以细分
模块化就是为了解决上面两个问题出现的
模块化出现后,我们就可以把臃肿的代码细分到各个小文件中,便于后期维护管理

前端模块化标准

前端主要有两大模块化标准:
  • CommonJS,简称CMJ,这是一个社区规范,出现时间较早,目前仅node环境支持
  • ES Module,简称ESM,这是随着ES6发布的官方模块化标准,目前浏览器和新版本node环境均支持
notion image

CommonJS如何实现模块化

node天生支持CommonJS模块化标准
node规定:
  1. node中的每个js文件都是一个CMJ模块,通过node命令运行的模块,叫做入口模块
  1. 模块中的所有全局定义的变量、函数,都不会污染到其他模块
  1. 模块可以暴露(导出)一些内容给其他模块使用,需要暴露什么内容,就在模块中给module.exports赋值
  1. 一个模块可以导入其他模块,使用函数require("要导入的模块路径")即可完成,该函数返回目标模块的导出结果
    1. 导入模块时,可以省略.js
    2. 导入模块时,必须以./../开头
  1. 一个模块在被导入时会运行一次,然后它的导出结果会被node缓存起来,后续对该模块导入时,不会重新运行,直接使用缓存结果
 
Promise网络
Loading...
杨敢敢
杨敢敢
一个普通的干饭人🍚
Latest posts
ReactivityApi
2025-3-8
vite的原理
2025-3-8
ES Module
2025-3-8
网络
2025-3-8
CommonJS
2025-3-8
Promise
2025-3-8
Announcement
🤖 本博客运行状态播报
「前端代码持续乱炖中,不定期揭盖撒点新调料~」
✨ 功能更新:
  • 本周新增《摸鱼学导论》彩蛋按钮(开发者已掉3根头发)
  • 页面动画效果:假装加载很快的样子✨
🚨 高危预警:
评论区开放「野生bug收容所」👉 来帮我抓虫/投喂技术冷笑话/用表情包远程撸猫
(小声:下次更新可能是明天,也可能是下辈子👻)