一、前言

近年来，前端发展非常迅速，SPA的繁荣让前端工程越来越重要。在很多场景下，前端的复杂度和难度已经超过了后端。但随着高速发展，前端也逐渐暴露出很多问题。

有的程序员负责的前端项目频频爆出bug，已经达到了修复1个bug产生3个bug的程度，甚至很多bug都无法定位。除了作者本人，应该没有人能够或者愿意接手这个项目，未来的命运只能是招新人从0重构，甚至一行代码都不能引用。

让我们学习一下如何在这个内卷时代成为一个不可或缺的前端程序员。

二、教程分享

拒绝使用TypeScript

坚决不使用 TypeScript，甚至将 TypeScript 编写的项目重构为 JavaScript 代码。

拒绝使用Hooks

所有组件都使用Class组件，拒绝函数组件，拒绝钩子。

没有模块抽象和重用

每个功能都是从 0 开始实现的，不抽象公共组件，不抽象频繁出现的逻辑为钩子，不抽象实用功能，不重用逻辑，简单来说就是全部重新造轮子，不适用任何现成的组件。

混乱的 JSX 结构

直接在 JSX 上写冗长的函数和复杂的参数，乍一看至少需要非常碎片化，完全不可能在脑海中构建一个页面。

组件里面写特别长的代码

只写一个组件就可以维护一整页，单个组件的代码行数可以轻松写到1000多行。不超过一千行的文件不是不提交。

父子组件传递多个参数，传递尽可能多的层

父组件将很多参数传递给子组件，然后子组件继续将这些参数一层一层向下传递。

单文件开发

将状态、数据、类型、实用功能、网络请求、组件等全部放入一个文件中。

打破文件组织结构与组件结构的关系

虽然组件自然是多树结构，但是对应的文件都平铺到了1层，没有任何逻辑的文件结构。除了自己，其他人都看不懂。

不封装网络请求函数

每个请求都创建一个新的axios实例，网络请求错误不统一拦截，全部单独捕获。

风格混合和强制覆盖

内联样式与 CSS 文件样式混合并覆盖。类名可以任意选择，不泄露结构信息。相同的 CSS 代码直接复制粘贴到每个类上。如果遇到样式冲突，则强制覆盖另一层。

到处修改UI组件库的内部样式

为满足设计需求，通过导出类名强行覆盖UI组件库内部CSS样式，更多使用!important魔法。

使用JavaScript代替CSS来实现效果

伪类伪元素是绝对不用的，动画转场等效果也必须通过JavaScript来实现。

随处使用微前端

尽可能将页面拆分成单个功能的微前端应用。

不要争论需求

充分接受产品或设计给出的要求，尝试实现交互的复杂、混乱、繁琐的功能，获得技术成就感，做一只不挑食的小白兔。

三. 收益

1. 每次提交上线，产品测试后台都会围绕在你身边作为鼓励者，以免出现生产事故。估计每个人都会变成程序员鼓励师，鼓励你，还排出现错误。
2. 老板对你印象很深，总是处理急事，夸你勤奋不偷懒，下班迟到，周报总是满满当当，反正你的代码别人也看不懂，自己也看不懂，估计其他人也改不了。
3. 公司的地位不可动摇。除了你，没有人有能力或愿意承担这个项目。他们只能给你钱，生怕你离开。