大家好,我是前端林叔,掘金小册《如何写出高质量的前端代码》 作者。
预警!!!本文攻击性较强,请勿对号入座
每次提及前端代码质量,总有人会说,"我也想写好代码,可是排期紧张啊,哪有时间!" 潜台词就是我的代码质量差完全是因为排期紧张,要不然我的代码质量肯定高,对此,我只想说别再骗自己了!就你这个认知水平,给你再多时间你也写不出高质量的代码!
编程时间和代码质量的关系
有上述观点的同学,其实犯了一个低级的逻辑错误,即"编程时间充裕是写出高质量的代码的充分必要条件",事实真是如此吗?
在他们的眼中,开发时间充足与否和代码质量关系是如下图所示的:
- 编程时间紧张代码质量很差
- 编程时间充足代码质量很高
而事实上,他们的代码质量和时间的关系是下面这样的:
- 编程时间紧张代码质量很差
- 编程时间充足代码质量依然很一般
而菜鸟和高手的区别就在于,相同的开发时间,写出的代码质量是不在一个层次的,这个差距就是一个人的编程能力,也是前端同学的一项核心竞争力。
如果代码质量只和时间有关系,那么岂不是一个新手就能吊打一个十几年经验的高手?那编程也太容易了吧,什么都不用学,就加时间就可以了,可能吗?!如果是这样,我的小册也就毫无价值,还学什么如何写出高质量的代码?加时间就够了。
不否认时间充裕,有足够的时间设计和重构,确实可以一定程度提升代码质量,但是并不是说只要时间足够就能写出高质量的代码,也不是说写出高质量的代码就一定要有大量的时间,编程时间既不是编程质量的充分条件,也不是必要条件。给你一年你也写不出Vue、也创造不出来javaScript,是这个道理吧。
写高质量代码耗时?
我举几个特别简单的例子,来看看到底写出好代码耗时吗。
以变量命名为例,下面这两种命名,会耗费什么时间?
let flag = true; //不好的变量命名
let isRunning = true; //好的变量命名
以非常影响可读性、且和后端强耦合的硬编码为例,下面两种写法,会耗费什么时间?
//不好的示例,硬编码
if(status === 1){
}
//好的示例
const APP_STATUS = {
RUNNING: 1,
STOPPED: 2
}
if(status === APP_STATUS.RUNNING){
}
以页面的开发为例,下面这两种写法,会耗费什么时间?
//不好的示例,全是细节,动辄一个文件上千行
<div>
<div class="header">
<img src="logo.png"/>
<h1>网站名称</h1>
<!-- 其他头部代码 -->
</div>
<div class="main-content">
<div class="banner">
<ul>
<li><img src="banner1.png"></li>
<!-- 省略n行代码 -->
</ul>
</div>
<div class="about-us">
<!-- 省略n行代码 -->
</div>
<!-- 省略n行代码 -->
</div>
</div>
//好的示例,组件拆分,单个文件一般不超过300行
<div>
<Header/>
<main>
<Banner/>
<AboutUs/>
<Services/>
<ContactUs/>
</main>
<Footer/>
</div>
这样的例子举不胜数,写高质量代码并不需要花很多时间,更多地取决于是否知道什么是好代码,熟知代码设计的方法、技巧、原则和思维,一旦形成了肌肉记忆,根本不会耗费大量时间去做设计,有时候仅仅几秒钟、几分钟就已经完成了代码的初步设计。
时间到底去哪了?
研发过程并不只是包含编码过程,很多同学接到任务后立即投入研发,追求"快",然后搞出来一堆问题,每天花费大量的时间修bug,或者因为自己(或者以前的同事)写出了屎山代码,导致几个小时就只能改几行代码,总感觉时间不够用,又或者自己不考虑复用,或者是没有搞好复用,导致每次开发都是从头开始,那你时间当然不够用了! 你每天的时间到底都花在了哪里?
研发是个科学的事情,有自己的流程,有没有花时间认真阅读产品设计文档,有没有花点时间好好做下设计,有没有在每次新需求开发之前先把之前的代码重构一下(以便于本次需求开发复用以前的能力),有没有在给测试之前自己认真测试下...
好好总结下自己的时间都花在哪里了吧,为什么别人能够又快又好地完成开发,而你要么bug缠身要么磨磨蹭蹭,总是觉得时间不够用?
慢就是快,快就是慢,越是时间紧张,越要停下来好好设计下,不要走重复的路,不要走弯路,一次性把代码写好。
好了,今天就吐槽到这里,如果你想了解前端编程的方法、原则、技巧和思维,欢迎关注我的小册 《如何写出高质量的前端代码》 ,如果你还是觉得编码质量不好是因为排期紧张,那我也没啥好说的。
你永远也叫不醒一个装睡的人,觉醒的人值得更早拥有更好的人生。