第20章 最佳实践 (一)

本文探讨了在JavaScript开发中实现可维护性的策略,包括形成代码约定、注重可读性、合理命名变量和函数、透明表示变量类型等。通过遵循这些原则,开发者可以确保代码易于理解和维护,从而提高工作效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

自从2000以来,Web开发方面的种种规范、条例正在高速发展。过去曾是荒芜地带,里面东西还都凑合,而现在已经演化成了完整的研究规范,并建立了种种最佳实践。随着简单的网站成长为更加复杂的 web 应用,同时 web 爱好者成为了有收入的专业人士,web 开发的世界充满了各种关于最新技术和开发方法的信息。尤其是 JavaScript ,它从大量的研究和推断中获益。JavaScript 的最佳实践分成若干类,并在开发过程的不同点上进行处理。

20.1 可维护性

在早期的网站中,JavaScript 主要是用于小特效或者是表单验证。而今天的 web 应用则会有成千上万行 JavaScript 代码,执行各种复杂的过程。这种演化让开发者必须得考虑到可维护性。除了秉承较传统理念的软件工程师外,还要雇佣 JavaScript 开发人员为公司创造价值,而他们并非仅仅按时交付产品,同时还要开发智力成果在之后不断地增加价值。

编写可维护的代码很重要,因为大部分开发人员都花费大量时间维护他人代码。很难从头开始开发新代码的,很多情况下是以他人的工作成果为基础的。确保自己代码的可维护性,以便其他开发人员在此基础上更好的开展工作。

注意可维护的代码的概念并不是 JavaScript 特有的。这里的很多概念都可以广泛应用于各种编程语言,当然也有某些特定于 JavaScript 的概念。

20.1.1 什么是可维护的代码

可维护的代码有一些特征。一般来说,如果说代码是可维护的,它需要遵循以下特点:

  • 可理解性 -- 其他人可以接手代码并理解它的意图和一般途径,而无须原开发人员的完整解释;
  • 直观性 -- 代码中的东西一看就能明白,不管其操作过程多么复杂;
  • 可适应性 -- 代码以一种数据上的变化不要求完全重写的方法撰写;
  • 可扩展性 -- 在代码架构上已经考虑到在未来允许对核心功能进行扩展;
  • 可调试性 -- 当有地方出错时,代码可以给与你做够的信息来尽可能直接地确定问题所在。
对于专业人士而言,能写出可维护性的 JavaScript 代码是非常重要的技能。这正是周末改改网站的爱好者和真正理解自己作品的开发人员之间的区别。

20.1.2 代码约定

一种让代码变得可维护的简单途径是形成一套 JavaScript 代码的书写约定。绝大多数语言都开发出了各自的代码约定,只要在网上一搜就能找到大量相关文档。专业的组织为开发人员制定了详尽的代码约定试图让代码对任何人都可维护。杰出的开放源代码项目有着严格的代码约定要求,这让社区中的任何人都可以轻松地理解代码是如何组织的。
由于 JavaScript 的可适应性,代码约定对它也很重要。由于和大多数面向对象语言不同,JavaScript 并不强制开发人员将所有东西都定义为对象语音可以支持各种编程风格,从传统面向对象式到声明式到函数式。只要快速浏览以下一些开源 JavaScript 库,就能发现好几种创建对象、定义方法和管理环境的途径。
以下小节将讨论代码约定的概论。对这些主题的解说非常重要,虽然可能的解说方式会有区别,这取决于个人需求。
1.可读性
要让代码可维护,首先它必须可读。可读性与代码作为文本文件的格式化方式有关。可读性的大部分内容都是和代码的缩进相关的。当所有人都使用一样的缩进方式时,整个项目中的代码都会更加易于阅读。通常会使用若干空格而非制表符来表示缩进,这是因为制表符在不同的文本编辑器中显示效果不同。一种不错的、很常见的缩进大小为4个空格,当然你也可以使用其他数量。
可读性的另一方面是注释。在大多数编程语言中,对每个方法的注释都视为一个可行的实践。因为 JavaScript  可以在代码的任何地方创建函数,所以这点常常被忽略了。然而正因为如此,在 JavaScript 中为每个函数编写文档就更加重要了。一般而言,有如下一些地方需要进行注释。
  • 函数和方法 -- 每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用的算法。陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值 (因为这不能从函数定义中推断出来)。
  • 大段代码 -- 用于完成单个任务的多行代码应该在前面放一个描述任务的注释。
  • 复杂的算法 -- 如果使用了一种独特的方式解决某个问题,则要在注释中解释你是如何做的。这不仅仅可以帮助其他浏览你代码的人,也能在下次你自己查阅代码的时候帮助理解。
  • Hack -- 因为存在浏览器差异,JavaScript 代码一般会包含一些 hack。不要假设其他人在看代码的时候能够理解 hack 所要应付的浏览器问题。如果因为某种浏览器无法使用普通的方法,所以你需要用一些不同的方法,那么请将这些信息放在注释中。这样可以减少出现这种情况的可能性:有人偶然看到你的 hack ,然后 "修正" 了它,最后重新引入了你本来修正了的错误。
2.变量和函数命名
适当给变量和函数其名字对于增加代码可理解性和可维护性是非常重要的。由于很多 JavaScript 开发人员最初都只是业余爱好者,所以有一种使用无意义名字的倾向,诸如给变量起 "foo" 、"bar" 等名字,给函数起 "doSomething" 这样的名字。专业 JavaScript 开发人员必须克服这些恶习以创建可维护的代码。命名的一般规则如下所示。
  • 变量名应该为名词如 car 或 person。
  • 函数名应该以动词开始,如 getName()。返回布尔类型值的函数一般以 is 开头,如 isEnable()。
  • 变量和函数都应使用合乎逻辑的名字,不要担心长度。长度问题可以通过后处理和压缩来缓解。
必须避免出现无法表示所包含的数据类型的无用变量名。有了合适的命名,代码阅读起来就像讲述故事一样,更容易理解。
3.变量类型透明
由于在 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;
var count /*:int*/  = 10;
var name /*:String*/ = "Nicholas";
var person /*:Object*/  = null;
类型注释维持了代码的整体可读性,同时注入了类型信息。类型注释的缺点是你不能用多行坠饰一次注释大块的代码,因为类型注释也是多行注释,两者会冲突,如下例所示:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值