从6个方面净化你的Js代码

妖狐艹你老母 2022-12-24 00:47 80阅读 0赞

![format_png][]

记录一下怎样写出整洁规范的代码，用于共勉进步。对于什么是整洁的代码，书中给出了大师们的总结：

*Bjarne Stroustrup：优雅且高效；直截了当；减少依赖；只做好一件事  
Grady booch：简单直接  
Dave thomas：可读，可维护，单元测试  
Ron Jeffries：不要重复、单一职责，表达力（Expressiveness）*

其中，我最喜欢的是表达力（Expressiveness）这个描述，这个词似乎道出了好代码的真谛：用简单直接的方式描绘出代码的功能，不多也不少。

可读性代码就是可维护性代码！

### **1、注重命名** ###

为一个事件命名是很困难的。虽然困难但是非常有必要。

想象以下，将两个数组合并成一个数组，并生成一个唯一值的数组。那么你会怎么命名它呢？我们也许会这样命名？

function mergeNumberListIntoUniqueList(listOne, listTwo) {  return [...new Set([...listOne, ...listTwo])]}

上面的命名并不糟糕，但是还不是很友好。你可以将一个功能函数拆分为两个功能函数，这样命名更友好和函数复用性更好。

function mergeLists(listOne, listTwo) {  return [...listOne, ...listTwo]}
    function createUniqueList(list) {  return [...new Set(list)]}

### **2、IF语句简化** ###

假设我们有下面的代码：

if(value === 'duck' || value === 'dog' || value === 'cat') {  // ...}

我们可以这样解决：

const options = ['duck', 'dog', 'cat'];if (options.includes(value)) {  // ...}

将乱七八糟的条件判断放到一个变量中存储，比看臃肿的表达式要好很多。

### **3、及早返回** ###

有下面的代码：

function handleEvent(event) {  if (event) {    const target = event.target;    if (target) {      // Your awesome piece of code that uses target    }  }}

及早返回使得我们的代码更加易读：

function handleEvent(event) {  if (!event || !event.target) {    return;  }  // Your awesome piece of code that uses target}

### **4、解构赋值** ###

在JavaScript中，我们可以对objects和arrays进行解构赋值。

例如：

// object 解构赋值const numbers = {one: 1, two: 2};const {one, two} = numbers;console.log(one); // 1console.log(two); // 2
    // array 解构赋值const numbers = [1, 2, 3, 4, 5];const [one, two] = numbers;console.log(one); // 1console.log(two); // 2

### **5、童子军规则** ###

童子军有一条规则：永远保持离开时的露营比你发现它时更整洁。如果你在地面上发现了脏东西，那么无论是否是你留下的，你都要将它清理干净。你要有意地为下一组露营者改善环境。

我们编写代码也是这样子，如果你在代码中发现了脏代码，那么你可以尝试去修改它，即使是一个没有被引用到的变量名。

### **6、代码风格** ###

在你的团队中使用一种代码风格，比如限定代码缩进的规范是两空格呢还是四空格；使用单引号呢还是双引号呢;使用同类的一种框架呢，还是流行两种解决方案的框架呢...这样团队中人员接手项目的成本就会降低，开发人员的心里减少排斥感~

所以，在开发的工作中为了不给别人造成排斥感，尽量去写出整洁的代码，既方便自己也方便别人！！！

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 1][]

![format_png 2][]

点个**在看**支持我吧

![format_png 3][]

[format_png]: /images/20221120/415c7323f06f4bd9b929ca428239a90d.png
[format_png 1]: /images/20221120/24f244e3fa9347d69595eebdbb0319ad.png
[format_png 2]: /images/20221120/146dc42b7391436ebdab132803467efe.png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi83UVJUdmtLMnFDNkJHTkxPUXh3Qm1NVE9HbU8wZFNkM05tT1dzWkJNV2czQkMxbXNkd3R5dkJrTkxZaDF4R0xRaWJtNFFzSGliQ2x3eFdmenVpYmljYkpjSUEvNjQw?x-oss-process=image/format,png