变量模块化管理：让代码更清晰的实用技巧

变量太多，改起来头疼

做前端开发时，最怕接手一个老项目。打开代码一看，到处都是颜色值、字体大小、间距数值，比如 #333、14px、8px 这些写死在 CSS 里的内容。改个主题色，得翻十几个文件，一个个替换，一不小心就漏掉几个地方。

后端也一样，数据库地址、接口域名、超时时间这些配置散落在不同脚本中。测试环境和生产环境切换靠手动改，上线前总提心吊胆，生怕哪个值没改对。

把变量拎出来统一管

后来我开始把这类重复出现的值集中管理。比如前端项目里建一个 config.js 或 variables.scss 文件，专门放这些常量。

const theme = {
  primaryColor: '#007BFF',
  fontSizeBase: '14px',
  spacingUnit: 8
};

export default theme;

然后在其他组件里引用：

import theme from '@/config/theme';

const Button = () => {
  return (
    <button style={{ color: theme.primaryColor }}>
      点击我
    </button>
  );
};

实际好处不止省事

这样做之后，团队协作顺畅多了。设计师说要把圆角从 4px 改成 6px，我只需要改配置文件里一个值，全项目自动更新。新人加入也不用到处猜哪个颜色是主色调。

后端服务也照着这个思路来。把所有配置抽到 config/ 目录下，按环境分 dev.json、prod.json，启动时自动加载对应文件。再也不用手动改数据库密码了。

小改进带来大变化

有次公司要做节日皮肤，要求整体换成红色调。之前这种需求得加班两天，那次只花了半小时，改完还顺手加了个夜间模式开关。产品经理直呼效率高。

其实没什么高深技术，就是把重复的变量收拢，变成可维护的模块。就像家里收拾衣柜，把同类衣服挂在一起，找起来自然快。

现在新项目一开始，我就先搭配置结构。哪怕刚开始只有三四个变量，也坚持这么做。时间一长，整个项目的可读性和稳定性都上来了。