前端开发人员应学习的十件事：前端必看-如何成为公司里不可替代的前端大牛

前端开发人员应学习的十件事：前端必看-如何成为公司里不可替代的前端大牛全局状态所有状态都通过 Redux 或 Mobx 等状态管理器进行管理。没有模块抽象和重用每个功能都是从 0 开始实现的，不抽象公共组件，不抽象频繁出现的逻辑，不抽象实用函数，不重用逻辑。拒绝Hook所有组件都使用Class组件，拒绝函数组件，拒绝使用任何Hook。所以，让我们学习如何才能像这位同事一样，在公司中成为不可替代的人才。以ReactJS为例：精华教程拒绝任何类型系统坚决不使用 TypeScript，甚至将 TypeScript 编写的项目重构为 JavaScript 代码。

兄弟们，想知道如何在公司站稳脚跟，成为不可替代的人么？这篇文章给你答案。

现实背景

近年来，前端发展非常迅速，SPA，前后端分离架构的繁荣让前端工程越来越重要。在很多场景下，前端的复杂度和难度已经超过了后端。众所周知，前端从业者很少谈及程序设计原则，设计思路或设计模式。这不可避免地导致前端代码被写成一坨一坨的东西。虽然现在基本上都是基于类似MVVM框架开发，而且前端代码也有组件及抽象，依然写成翔。如果是刀耕火种的MVC时代，更是难以想象。

我有一个同事负责的前端项目频繁爆出bug，已经达到了修复1个bug产生3个bug的程度，甚至很多bug都定位不出来。我问同事为什么，答案是项目比较复杂。出于好奇，我浏览了这个项目的代码，发现这项目是典型的狗屎代码。除了作者本人，应该没有人能够或者愿意接手这个项目，未来的命运只能是招新人从0重构，甚至一行代码都不能引用。

所以，让我们学习如何才能像这位同事一样，在公司中成为不可替代的人才。以ReactJS为例：

精华教程

拒绝任何类型系统
坚决不使用 TypeScript，甚至将 TypeScript 编写的项目重构为 JavaScript 代码。

拒绝Hook
所有组件都使用Class组件，拒绝函数组件，拒绝使用任何Hook。

全局状态
所有状态都通过 Redux 或 Mobx 等状态管理器进行管理。

没有模块抽象和重用
每个功能都是从 0 开始实现的，不抽象公共组件，不抽象频繁出现的逻辑，不抽象实用函数，不重用逻辑。

碎片化的 JSX 结构
直接在 JSX 上写冗长的函数和复杂的参数，完全不可能在脑海中构建一个页面。

编写很长很长的组件
只写一个组件就可以维护一整页，单个组件的代码行数可以轻松写到1000多行。

父子组件传递多个参数，传递尽可能多的层
父组件将很多参数传递给子组件，然后子组件继续将这些参数一层一层向下传递。绝对不能使用useContext之类的东西。

单文件开发
将状态、数据、类型、实用功能、网络请求、组件等全部放入一个文件中，越复杂越好。

打破文件组织结构与组件结构的关系
虽然组件自然是多树结构，但是对应的文件都平铺到了1层。

不封装网络请求函数
每个请求都创建一个新的axios实例，网络请求错误不统一拦截，全部单独捕获，Header单独设置，这样做的好处是，一个坏了不会影响其他的。

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

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

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

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

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

充分自信
谁说要重构就跟谁急，给经理估一个不可能接受的重构日程。并说准备重构的工程师水平不行，不懂业务，更不懂技术。

收益

每次提交上线，产品测试后台都会围绕在你身边作为鼓励者，以免出现生产事故。

老板对你印象很深，总是处理急事，夸你勤奋不偷懒，下班晚，周报总是满满当当。

公司的地位不可动摇。除了你，没有人有能力或愿意承担这个项目。他们只能给你钱，生怕你离开。

最后你可以高傲地在公司里横着走，从不用打卡，去TMD福报，去TMD996。有人敢惹你，你就用辞职相威胁。妥妥永远MVP。

如果你有更多的小窍门，欢迎在评论区说出来，让大家学习。