5 种提升 JavaScript 代码的纯净编码范式

97 阅读4分钟

在有些业务场景下,编写好的可重用的代码有一定难度。所以我们需要学习用不同的语言进行编码,并坚持有意义编码范式。

尽管 没有限制场景的情况下无法评判代码的好坏, 但还是有一些简单的方式编码能够使得我们的代码通用、适用于大多数场景、可读性、可维护性和可预见的。下面我们来具体介绍:

1. 在条件判断句中去掉 else

是否有下面类似的代码结构,有二个条件判断且有不同的处理逻辑:

image.png

If 和 else 的条件判断

然而,我们可以换一种更加便于阅读的方式。

image.png

移除 else

通常来说,你都可以去掉代码中的 ‘elses’。这会让你的代码更加简洁并且更易维护。此外,如果是一个条件依赖于另一个条件的场景下,则可以通过删除第二个 if 来进一步简化代码。

2. 尽量使用内置的函数

如果你要对数字数组进行排序,下面是一个很常见的实现方式:

image.png

冒泡排序

你可能还有其他的排序实现方式,这些都可以运行。然而笔者还是推荐你使用内置的函数,理由如下:

  • 减少代码量,更少的代码意味着更好的维护性(大多数场景下)。
  • 内置函数底层实现已经做了很多处理,所以更加快速、更安全以及更容易被其他开发者所理解。

针对这个例子,使用 ES6 提供的数组内置的 sort 方法就能更加简洁以及改善大数组的执行速度。

image.png

数组的 sort 方法

这个准则还适用于其他很多场景,不仅仅局限于数组。在通常的场景下,推荐使用内置函数。当然如果有些内置函数不能满足你对于速度、安全和可移植性的要求,就不要使用它,而是自己实现更好的方案。更多数组的内置方法请参考这里 。

3. 代码逻辑分块

这个准则针对 JavaScript 以及大多数开发语言都有效。假设你有这样的一种业务场景,输入项是一个水果数组,解析并且比较是否存在种类映射表中以及其他的一些处理。

image.png

水果的业务逻辑场景

我们假设一下,如果数组的分隔符变化了会产生什么影响?或者是水果的类型发生改变会对输出有什么影响?这种场景下,很容易发生变动,然而多数情况下代码是非常复杂的,也可能每一步骤的内部都复杂的逻辑。所以这里我们需要对代码进行逻辑分块。

image.png

逻辑分块后

这里我们区分了解析、处理水果种类以及输出,解构了每个步骤;所以如果输入的内容改变了,或者某个部分有所变化,由于我们代码更加健壮是很容易去做改动的。业务规则是不确定的,特别是快速迭代变化的产品,与熟悉产品业务的专业人员交流是很关键的。

4. 字典映射替换 Switch case 赋值

假如在你的应用中有一个过滤赋值逻辑,通常有可能通过 switch case 的方式来实现。

image.png

Switch case 过滤赋值

这么做没什么错误,也可以达到实现功能的效果;然而有一种更加可读、简洁的方式来实现--使用 字典映射 。在JavaScript中,默认的对象就可以充当字典。我们把判断条件的变量当做 key , 返回值当做 value 。这种场景下是不要求顺序的,所以用字典对象是个很好选择。

image.png

字典映射赋值

并且,返回值和索引不限于字符串类型,数字、函数亦可。所以我们可以在很多不同的场景下运用这个范式。

5. 使用解构运算进行浅拷贝对象

如果你的应用中有状态管理,那么浅拷贝是一件不得不做的事。一种常见的简单方式就是运用循环对状态对象的进行浅拷贝。

image.png

处理对象变化并浅拷贝

ES6 提供了更为简单的方式来处理这种场景。使用 Object.assign 方法或者更为简单的解构运算语法。

image.png

解构运算浅拷贝

这将会创建一个新的对象,可以避免突变,而且写法更为简洁。

总结

再次说明,不谈场景就论代码的好坏是不对的。希望上面建议可以为你提供帮助,让你的代码拥有更好运行速度、可读性、健壮性以及稳定性。