谈谈JS的代码优化

526 阅读6分钟

前言

写下这篇文章的灵感,是来自于一位百度大佬对我的指点。此时的我在写这篇文章时,毕业还不到一年,不过非常幸运的是在大学最后一年到现在的这期间,先后在一些公司工作过,其中包括腾讯天美,以及现在的百度。

在之前的工作中,身为萌新的我,基本都是朝着任务的完成度,能否按时上线等这些角度去看待一个项目。虽然我从学习计算机开始,就知道代码是分优劣的,即使是一个逻辑一个普通的操作,你写了几十行代码,有的其实一行就可以搞定,并且运算速度还更快。所以之前的我大都是平平稳稳的完成了工作,但忽视了代码质量的问题。于是,从后期的维护开始,我就发现了问题。之前在腾讯有一个项目,是王者荣耀质量数据分析平台,整个前端是我负责的。那个时候基本是一天一小改,两天一大改,有时候不仅风格样式变,包括着一些核心的逻辑操作,也会改变。后面我发现,我每次一改,就是一大坨代码,虽然我添加了很多注释(个人比较喜欢写注释),但是奈何代码之前写的太分散了,很多地方没有封装复用,导致本来相联系的地方,要改好几份,这当时的确带给我了很大的困难,浪费了太多的时间。不过我可能有个很不错的天赋吧,我有时候回看代码,很快就能发现很多能优化的地方,于是花了些时间将可复用代码进行了整理封装,各个功能进行了拆解。不仅是JS部分,我把一些样式风格一样的dom,也封装成一个文件,每次统一修改,于是,这减少了大幅度的冗余代码,也节约了我很多的时间。

从那之后,我写代码前,都会先思考。怎样让自己的代码变得更精致,怎么用更小的代价去实现这个功能。如果说之前的工作是学会了代码质量很重要的这个理念,那么现在的工作则是让我学习了怎么提高代码质量。

小例子

下面这段代码是带我的百度大佬给我的一个思路,大家可以先看看。

首先当时要实现的功能是这样的,用户可以在下拉选择框里选择一个处罚级别,分别为特级,一级,二级,三级,然后下面的处罚描述会自动根据选中的级别填充进对应的文字。于是当时我是这样的:

if(val === '2'){
    this.form.punish_info = 'xxxxx1'   
}else if(val === '3'){
    this.form.punish_info = 'xxxxx2' 
}else ...

这里可以看到,我用的是if加else if来实现,这样实现其实是没有问题的。这里先说一下,我工作的流程,我这边提交push的代码不会直接成功,而是跳转到一个网址,进行编码规范的审核,还有一个前辈看完之后,确认没有问题,帮我done才能成功。于是我就给了大佬去帮我看,这里当时他回复了一个评论:"全程if-else 不够优雅,代码冗余,不利于维护,希望可以思考一下,优化代码逻辑。"。然后我先是有点小懵,因为之前没有这样的,但是大佬都说了,我肯定还是要优化下,于是我改成了下面这样:

switch (val) {
    case 2:
        this.form.punish_info = ‘xxxx1';
        break;
    case 3:
        this.form.punish_info = 'xxxx2';
        break;
    case 4:
        this.form.punish_info = 'xxx3';
        break;
    default:
        this.form.punish_info = '';
} 

后面再次提交,大佬就说这样还是不太好,然后他说给我提供一个思路。

let num = parseString(val);
const ruleTexts = {'2': 'xxx1', '3': 'xxx2'};
return ruleTexts[num] || '';

然后我就懵了,原来还可以这样。说实话,之前肯定是学习并了解过对象的这种用法的,但是就是没有想到这里。

代码优化

看了刚刚的例子,大家可能已经对代码的优化有了一些了解。下面我来讲一些自己对代码优化的一些心得,当然,我并不是什么大佬,如果有错误的,希望大家原谅。以下只是我自己的一些见解,>QAQ<。

1. 代码拆解

我认为一个功能,是可以进行多层拆解的。比如一个视频播放,我们想要实现一个弹幕的功能,那么就可以先拆解为3部分(只考虑JS部分,假设HTML,CSS已经写好),第一个是填充,负责把获取的内容插入到页面中,第二个是弹幕样式的处理,即负责根据不同的vip,去判断弹幕是哪一种颜色或者字体大小等,第三个是获取弹幕,并交给第二部分处理。这其实是三个功能函数,但是我们最好不要直接就在这里面去实现我们的功能代码,还可以拆。比如第二个,还应该拆一个颜色处理函数,根据传入的值,给与这个数据对应的颜色,同之,字体大小,字体等,而处理函数只需要一直调用他们,最后合并成一个对象,把数据给第一个填充函数就行了。任务拆解,代码拆解,不仅可以让代码变得复用性更好,并且每一个功能只做自己负责的事,更便于维护,阅读理解也更加方便,

2.注释

一段优秀的代码,注释一定必不可少。我个人比较喜欢写注释,我有一个习惯,就是更新维护一段代码时,我喜欢将我新增或更改的包裹起来,如下:

//新增代码块
//**************************************
    let a = 0;
    let b = 1;
    //工作区
//**************************************

这样可以在之后更快更精准的找到我想找的代码,并且看起来也很美观,哈哈。

3.对象

我觉得很多数据使用对象object来存储,都会有意想不到的收获。它的可操作性,可延伸性太好了。建议大家可以多封装一些方法,放在自己命名的对象上,做成工具库,这对于自身理解以及开发效率都是很不错的提升,想一想,每次引入自己的工具库就跟引入jq一样,随心所欲的使用,提高自己的开发效率,不是很有成就感吗。

尾声

未写完,待补充。。。