让你的JS代码更具可读性

Posted wolfSoul

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让你的JS代码更具可读性相关的知识,希望对你有一定的参考价值。

一.合理的添加注释

  • 函数和方法——每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用 的算法。陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值(因为这不能从函 数定义中推断出来)。 
  • 大段代码——用于完成单个任务的多行代码应该在前面放一个描述任务的注释。 
  • 复杂的算法——如果使用了一种独特的方式解决某个问题,则要在注释中解释你是如何做的。(这不仅仅可以帮助其他浏览你代码的人,也能在下次你自己查阅代码的时候帮助理解)

二.合理的变量和函数命名 

适当给变量和函数起名字对于增加代码可理解性是非常重要的。必须避免出现无法表示所包含的数据类型的无用变量名。有了合适的命名,代码阅读起来就像讲述故事一样,更容易理解。 

命名的一般规则如下: 

  • 变量名应为名词如 car 或 person。
  • 函数名应该以动词开始,如 getName()。返回布尔类型值的函数一般以 is 开头,如isEnable()。

  • 变量和函数都应使用合乎逻辑的名字,不要担心长度。长度问题可以通过后处理和压缩来缓解。 

三.变量类型透明 

  由于在 javascript 中变量是松散类型的,很容易就忘记变量所应包含的数据类型。合适的命名方式 可以一定程度上缓解这个问题,但放到所有的情况下看,还不够。有三种表示变量数据类型的方式。 第一种方式是初始化。当定义了一个变量后,它应该被初始化为一个值,来暗示它将来应该如何应 用。例如,将来保存布尔类型值的变量应该初始化为 true 或者 false,将来保存数字的变量就应该初 始化为一个数字,如以下例子所示: 

  • //通过初始化指定变量类型
  • var found = false; //布尔型
  • var count = -1; //数字
  • var name = ""; //字符串
  • var person = null; //对象 

  初始化为一个特定的数据类型可以很好的指明变量的类型。但缺点是它无法用于函数声明中的函数 参数。

第二种方法是使用匈牙利标记法来指定变量类型。匈牙利标记法在变量名之前加上一个或多个字符 来表示数据类型。这个标记法在脚本语言中很流行,曾经很长时间也是 JavaScript 所推崇的方式。 JavaScript 中最传统的匈牙利标记法是用单个字符表示基本类型:"o"代表对象,"s"代表字符串,"i" 代表整数,"f"代表浮点数,"b"代表布尔型。如下所示: 

  • //用于指定数据类型的匈牙利标记法
  • var bFound; //布尔型
  • var iCount; //整数
  • var sName; //字符串
  • var oPerson; //对象 

  JavaScript 中用匈牙利标记法的好处是函数参数一样可以使用。但它的缺点是让代码某种程度上难 以阅读,阻碍了没有用它时代码的直观性和句子式的特质。因此,匈牙利标记法失去了一些开发者的宠爱。 

最后一种指定变量类型的方式是使用类型注释。类型注释放在变量名右边,但是在初始化前面。这 种方式是在变量旁边放一段指定类型的注释,如下所示: 

//用于指定类型的类型注释

  • var found /*:Boolean*/ = false; 

  这三种指定变量数据类型的方法。每种都有各自的优势和劣势,要自己在使用之前进行评估。最重要的是要确定哪种最适合你的项目并一致使用。 

以上是关于让你的JS代码更具可读性的主要内容,如果未能解决你的问题,请参考以下文章

使代码更具可读性

如何使用背景/异步任务制作线性/更具可读性的 Java 代码

在 python 中使用 pass 语句作为使代码更具可读性的一种方式?有关系吗?

Flutter 中使用 extension 使项目更具可读性和效率 01

如何更改标签的背景颜色或以其他方式使它们更具可读性?

提升你的技能:编写干净高效的 JavaScript 的 7 个技巧