教你如何写出可维护的JS代码

在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用,所以写好一份高质量可维护的代码就显得十分重要。

什么是可维护代码

可维护代码需要遵循以下几个特点。

1.可理解性-其他人可以接手代码并理解它的意图和一般途径。
2.直观性-代码中的东西一看就明白,不管其操作过程有多复杂。
3.可适应性-代码以一种数据变化不要求完全重写的方法撰写。
4.可扩展性-在代码架构上已考虑在未来允许对核心功能进行扩展。
5.可调试性-当有地方出错时,代码可以给你足够的信息快速直接找出问题的所在。

代码约定

一种让代码变得可维护的简单途径是形成一套JavaScript代码的书写约定。由于JavaScript的可适应性,代码约定对它很重要。以下小节讨论代码约定的概论。

1.可读性

要让代码可维护,首先它必须可读。可读性的大部分内容和代码缩进相关的,代码整齐的缩进能一眼看出代码块是属于那个功能的,很常见的缩进大小为4个空格,现在大部分编辑器也支持一件格式化代码。可读性另一方面是注释,一般来说,有如下一些地方需要进行注释。

  • 函数和方法-每个方法或注释都应该包含一个注释,用于描述其目的和用于完成任务所可能使用的算法。
  • 大段代码-用于完成单个任务的多行代码应该在前面放一个描述任务的注释。
  • 复杂的算法-使用独特的方式来解决某个问题加以注释来解释如何做的。
  • Hack-浏览器兼容性处理。

2.变量和函数的命名

话说在平时开发中最让人头疼的事莫过于命名了,无论是class的命名还是一些变量与方法的命名,所以有时候不得不靠一些翻译软件来帮助命名。适当给变量和函数起名字对于增加代码的可理解性和可维护性是非常重要的。命名规则一般如下:

  • 变量名应为名词如car或person。
  • 函数名应以动词开始,如getName()。
  • 返回布尔类型的函数一般用is开头,如isEnable()。
  • 常量应该用全部大写表示,如MAX_LENGTH。

3.变量类型透明

由于在JavaScript中变量是松散类型的,很容易忘记变量所包含的数据类型。合适的命名方式在一定程度上可以缓解这个问题,但是放到所有的情况下看还不够,还有三种变量数据来表示数据类型的方式。

3.3.1、初始化

当定义一个变量后,它应该被初始化一个值,来暗示它将来应该如何应用。

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

3.3.2、使用匈牙利标记法指定变量类型

匈牙利标记法在变量名之前加上一个或多个字符来表示数据类型。js中最传统的匈牙利标记法是用单个字符来表示基本类型:0-对象,s-字符串,i-整数,f-浮点数,b-布尔类型。

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

匈牙利命名法好处是函数参数也一样可以使用,但它缺点是让代码在某种程度上那一阅读。

3.3.3、使用类型注释

最后一种指定变量类型的方式是使用类型注释。类型注释放在变量名右边,但是在初始化前面。

 // 用于指定类型的类型注释 var found /*Boolean*/ = false; var count /*int*/ = 10; var name /*String*/ = "Tom"; var person /*Object*/ = null;

缺点:多行注释会与代码块冲突

这三种常见的指定变量数据类型的方法,各有优势与劣势,根据自己项目加以评估再进行使用,也可以学习使用下TypeScript。

松散耦合

只要应用的某个部分过分依赖另一部分,代码就是偶尔过紧,难以维护。因为Web应用技术,有多种情况回使它变得耦合过紧,因此应该避免这些情况,并尽可能维护弱耦合代码。

1.解耦html/JavaScript