从公司的code Review 中提升编码能力，发现与其他人的差距 点击小卡片参与粉丝专属福利 前言 不知道大家有没有感觉， 一到三年工作经验的其实差距还是很大的 ，有的一年工作经验的能力的确比三年的更强点，难不成他们是天生编码能力强？非也！是因为他们会花更多的时间去学习去思考。 其中个人觉得 code Review和 学习优秀的开源项目 会让你的编码能力提升的非常快.. 仔细来说说 code Review 的好处吧: 多人一起review 你的代码的时候 会迸发出更多 想法 让你知道 你又哪些方面没有考虑到Review 水平比你高的 你可以在他的编码习惯中学习到 很多思路与设计Review 水平比你低的 你可以看看那些错误是怎么发生的 从而以后去避免他Review 和自己差不多的 你可以换位思考 看看自己和他的 实现方式的区别分享一下我们Review 的代码 下面代码都是 伪代码 ，请勿较劲，并且每一家公司有自己的 规范与习惯 如果和你们的习惯不一样 ，那就是你们对 仅供参考~ 2.jpg1、对于只有一个 if else 并且简单赋值可以用三元表达式优化修改之前： code_1.png优化后： code_1_1.png对于 不变的并且结构很长的这种对象或数组，可以放到一个 ts 文件，通过引入的方式，这样代码看起来会代码更简洁明了 2、用map 映射 替换重复判断的 if else修改之前： code_2.png优化后： code_2_1.png对于重复的 if else 判断，可以用map 结构去优化，这种也是设计模式中的 策略模式 ，这样就会避免代码中大量的 if else 让人看代码的时候头疼 3、将forEach+splice的方式 替换成findIndex+splice修改之前： 优化之后： code_3_1.png每次写代码的时候不应该只会使用 forEach, 这个场景就 通过 findIndex 直接找到索引, 删除那一项 这样不会像 修改之前那样 每次都要遍历完数组 复杂度会大大降低 4、将判断提前修改之前： code_4.png修改之后 code_4_1.png将判断提前,就不用if里面包裹大量逻辑,并且优化性能,当 dataNum 不存在的时候 就不会执行下面的代码了 5、太多重复的对象代码 可以用解构的方式修之前： code_5.png修改之后： code_5_1.pngparams 参数就是 应用于 form 没必要一个个的赋值过去 可以 可以用 ... 的方式 6、对于大量的 重复类型可以用 Pick、Partial、Omit 等ts 的内置类型 对 一个类型去做 类型提取修改之前： code_6.png修改之后： coode_6_1.png这样的的话 尽可能就是对一个大的类型进行收敛 而不是分散的 各种重复的类型 7、避免使用 魔法数字 可使用一个常量 或者枚举去替代修改之前： 修改之后: carbon (24).png将 魔法数字 120 改成一个常量 加上注释 这样会 清晰很多 8、尽量少的造轮子修改之前： 修改之后： code_8_1.png这里逻辑是关闭elemnet 之外的 弹框 其实没必要自己手写这种逻辑 而且写不好还有可能有一些奇怪的bug 在vue3 中比较广泛使用的自定义hooks就是 vueuse 大家可以多看看 这种库 不仅提高开发效率 还有利于学习如何编写自定义hooks 总结 如果你是一个刚入行 并且公司只有你一个前端 其实个人觉得 会很难养成一个好的编码习惯 因为没有可以参考的地方，这种情况公司没有大佬 也没有机会组织code Review 那你就可以多看看开源项目 比如 vue3 的 elemnet-plus 、vben、vue3-admin-vite等等，如果你公司有 code Review 的活动请牢牢抓紧它 因为你可以从中获益匪浅！ 如果文章对你有帮助的话欢迎「关注+点赞+收藏」 阅读原文