谈谈JS的代码优化

前言

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

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

尾声

未写完，待补充。。。