总结:如何保持JavaScript的代码可维护性

301 阅读5分钟

什么是可维护性的代码

1.直观性

代码中的东西一看就明白,不管操作多复杂。注释和圈复杂度,避免一个函数过长

2.可适应性

代码以一种数据上的变化不要求完全重写的方法撰写。代码的兼容性强

3.可扩展性

在代码架构上已考虑到在未来允许对核心功能进行扩展。可允许将来对功能进行扩展,类似于jq

4.可调试性

当有地方出错时,代码可以给你足够的信息定位到问题所在。对于一些较为复杂的错误,通过console.error和console.warn进行提示

如何实现可维护的代码

1.代码约定

大家都使用统一的代码约定可以让代码更变得更容易维护

1).可读性

a.采用统一的代码格式化方式。首先是大家最好都采用统一的缩进大小,其次是使用同样的eslint规则。做到这两点基本上可以保证代码的规整性,易于阅读

b.必要的注释

注释是必要的,这大家都知道,但是一般哪些地方需要注释呢,对于这点,可能有的朋友就不是很清楚了,这样就导致大家的注释有时比较随心所欲,并不是所有需要注释的地方都有必要的注释

b1.函数和方法。主要包括目的描述,参数描述包括类型和意义,返回值描述包括类型和意义

b2.大段代码

b3.较为复杂的算法。如果使用了一种独特的方式解决某个问题,则需要注释你是如何做的

b4.hack。针对一些处理浏览器兼容性的hack

b5.对于注释掉的代码,要有必要的注释,解释其原因

2).变量和函数命名

a.变量名应为名词,布尔类型的用is开头

b.函数名应该以动词开始,返回布尔类型的用is开头

c.命名应该能简单表达变量的意义

3)变量类型透明

顾名思义就是能够使变量的数据类型透明。因为javaScript是松散类型的,不同于Java,所以需要通过合适的命名方式来缓解这个问题

a.初始化。当定义了一个变量后,应该为它初始化一个值,来暗示它的数据类型。较为推荐

b.匈牙利标记法。在变量名之前加上一个或多个字符来表示数据类型。如:o表示对象,s代表字符串,b代码布尔类型等等。缺点是可读性差

c.类型注释。类似于 var found /:Boolean/ = false;将注释放在变量名右侧,初始化左侧。缺点是与多行注释会产生冲突

2.松散耦合

当一部分过于依赖另一部分,代码就是耦合过紧,难于维护,并且一点修改就可能导致重写

1).解耦HTML和JavaScript

简单来说就是尽量不要在html中写js,也不要在js中创建大量的html。将二者解耦可以在调试过程专用节省时间,更加容易确定错误的来源,也减轻维护的难度:更改行为在js文件中进行,更改标记在html中进行

2).解耦CSS/JavaScript

同理,尽量不要在js中修改样式,如果必须这样做,可以通过动态修改样式类来实现;也不要在css中写js(ie中会出现)

3).解耦应用逻辑/事件处理程序

将和dom相关的操作同应用逻辑(数据操作)分离开来

例如:

function validate(value) {
    value = 5*parseInt(value);
    if(value > 10) {
        alert('over max num!');
    }
}
function handleKeyPress(event) {
    if (event.keyCode === 13) {
        const target = event.target;
        // 此处将从dom中获取信息同应用逻辑分离开来
        validate(target.value)
    }
}

松散耦合的几条原则:

a.不要将event对象传给其他方法:只传来自event对象中所需的数据

b.任何可以在应用层面的动作都应该可以在不执行任何事件处理程序的情况下进行

c.任何事件处理程序都应该处理事件,然后将处理转交给应用逻辑

这样做的好处:

a.应用逻辑不再依赖于事件处理程序,重用性大大提高

b.不依赖于dom,更容易创建单元测试或者是自动化应用流程

3.编程实践

编程中一些书写可维护性代码的有效措施

1).尊重对象所有权

不能去修改不属于你创建和维护的对象,具体来说就是:

a.不能为实例或原型添加属性

b.不要为实例或原型添加方法

c.不要重定义已存在的方法

更危险的是不能去更改Object,String等原生类型,这样会在全局产生威胁

2).避免使用全局变量和全局函数
3).避免与null进行比较

使用null比较越少,越容易确定代码 的目的,并消除不必要的错误

3).使用常量

将数据从应用逻辑分离出来的思想

const INVALID_URL = 'www.baidu.com'

场景:

a.重复值

b.用户界面字符串

c.URLs

d.任意可能会更改的值