提高代码可读性,掌握这些就够了

khs1994 发布于2019-08-22 13:58 / 2820人阅读

摘要：提高代码可读性掌握这些就够了今天看到一篇关于代码优化的文章写得十分实用在学习总结后梳理出思维结构图将收货的分享一下原作者方应杭原文地址注意这篇文章所指的代码优化特指的是代码可读性方面的一些写法优化而不是指的性能优化。

提高代码可读性,掌握这些就够了

今天看到一篇关于代码优化的文章,写得十分实用,在学习总结后,梳理出思维结构图,将收货的分享一下

原作者:方应杭

原文地址:https://zhuanlan.zhihu.com/p/...

注意:这篇文章所指的代码优化,特指的是代码可读性方面的一些写法优化,而不是指的性能优化。

下面是我总结的一份思维导图,方便形成对文章内容结构的一个大致的印象。

首先是关于代码优化的几条原则:

易读性优先

如果不是性能瓶颈问题,不要只是为了性能优化而改写代码

没有银弹。无论怎么写,代码的复杂性不会消失。

关于第三条,作者也解释了,如果你这个功能逻辑一句话能说清,那你肯定不应该写上百行那么复杂,如果10分钟也讲不清楚的功能,代码也一定会体现出功能的复杂。

一、如何命名代码

这里讲的是程序员的三大难题之一,变量命名。

包括两大点:

要注意词性,包括6小点。

注意一致性(风格统一),包括4小点。

1.注意词性

(1) 普通变量的命名,一般就用「名词」

 name: "lvziwei",
 age : "18"

(2) 布尔类型变量的命名,用「isX」或者「hasX」或者「canX」

    isVip:  true              表示是VIP
    hasValue: true            表示有值
    canSpeak: true            表示可以说话

(3) 函数是一个动作,当然用「动词」

     run(){}, // 不及物动词
     drinkWater(){}, // 及物动词

(4) 函数中,如果是回调函数。用「介词」开头，或用「动词的现在完成时态」

「介词」开头

    beforeUpdate()
    afterUpdate()

「动词的现在完成时态」, 典型的是Vue的生命周期钩子函数。

     var component = {
          beforeCreate(){},
          created(){},
          beforeMount(){},
          mounted(){},
          beforeUpdate(){},
          updated(){},
          activated(){},
          deactivated(){},
          beforeDestroy(){},
          destroyed(){},
          errorCaptured(){}
      }

这两种写法都很容易读,但是注意你最好只选择一种风格写法并保持,这也是下面将要提到的一致性。

(5) 特别的 : 一些容易混淆的变量,可以添加前缀来让他们更容易读

    var dom1 = document.querySelector("#dom1")
    var dom2 = $("#dom2")
    
    // 这样的代码不容易读,因为dom1 dom2直觉上感觉是一类的,但是一个是dom对象,一个是JQ对象
    
    // 前缀优化: 可通过变量名称,一眼看出他们一个是DOM,一个是JQ对象
    
    var dom = document.querySelector("#dom1")
    var $dom = $("#dom2")

(6) 特别的 : 属性访问器函数,可以用名词

这是一种约定成俗的命名方式吧,按说函数都用动词,但是你看到一个框架里的函数API是用的名词,那么这很可能按时这个函数是一个属性访问器。

JQ中的text()

$dom.text()
$dom.text("内容1")

2.注意一致性(风格统一)

(1) 风格一致

上面提到过,下面2种风格,最好只选择其一。

     beforeUpdate()
     afterUpdate()

     beforeUpdate(){},
     updated(){},

(2) 函数名和函数体一致

函数名称正确的描述函数体内容,函数内容要体现函数名称

(3) 时间一致

随着时间推移,业务的改变可能导致当初的变量名称已经不再合适,这时候要及时修改,这也是最难做到的,因为牵一发而动全身。

二、如何组织代码

好了,现在我们的变量名称已经易读,容易理解了,之后干嘛?

是不是就剩下将你的变量组织起来了? 下面主要从两方面讲了如何组织代码

1.用函数组织你的代码

步骤：

将一坨代码放到一个函数里

将代码依赖的外部变量作为参数

将代码的输出作为函数的返回值

给函数取一个合适的名字

调用这个函数并传入参数

这个函数里的代码如果超过 5 行，则依然有优化的空间，请回到第 1 步

2.用对象组织你的代码

我们会用 this 来串联这个对象和所有函数。
最终代码：http://js.jirengu.com/mimazab...

3.一些固定套路

表驱动编程（《代码大全》里说的）
所有一一对应的关系都可以用表来做

自说明代码（以 API 参数为例）
把别人关心的东西放在显眼的位置

三、如何写一手烂代码

角度清奇,原作者推荐了一篇教人如何写出不可维护的代码的文章 : https://coolshell.cn/articles...

GPU云服务器云服务器代码可读性提高代码性能 js代码提高安全性儿就够

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92690.html

前端基础进阶（十三）：透彻掌握Promise的使用，读这篇就够了

摘要：在对象的构造函数中，将一个函数作为第一个参数。二对象中的方法，可以接收构造函数中处理的状态变化，并分别对应执行。 showImg(https://segmentfault.com/img/remote/1460000008932857); Promise的重要性我认为我没有必要多讲，概括起来说就是必须得掌握，而且还要掌握透彻。这篇文章的开头，主要跟大家分析一下，为什么会有Promise...

yy736044583 2019-08-21 18:31 评论0 收藏0
【转】成为Java顶尖程序员，看这10本书就够了

摘要：实战高并发程序设计这本书是目前点评推荐比较多的书，其特色是案例小，好实践代码有场景，实用。想要学习多线程的朋友，这本书是我大力推荐的，我的个人博客里面二十多篇的多线程博文都是基于此书，并且在这本书的基础上进行提炼和总结而写出来的。学习的最好途径就是看书，这是我自己学习并且小有了一定的积累之后的第一体会。个人认为看书有两点好处：showImg(/img/bVr5S5);　　1.能出版出...

DTeam 2019-08-14 15:09 评论0 收藏0
JavaScript入门的5条建议

摘要：你是否已经初步掌握了和，但完全不知道从何入手如果是，那么这篇文章一定会对你有所帮助，这里总结了条建议，帮助初学者总结学习方法，提高学习效率。这样的结果就是，个小时最多只利用了个小时。你是否已经初步掌握了html和css，但完全不知道从何入手JavaScript？如果是，那么这篇文章一定会对你有所帮助，这里总结了5条建议，帮助JavaScript初学者总结学习方法，提高学习效率。一、...

李昌杰 2019-08-20 17:46 评论0 收藏0
面试中关于Redis的问题看这篇就够了

摘要：所以查阅官方文档以及他人造好的轮子，总结了一些面试和学习中你必须掌握的问题。在微博应用中，可以将一个用户所有的关注人存在一个集合中，将其所有粉丝存在一个集合。昨天写了一篇自己搭建redis集群并在自己项目中使用的文章，今天早上看别人写的面经发现redis在面试中还是比较常问的（笔主主Java方向）。所以查阅官方文档以及他人造好的轮子，总结了一些redis面试和学习中你必须掌握的问题。...

yanbingyun1990 2019-08-15 15:34 评论0 收藏0