JavaScript 模块化怎么用

你平时用手机APP时，会不会发现同一个功能能在不同页面调用？比如外卖APP的“地址选择”，既在下单页用，也在设置页用，不用每次重新做一遍，这就是“模块化”的好处——把重复用的功能拆成独立的“小零件”，需要时直接拿出来用。前端开发里的JavaScript模块化，就是干这个的，今天用生活化的例子讲清它怎么用。

什么是JavaScript模块化？

先举个日常例子：你家里的工具箱，螺丝刀、扳手、卷尺各放一个盒子，而不是把所有工具堆在一起。前端代码就像一堆工具，写在一起的话，比如用户登录的代码和商品计算的代码混着，改登录功能时容易不小心搞坏计算功能，别人看代码也找不到重点。模块化就是把“工具”拆成独立的小文件：比如login.js（登录功能）、calc.js（商品计算），每个文件只负责自己的事，需要用的时候“拿出来”就行，既好管理，也能重复用。

最常用的两种模块化用法

现在前端常用的有两种，不用记复杂术语，看例子就懂：

浏览器原生的ESM（适合普通网页）

这种是浏览器自带的，不用装额外工具，适合做小网站。比如做一个购物网页，有“商品价格计算”的功能，把计算逻辑写在price.js里：

`javascript

// price.js里只写价格计算的逻辑

export function calcTotal(price, count) {

return price * count;

}

`

需要在首页用这个功能时，在首页的index.js里“导入”它：

`javascript

// index.js里导入price.js的计算函数

import { calcTotal } from './price.js';

// 用函数算总价：商品100元，买3个，总价是300

console.log(calcTotal(100, 3));

`

最后在网页的HTML里，给引入JS的<script>标签加type="module"，浏览器就知道是用模块化的方式读文件了，不会报错。

Node.js的CommonJS（适合后端/工具脚本）

如果是用Node.js做服务器、或者前端的构建工具，就用这个。比如做一个批量整理图片的脚本，把图片压缩的逻辑写在compress.js：

`javascript

// compress.js里写压缩逻辑，用module.exports导出

module.exports = function compressImage(img) {

return img + '_compressed'; // 压缩后加后缀，模拟效果

}

`

在主脚本main.js里导入用：

`javascript

// main.js里导入压缩函数

const compress = require('./compress.js');

// 压缩一张图，结果是'风景图_compressed'

console.log(compress('风景图'));

`

这种方式适合需要本地跑的脚本，比原生ESM灵活，不用浏览器环境也能跑。

用模块化的好处

还是用工具箱的例子：如果所有工具堆在一起，找螺丝刀要翻半天，还可能碰掉扳手；拆分后，螺丝刀的盒子里只有螺丝刀，找的时候一秒就拿，还不会碰坏其他工具。放到前端里，模块化的好处是：改login.js的登录验证，不会影响calc.js的价格计算；做新网站时，直接把之前写好的price.js拿过来用，不用重新写；多人合作时，你管login.js，他管calc.js，不会互相改乱对方的代码，效率高很多。

注意的小细节

用的时候别踩小坑：如果是ESM，文件后缀必须写.js，不能省略，不然浏览器不认；如果是CommonJS，导入的路径要对，别写错文件名，不然会提示“找不到文件”。比如price.js放在和index.js同个文件夹，路径就是./price.js，如果在子文件夹里，要写./utils/price.js。

现在你再做前端时，遇到重复的功能，就像整理工具箱那样拆成模块，代码会清爽很多，也不容易出问题。