健仔的百宝箱技术栈改革：一次彻底的现代化升级

前不久，我决定对健仔的百宝箱做一次彻底的技术栈改革。不是小修小补，而是从底层到表现层、从前端到后端的全面现代化升级。这篇文章就是这次改革的全程记录——改了哪些、为什么改、怎么改的、最终效果如何。

为什么需要一场大改革？

网站从 V0.0.1 开始，一直是纯 PHP + SQLite 手写。功能越来越多，代码也越来越臃肿。几十个函数堆在一个文件里、内联样式满天飞、JavaScript 还是古老的 var 写法——虽然跑得挺好，但作为开发者，心里始终有个疙瘩：这代码经不起推敲。

于是趁着项目还不算太大，做了一次彻底的「还债」。原则只有三条：不改 SQLite、不引入框架、不动 OA 系统和论坛。只聚焦博客网站本身。

第一刀：PHP — 从函数堆到面向对象

这是改动最大的一块。原先的 PHP 代码是典型的「过程式堆积」——一堆全局函数、零散的定义、htmlspecialchars 到处写。这次全部按现代 PHP 8.2 标准重写：

• 严格类型 — 每个文件开头加上 declare(strict_types=1)，参数和返回值全部声明类型，再也不会出现「字符串当数字用」的诡异 bug
• 命名空间 + 自动加载 — 所有类统一放在 App\ 命名空间下，通过 spl_autoload_register 自动加载，告别 require_once 满天飞
• 八大核心类 — 拆出了 Config、Database、Security、PostRepository、ChangelogRepository、CategoryRepository、TagRepository、SettingsRepository，各司其职
• 匹配表达式 — switch 全部换成 match，代码更紧凑、逻辑更清晰
• 统一 API — 所有接口统一 JSON 格式响应，错误处理和鉴权逻辑集中管理

第二刀：CSS — 从内联到级联层

原先的 CSS 来自 Discuz 时代的遗留风格，类名混乱、内联样式到处都是。这次全部推倒重来：

• @layer 级联层 — 用 CSS @layer 把样式按优先级分层，彻底解决样式覆盖问题
• BEM 命名规范 — 所有新类名统一采用 Block__Element--Modifier 风格，看名字就知道是哪个模块的什么元素
• 移除 Discuz 遗留风格 — 清理了所有 Div+CSS 时代的旧样式，体积减少约 40%
• 提取内联样式 — 所有 style="..." 全部替换为语义化的 CSS 类，HTML 干净了、维护也方便了
• Container Queries — 用容器查询替代部分媒体查询，组件可以根据自身宽度自适应，布局更灵活

第三刀：JavaScript — 从 var 到 ES6

JavaScript 的改动相对温和，但同样彻底：

• const / let — 所有 var 全部替换为 const 和 let，块级作用域不再担心变量泄漏
• 箭头函数 — 传统 function 全部改为箭头函数，代码更简洁、this 绑定更可控
• async / await — 异步操作全部用 async/await 重写，告别回调地狱
• 模板字面量 — 字符串拼接换成反引号模板，动态内容拼接一目了然
• 可选链 — 用 ?. 代替层层 if 判空，代码量减少一半

第四刀：兼容层与版本管理

改革最大的难题是兼容性。原有的 version.php 提供了几十个函数给 OA 系统和论坛调用，全部改掉会导致它们崩溃。所以特地保留了一层兼容层：

• 旧函数名全部保留，内部改为调用新类的方法
• 新增 version.php 作为统一入口，新旧代码各取所需
• 版本号统一管理，changelog 版本 V0.2.4 记录了全部改动细节

这个名字是不是听起来很熟悉？对，跟 PHP 的兼容策略一个思路——新代码用新 API，老代码继续用老 API，互不干扰。

改完之后的效果

全部改完大概花了几天时间，涉及 20+ 个文件。最终的效果：

什么没变？

这次改革虽然动作大，但核心哲学纹丝不动：

• SQLite — 依然是唯一的数据库，零运维、零配置
• 零框架 — 没有 Composer、没有 npm、没有 Webpack，全部手写
• 1核1G — 依然是那台雨云香港服务器，跑得稳稳的
• 无编译 — 改完代码刷新就能看到效果，开发效率极高
• PWA — 依然可以安装到手机主屏幕，离线也能访问

写在最后

这次技术栈改革，本质上是一次「还债」——把早期赶进度时欠下的技术债一次性还清。虽然过程挺折腾，但改完之后的代码质量和开发体验完全是两个世界。

如果你也在维护一个自己写的项目，不妨找个机会做一次类似的清理。不需要大动干戈，从加一个 declare 语句、替换一个 var 开始就好。代码和人一样，定期收拾收拾，精神面貌完全不一样。

—— 健仔