原文地址：javascript.plainenglish.io/how-to-beco…
原文作者：Superbinary
前言
近年来，前端发展的十分迅速，SPA 的流行使得前端工程师变得越来越重要。在许多场景下，前端的复杂度和难度已经超过了后端。但是伴随着快速的发展，前端也逐渐暴露出了许多问题。众所周知，前端开发人员很少谈论程序设计原则或者设计思路。这无疑会使得前端代码被写的越来越杂乱。在基于类 MVVM 框架的开发模式的前提下，前端代码自然地以组件形式进行抽象，但仍十分杂乱。如果是在刀耕火种的 MVC 时代，这会变得更加无法想象。
一个同事负责的前端项目经常爆出 bug，已经到达了修复 1 个 bug 引入 3 个 bug 的程度，且许多问题不能够被定位出来。我问我同事为什么会出现这样的情况，得到的回答是这个项目太过于复杂了。出于好奇，我看了下这个项目，发现代码十分杂乱。除了这个项目的作者，应该不会有人可以或者愿意去接手这个项目，未来肯定只能聘请一个新人去从 0 重构这个项目，甚至一行代码都不能够被复用。
让我们学习如何像这个同事一样，在公司中成为无法被替代的人才。
精华教程
拒绝使用 TypeScript
绝对不要使用 TypeScript，甚至将使用 TS 编写的项目重构成 JS。
拒绝使用 Hooks
所有的组件都使用类式组件来编写，拒绝使用函数组件，并且拒绝使用 Hooks。
全面拥抱状态管理器
所有的状态都通过像 Redux 或者 Mobx 的状态管理器来管理。
模块不进行抽象和复用
所有的功能都从 0 实现，没有公共的组件被抽象出来，频繁出现的逻辑没有抽象成 hooks，没有工具类函数被抽象，也没有逻辑被复用。
碎片化的 JSX 结构
直接在 JSX 中写很长的函数和复杂的参数，乍一看十分碎片化，并且不可能在脑海里构建出完整的页面。
写很长很长的组件
一整个页面只写一个组件来维护，单个组件的代码行数很容易可以写到 1000 多行。
父子组件传递多个参数，传递尽可能多的层
父组件传递许多参数给子组件，并且子组件继续一层一层的传递这些参数下去。
单文件开发
把状态、数据、工具类函数、网络请求、组件等都放在一个文件中。
打破文件组织结构和组件组织结构的关系
虽然组件自然是多树结构，但是对应的文件都平铺到一层。
不要封装网络请求方法
每次请求都创建一个新的 Axios 实例，网络请求错误没有统一进行拦截，并且各自进行捕获。
代码风格混合并且强制覆盖
内联样式和 CSS 文件样式混合并覆盖。随意取类名，并且这些类名不透露出结构信息。一样的 CSS 代码是直接复制粘贴到每个类中。如果遇到样式冲突，则强制覆盖另一层。
到处修改 UI 组件库的内置样式
为了符合设计要求，UI 组件库的内置 CSS 样式可以通过暴露出来的类名被强制覆盖，并更多的使用 !important。
使用 JavaScript 来代替 CSS 可以实现的效果
绝对不使用伪类和伪元素，并且动画转换等效果一定要通过 JS 来实现。
到处使用微前端
尽可能的将页面拆分成单功能的微前端应用。
不争论需求
对产品和设计提出的要求全部接受，并尝试实现交互的复杂、混乱、繁琐的功能，以此来获取技术成就感，成为一个不挑食的小白兔。
收益
- 每次提交上线的时候，产品、测试、后端都会作为鼓励者围绕在你身边，以免事故的发生。
- 老板对你印象深刻，经常处理一些紧急的问题，表扬你十分勤奋不偷懒，工作到很晚，周报上经常写满了内容。
- 在公司的地位是不可动摇的。除了你没有人有能力或者愿意去接手这个项目。他们只可以给你钱，以防你离职。
如果你有更多的 tips，欢迎你在评论区留言，让每个人都学习到。
译者 PS
Just a joke ~ 希望通过这种讽刺的方式让大家回顾下自己写的代码。
