资讯专栏INFORMATION COLUMN

编写可维护的javascript

weknow619 / 503人阅读

摘要:为什么要编写可维护的软件生命周期的成本消耗在了维护上。相等具有强制类型转换的机制。检测字符串检测数字检测布尔值检测检测引用值引用值也称为对象,检测某个引用值的类型的官方最好的方法是使用运算符。

为什么要编写可维护的javascript?

软件生命周期80%的成本消耗在了维护上。

几乎所有的软件维护者都不是它的最初作者。

编码规范提高了软件的可读性,它让工程师能够快速且充分地理解新的代码。

第一部分:编程风格

</>复制代码

  1. 程序是写给人读的,只是偶尔让计算机执行以下。 ——高德纳

一、基本的格式化
1、缩进层级

如何处理缩进是几乎所有语言首先讨论的,缩进甚至关系到软件工程师的价值观!
第一种缩进:使用制表符进行缩进。例如:jQuery核心风格,Dojo编程风格。
第二种缩进:使用空格符进行缩进。例如:Goolge的javascript规定使用两个空格缩进。
推荐:4个空格字符为一个缩进层级,可以在编辑器中配置Tab键插入4个空格。

2、语句结尾

你加没加分号代码可能都会正常运行,没看到这里之前,你可能不知道这是分析器的自动分号插入机制(ASI)在偷偷的帮你干活。常言道:常在河边走,哪有不湿鞋?看看下面的代码。

</>复制代码

  1. function getData() {
  2. return
  3. {
  4. text: "看看不加分号的后果!"
  5. }
  6. }
  7. ASI会解析成下面的样子:
  8. function getData() {
  9. return ;
  10. {
  11. text: "看看不加分号的后果!"
  12. };
  13. }

所以如果调用上面的getData的方法,返回的就是undefined。但是这样不能全怪分号,谁让你把花括号写到下面一行的?(反正我看到有第一个花括号跟之前的语句不在一行的,我就要暴走。)

</>复制代码

  1. //这段代码工作正常,尽管没有分号
  2. function getData() {
  3. return {
  4. text: "看看不加分号的后果!"
  5. }
  6. }
3、行的长度: 倾向于80个字符。

如果一行多于80个字符,应当在一个运算符(逗号,加号等)后换行。下一行应当增加两级缩进。

4、命名

</>复制代码

  1. 计算机科学只存在两个难题:缓存失效和命名。

ECMAScript遵照了小驼峰的命名法,所谓小驼峰,官方称之为“驼峰大小写命名法(Camel Case)”,是由小写字母开始的,后续每个单词首字母都大写。

</>复制代码

  1. //例如
  2. var thisIsMyName;

变量命名前缀应该是名词。函数名前缀应该是动词。

</>复制代码

  1. //变量
  2. var myName = "chen";
  3. //函数名
  4. function getName() {
  5. return myName;
  6. }
5、常量

在ECMAScript6之前,javascript中没有真正的常量概念。根据C语言的样子,约定使用大写字母和下划线来命名,下划线用以分割单词。

</>复制代码

  1. var MAX_COUNT = 10;
  2. //现在我们应该也可以这样定义常量
  3. const MAX_COUNT = 10;
6、构造函数

构造函数的命名遵照大驼峰命名法(Pascal Case),为什么?因为跟本地语言保持一致的命名约定,new RegExp(),正则本身就是一个内置的构造函数,看见大驼峰了木有?
科普一下:Pascal Case 和 Camel Case都表示“驼峰大小写”,区别在于:
Pascal Case是以大写字母开始,所以也叫大驼峰,例如:AnotherName;
Camel Case是以小写字母开始,之后的单词首字母大写,所以也叫小驼峰,例如:anotherName,之前在命名的那块提到过小驼峰。

7、直接量

直接量可以这么理解,它是程序中可以直接使用的数据,没有进行特别的封装。

</>复制代码

  1. 2 //数字直接量
  2. "其心" //字符串直接量
  3. [1,2,3] //数组直接量
  4. true //布尔型直接量
  5. {name: "其心"} //对象直接量
  6. (function(){})() //函数直接量
  7. /*分割线*/
  8. new String("其心") //这就不是直接量

在直接量里着重说一下null,我就经常误解它,用的很随意,现在我明确了解了,应该在下列场景中使用它。

用来初始化一个变量,这个变量可能赋值给一个对象

用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。

当函数的参数期望是对象时,用作参数出入。

当函数的返回值期望是对象时,用作返回值传出。
理解null最好的方式是让他们当做对象的占位符。

直接量的用法简洁高效,是值得提倡的,这一点谨记。

二、注释
1、单行注释

单行注释有三种使用方法:

独占一行的注释,用来解释下一行代码。这行注释之前总要有一个空行,且缩进层级和下一行代码保持一致。

</>复制代码

  1. // 好的写法
  2. function print(){
  3. // 控制台输出数字1
  4. console.log(1);
  5. }

在代码行的尾部的注释。代码结束到注释之间至少有一个缩进。注释(包括之前代码部分)不应当超过单行最大字符数限制,如果超过了,就讲这条注释放置于当前代码的上方。

被注释掉的打断代码。

</>复制代码

  1. //好的写法
  2. // function print(){
  3. // console.log(1);
  4. // }
2、多行注释

比较青睐Java风格的多行注释

</>复制代码

  1. /*
  2. *这是一段注释
  3. *这段注释包含两行文本
  4. */

多行注释之前也应该有一个空行,且缩进层级和其描述的代码保持一致。

3、文档注释

多提一点就是文档的注释,多行注释以单斜线加双星号(/**)开始,接下来是描述信息,其中使用@符号来表示一个或多个属性。

</>复制代码

  1. /**
  2. * 提交JSON数据
  3. * @param actionUrl 交互的URL
  4. * @param json JSON数据
  5. * @param postSuccessFn 提交成功的回调函数
  6. * @param postFailFn 提交失败的方法
  7. * @param isAsync 是否异步提交,true:是
  8. * @param timeout 请求时限
  9. */
三、语句和表达式

首先说一点,见到下面两种写法,都是合法的JavaScript的代码,但是不提倡使用。

</>复制代码

  1. // 不好的写法
  2. if(condition)
  3. doSomething();
  4. // 不好的写法
  5. if(condition) doSomething();
1、花括号的对齐方式

第一种风格是,将左花括号放置在块语句中第一句代码的末尾。这种风格继承自Java。

</>复制代码

  1. if (condition) {
  2. doSomething();
  3. }else {
  4. doSomethingElse();
  5. }

第二种风格是,将花括号放置于块语句首行的下一行。这是随着C#流行起来的。

</>复制代码

  1. if (condition)
  2. {
  3. doSomething();
  4. }else
  5. {
  6. doSomethingElse();
  7. }

为了避免导致错误的分号自动插入(还记得之前说过的“ASI”么),推荐使用第一种花括号对齐方式。

2、switch

对于switch的缩进之类可以直接用编辑器默认的,只提一点就是,如果程序没有默认的行为时,default是可以被省略的。

四、变量、函数和运算符

1、变量
建议将局部变量的定义作为函数内第一条语句,推荐使用单个var语句,每个变量的初始化独占一行。对于没有初始化的变量来说,它们应当出现在var语句的尾部。

</>复制代码

  1. function doSomething(items) {
  2. var value = 10,
  3. result = value + 10,
  4. i,
  5. len;
  6. for(i = 0,len = items.length; i < len; i++){
  7. doOtherSomething(items[i]);
  8. }
  9. }
2、函数声明

需要注意,函数声明应当在条件语句的外部使用。例如:

</>复制代码

  1. //不好的写法,大部分浏览器会自动使用第二个声明,并不会根据condition来做判断。
  2. if (condition) {
  3. function doSomething() {
  4. alert("Hi!");
  5. }
  6. } else {
  7. function doSomething() {
  8. alert("Yo!");
  9. }
  10. }
3、相等

JavaScript具有强制类型转换的机制。

数字和字符串比较,字符串会首先转换为数字,然后执行比较。

</>复制代码

  1. // 比较数字5和字符串5
  2. console.log(5 == "5"); // true
  3. // 比较数字25和十六进制的字符串25
  4. console.log(25 == "0x19"); // true

一个布尔值和数字比较,布尔值会首先转化为数字,然后进行比较,false是0,true是1。

</>复制代码

  1. // 比较数字1true
  2. console.log(1 == true); // true
  3. // 比较数字0false
  4. console.log(0== false); // true
  5. //比较数字2true
  6. console.log(2 == true); // false

比较一个值是对象而另一个不是,会首先调用对象的valueOf()方法得到原始类型在进行比较。如果没有定义valueOf(),则调用toString()。
由于强制类型转换的缘故,推荐用===或者!==,不应当使用==或者!=

五、避免“空比较”
1、检测原始值

JavaScript有5中简单的原始类型:字符串、数字、布尔值、null和undefined。最佳的选择是用typeof运算符,返回一个值的类型的字符串
用typeof检测一下4种原始值类型是非常安全的。

</>复制代码

  1. //检测字符串
  2. if (typeof name === "string") {
  3. anotherName = name.substring(3);
  4. }
  5. //检测数字
  6. if (typeof count === "number") {
  7. updateCount(count);
  8. }
  9. //检测布尔值
  10. if (typeof found === "boolean" && found){
  11. message("Found!");
  12. }
  13. //检测underfined
  14. if (typeof MyApp=== "undefined") {
  15. MyApp = {};
  16. }
2、检测引用值

引用值也称为对象,检测某个引用值的类型的官方最好的方法是使用instanceof运算符。但是它不仅检测构造这个对象的构造器,还检测原型链。因为每个对象都继承自Object,因此每个对象的 value instanceof Object都会返回true

</>复制代码

  1. var now = new Date();
  2. console.log(now instanceof object); // true
  3. console.log(now instanceof Date) // true
3、检测数组

最开始是判断sort()方法在不在。

</>复制代码

  1. function isArray(value) {
  2. return typeof value.sort === "function";
  3. }

然后有了一种比较优雅的解决方案。

</>复制代码

  1. function isArray() {
  2. return Object.prototype.toString.call(value) === "[object Array]";
  3. }

再后来ECMAScript5将Array.isArray()正式引入JavaScript。

4、检测属性

判断属性是否存在的最好的方法是使用in运算符。in运算符只会简单地判断属性是否存在,而不会去读属性的值。但是检测出来的属性可以是对象自身的,也可以是继承来的。

</>复制代码

  1. var object = {
  2. count: 0,
  3. related: null
  4. };
  5. if ("count" in object) {
  6. //这里的代码会执行
  7. }

如果只检查对象自身的某个属性是否存在,就使用hasOwnProperty()方法。

六、配置数据分离

配置数据类似:

URL

需要展现给用户的字符串

重复的值

设置(比如每页的配置项)

任何可能发生变更的值
类似于各种工具化文件的config。

七、错误类型

Error: 所有的错误类型。实际上引擎从来不会抛出该类型的错误。

EvalError: 通过eval()函数执行代码发生错误时抛出。

RangeError: 一个数字超出它的边界时抛出。

ReferenceError: 期望的对象不存在时抛出。

SyntaxError: 给eval()函数传递的代码中有语法错误时抛出。

TypeError: 变量不是期望的类型时抛出。

八、阻止修改属性

防止扩展
禁止为对象“添加”属性和方法,但已存在的属性和方法是可以被修改或删除。

</>复制代码

  1. Object.preventExtension(); // 锁定对象
  2. Object.isExtensible(); // 判断对象是否被锁定

密封
类似“防止扩展”,而且禁止为对象“删除”已存在的属性和方法。

</>复制代码

  1. Object.seal(); // 密封对象
  2. Object.isSealed(); // 检测一个对象是否已被密封

冻结
类似“密封”,而且禁止为对象“删除”已存在的属性和方法。

</>复制代码

  1. Object.freeze(); // 冻结对象
  2. Object.isFrozen(); // 判断一个对象是否已被冻结

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50396.html

相关文章

  • 编写维护JavaScript》之编程实践

    摘要:最近读完编写可维护的,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点。扩展阅读编写可维护的欢迎来到石佳劼的博客,如有疑问,请在原文评论区留言,我会尽量为您解答。 最近读完《编写可维护的JavaScript》,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话...

    张春雷 评论0 收藏0
  • 读《编写维护javascript》第一章

    摘要:没有初始化的变量都会赋值为尽量避免使用因为没有声明的变量也会判断为类型。对象直接量,不建议使用构造函数创建对象数组直接量,不建议使用构造函数创建数组 编写可维护代码的重要性 程序是给人读的,只是偶尔给机器运行一下 1、软件生命周期的80%成本是发生在为维护上;2、几乎所有的软件维护者都不是最初的创建者;3、编写规范提高了软件代码的可读性,它让软件工程师快速充分的理解代码; 编写规范 缩...

    maxmin 评论0 收藏0
  • javascript eval()——编写维护javascript读书笔记

    摘要:尽管在类库中,可能会经常用到通常和操作有关,另外三种用法即使也非常罕见。一个通用的原则是,禁止使用,并且只在别无他法时使用,。和也是可以使用的,但不要用字符串形式而要用函数 再javascript中,eval()的参数是一个字符串,eval()会将传入的字符串当做代码来执行,开发者可以通过这个函数来载入外部的javascript代码,活着随机生成Javascript代码并执行它,比如:...

    lemon 评论0 收藏0
  • 编写维护JavaScript--编程风格篇

    摘要:写在前面新司机最近读完编写可维护的,学到不少东西。书分为编程风格编程实践自动化三个部分。编程风格并不是绝对的,每个人或团队都有自己的编程风格,但知道哪些地方需要注意的话,还是有助于新司机完成代码风格的转变。 写在前面 新司机最近读完《编写可维护的JavaScript》,学到不少东西。书分为编程风格、编程实践、自动化三个部分。其中编程风格是你的代码格式约定,统一的格式不仅仅有利于团队,也...

    AnthonyHan 评论0 收藏0
  • [JS进阶] 编写维护性代码 (1)

    摘要:如果值是基本类型,则用操作符检查其类型。总结所有编程语言都需要可维护性良好的代码,这个很重要,因为大部分开发人员都花费大量时间维护他人的代码。 o(╯□╰)o 这并不是什么史诗巨作,没有非常深入去挖掘这类问题,只是从平常的JS代码习惯,参考书籍总结而来,希望对你有帮助的! 今天的web应用大至成千上万行的javascript代码,执行各种复杂的过程,这种演化让我们开发者必...

    Youngdze 评论0 收藏0
  • <<编写维护javascript>> 笔记5(UI层松耦合)

    摘要:由于第四章太稀松平常了于是就直接跳到第五章了这里我就草草的说一下第四章的几个点吧在严格模式的应用下不推荐将用在全局作用域中相等推荐尽量使用和守则如果是在没有别的方法来完成当前任务这时可以使用原始包装类型不推荐创建类型时用等创建类型从这一章节 由于第四章太稀松平常了, 于是就直接跳到第五章了.这里我就草草的说一下第四章的几个点吧 在严格模式的应用下 不推荐将use strict;用在全...

    saucxs 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<