我们都知道区分专业程序员和新手程序员的一个区别是看他们的代码,一个好的编码习惯不仅有利于赏心悦目,更有利于后期维护
什么是可维护性
- 是要可理解的,其它人可以接手的代码,而不是由代码开发者一一解释;
- 是直观的,不管多复杂的逻辑,都能一眼看懂
- 是可适应性的,可以应对各种各样的数据格式,而不是数据变化方法就要重写,是数据与逻辑分离的代码
- 是可扩展性的,不是一次性的,将来可以在原有的代码结构上直接生产新的代码,对核心代码进行扩展
- 是可调试性的,当代码过于复杂时,要尽可能快的确定问题的来源,便于修改
代码约定
任何语言代码都有它的约定,作为前端的js也不例外。一般体现在可读性、变量和函数命名、变量类型透明三方面。
可读性
可读性的大部分内容都是和代码的缩进相关的,通常会使用空格而非制表符来进行缩进,常见的缩进大小4个空格;另一方面是注释。注释一般在以下几个方面:
- 函数和方法:每个函数或方法都应该包含一个蛛丝,描述的目的用于完成任务所可能用到的算法,如参数代表什么,是否有返回值等
- 大段代码。当完成单个任务的多行代码时应该予以一个描述任务的注释
- 复杂的算法。复杂的算法之前应该解释其逻辑
- Hack,主要用于应对浏览器差异
变量和函数名
变量的命名和函数命名都是非常重要的,可读性的命名会有助于理解变量及其函数的作用。通常:
- 变量名应该为名词,如car或person这种直观表达物体属性的东西
- 函数名应该从动词开始,如getName()。返回布尔类型值的函数一般以is开头,如isEnabled
- 变量和函数名应该符合逻辑,而不是满足长度为先的原则
变量类型透明
第一是初始化,当一个变量命名后,应当立即初始化一个值
第二是使用匈牙利标记法来指定变量类型
第三是指定变量类型的方式是使用类型注释,类型注释放在变量名右边,但是在初始化的前面
松散耦合
一个好的应用应该是可拆卸的,同样一个好的代码每一部分与其余部分的关系应该是相互独立又相互联系的,松散耦合主要表现在以下几个方面:
解耦HTML/JavaScript
HTML是数据,JavaScript是行为;理想情况是两者完全分离,并通过外部文件和使用DOM附加行为来包含JavaScript
解耦CSS/JavaScript
css主要负责页面的显示。应与JS分开
解耦应用逻辑/事件处理程序
每个web应用都有相当多的事件处理程序,监听者无数不同的事件。将应用逻辑和事件处理程序相分离,一个事件处理程序应该从事件对象中提取相关信息,并将这些信息发送到处理应用逻辑的某个方法中。