「全栈开发的10个大坑」：踩过的人都懂，没踩过的迟早要踩

前端达人

发布于 2025-10-09 13:13:38

3200

代码可运行

文章被收录于专栏：前端达人前端达人

运行总次数：0

代码可运行

说在前面的话

昨晚又熬到了凌晨两点，盯着报错信息发呆。

想起刚做开发那会儿，觉得自己啥都能搞，前端后端数据库，样样精通。现在回头看，那时候的我就像个拿着玩具锤子的小孩，看什么都像钉子。

这篇文章记录了我这几年踩过的10个坑，有些现在想起来还会脸红。如果你也在做全栈，或许能帮你少走点弯路。

1. 新技术成瘾，啥都想试试

那时候每天刷技术博客，看到新框架就兴奋得不行。

React刚熟悉一点，Vue3出来了赶紧去学。还没搞明白Vue，又听说Svelte性能更好。结果就是每样都懂一点，但真正用起来哪样都不够深入。

记得有次面试，面试官问React的虚拟DOM原理，我支支吾吾半天说不清楚。明明用了两年React，但只停留在会用API的层面。

现在的想法： 与其东一榔头西一棒子，不如选定一个主技术栈深耕。把底层原理搞透了，学其他的反而更快。

// 以前的学习方式：广而不深
const skills = {
react: "会用useState和useEffect",
vue: "看过文档，写过todo",
angular: "跟着教程写过demo",
svelte: "听说性能很好..."
};

// 现在的学习方式：深耕一个
const skills = {
react: {
    hooks: "深入理解实现原理",
    fiber: "知道调和过程",
    ssr: "能独立搭建Next.js项目",
    testing: "会写完整的测试用例"
  }
};

2. 觉得后端很神秘，不敢碰

刚开始做前端的时候，总觉得后端是高深莫测的东西。数据库、服务器、API设计，感觉都是大牛才能搞的。

有次项目需要对接后端API，接口文档写得不清不楚，我也不好意思去问后端同事具体逻辑。结果前端代码写得乱七八糟，各种if-else判断，最后维护起来特别痛苦。

真正开始学后端后才发现，很多概念其实没那么复杂。HTTP就是请求和响应，数据库就是存数据的地方，认证就是验证用户身份。

转变： 开始自己搭建简单的Node.js服务，用Express写API，慢慢理解了前后端数据流转的过程。现在和后端同事沟通效率高了很多。

3. 代码都是自己写，从不和别人讨论

刚工作那会儿，总觉得自己的代码是艺术品，不愿意让别人看到"不完美"的代码。

直接往main分支推代码，从不提PR。觉得code review就是在找茬，浪费时间。结果写出来的代码只有自己能看懂，过了一个月连自己都看不懂了。

有次线上出了bug，我花了两天才定位到问题。如果当时有人review我的代码，这个低级错误根本不会发生。

改变： 现在每个功能都会开分支，写完后主动找同事review。虽然有时候会被指出问题有点尴尬，但确实帮我避免了很多坑。

// 以前的提交信息
git commit -m "fix bug"
git commit -m "update"  
git commit -m "change stuff"

// 现在的提交信息
git commit -m "fix: resolve user authentication timeout issue"
git commit -m "feat: add pagination component with loading state"
git commit -m "refactor: extract common validation logic to utils"

4. 什么都要自己造轮子

刚学会一点设计模式，就想在项目里都用上。一个简单的状态管理，非要搞个复杂的架构。

最夸张的是，我曾经为了一个显示用户头像的功能，写了200多行代码，包括什么单例模式、工厂模式。同事看了直接说："这不就是一个img标签的事儿吗？"

醒悟： 简单的问题用简单的方法解决。复杂的架构是为了解决复杂的问题，不是为了显示自己很厉害。

5. 觉得测试是浪费时间

以前写代码，都是在浏览器里手动点点测试，觉得自动化测试太麻烦。

直到有次改了一个组件，结果影响了十几个地方，花了一整天才找到所有问题。那时候才意识到，如果有测试用例，5分钟就能发现问题。

开始写测试后发现，测试不仅能发现bug，还能帮我理清代码逻辑，写出更好的代码结构。

// 现在写组件都会配套写测试
describe('LoginForm', () => {
  test('显示用户输入的用户名', () => {
    render(<LoginForm />);
    const input = screen.getByLabelText('用户名');
    fireEvent.change(input, { target: { value: 'testuser' } });
    expect(input.value).toBe('testuser');
  });

  test('提交时调用登录接口', () => {
    const mockLogin = jest.fn();
    render(<LoginForm onLogin={mockLogin} />);
    // ... 测试逻辑
  });
});