缩进层级

代码如何缩进通常有两种主张:

使用制表符缩进

每一个缩进层级都用单独的制表符表示。这种方法的主要缺点是:系统对制表符的解释不一致。这些差异会导致不同的开发者对同一段代码有不同的看法的,这正是团队开发需要规避的

使用空格符缩进

每个缩进层级是由多个空格字符组成。在这种观点钟有三种具体的做法:2个空格表示一个缩进,4个空格表示一个缩进,以及8个空格表示一个缩进。这三种做法在其他很多编程语言中都能找到渊源。实际上,很多团队选择4个空格的缩进。缺点是:对于单个开发者来说,使用一个没有配置好的文本编辑器创建格式化的代码的方法非常原始。

尽管选择制表符还是空格做缩进只是一种个人偏好,但绝对不要将两者混用,这会导致文件的格式很糟糕

语句结尾

有赖于分析器的自动分号插入(ASI)机制,JavaScript代码省略号也是可以正常工作的。ASI会自动寻找代码中应当使用分号但实际没有分号的位置,并插入分号。大多数场景下ASI都会正确插入分号,但ASI得分号插入规则非常复杂且难记住,因此不推荐省略分号,看一下下面这段代码:

//原始代码
function getData(){
return
{
title:"JavaScript"
}
}
//分析器会将它理解成
function getData(){
return;
{
title:"JavaScript"
};
}

在这段代码中,return之后另起了一行,导致return后被插入了一个分号,这会导致函数返回值是undefined

可以通过将左花括号移至与return同一行的位置来修复这个问题。

//这段代码正常工作,尽管没有用分号
function getData(){
return{
title:"JavaScript"
}
}

当某个场景我们认为不需要插入分号而ASI认为需要插入时,常常会产生错误。所以推荐总是使用分号。

行的长度以及换行

如果一行代码太长,编辑窗口出现了横向滚动条,会让开发人员感觉很别扭。

很多语言的编程规范都提到一行代码最长不应超过80个字符。

当一行长度达到了单行最大字符数限制时,就需要手动将一行拆成两行。通常我们会在运算符后换行,下一行会增加两个层级的缩进。

//好的做法:在运算符后换行,第二行增加两个缩进
callAFunction(document, element, window, "some string value", true, 123,
navigator);
//不好的做法:在运算符之前换行了
callAFunction(document, element, window, "some string value", true, 123
, navigator);

在这个例子中,逗号是一个运算符,应当作为前一行的行尾。这个换行位置非常重要,因为ASI机制会在某些场景下在行结束位置插入分号,而总是将一个运算符置于行尾,ASI就不会自作主张地插入分号,也就避免了错误的发生。

换行规则有一个例外:当给变量赋值时,第二行的位置和赋值运算符的位置保持对齐。比如:

var result = something + anotherThing + yetAnotherThing + somethingElse +
anotherSomethingElse;

这段代码里,变量anotherSomethingElse和首行的something保持左对齐。确保代码的可读性,并能一眼看清楚这行文本的上下文。

空行

在编码规范中,空行常常是被忽略的一个方面。有时一段代码的语义和另一段代码不可相关,这时就应该使用空行将它们分割,确保语义有关联的代码展现在一起。一般来讲,在下面这些场景中添加空行也是不错的主意:

1,在每个流控制语句之前(比如if和for语句)添加空行;

2,在方法之间;

3,在方法中的局部变量和第一条语句之间;

4,在多行或单行注释之前;

5,在方法内的逻辑片段之间插入空行,提高可读性。

但并没有一个编程规范对空行的使用给出任何具体建议,Crockford的编程规范也只提到要审慎地使用空行。

<!--

作者:纤锐
出处:http://www.cnblogs.com/beginner2014
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

-->

《编写可维护的JavaScript》——JavaScript编码规范(一)的更多相关文章

  1. 如何编写可维护的面向对象JavaScript代码

    能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地 ...

  2. [转]JavaScript程序编码规范

    原文:http://javascript.crockford.com/code.html 作者:Douglas Crockford 译文:http://www.yeeyan.com/articles/ ...

  3. 转发一个javascript的编码规范

    google出品:http://chajn.org/jsguide/javascriptguide.html

  4. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  5. 【转发】网易邮箱前端技术分享之javascript编码规范

    网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...

  6. 网易前端JavaScript编码规范

    在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...

  7. 网易邮箱前端Javascript编码规范:基础规范

    在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...

  8. Java 编码规范有感

    应小组要求,开发测试都需要考阿里编码规范,因此,相当于是突击了一下关于编码规范方面的知识,目前做的项目后期需要进行项目迁移,数据迁移,功能迁移... 各种迁移... 阿里巴巴编码规范(Java)考试地 ...

  9. 《编写可维护的 Javascript》读书笔记(附录 A 部分):Javascript 编码风格指南(1)原始值

    记录一下比较有用的编码规范(该指南是基于 Java 语言编码规范和 Javascript 编程规范,同时结合作者 Nicholos Zakas 的个人经验和喜好). 一些关于格式(包括缩进.行的长度. ...

随机推荐

  1. percona-toolkit中在线ddl

    percona-toolkit中在线ddl percona-toolkit工具提供了一组用于mysql操作的工具,比如主从复制,在线更改mysql表ddl等 一.安装1.安装perl(略)2.BI&a ...

  2. Transferring Files to Your Instance with WinSCP

    WinSCP is a GUI-based file manager for Windows that allows you to upload and transfer files to a rem ...

  3. js获取上传文件个数 以及名称

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. iOS9 适配(杂七杂八)

    1.iOS9 以后,table cell 在旋转的时候会自动调整视图内容的布局,设置以下的属性,课禁止该行为. if (runTimeOSVersion >= 9.0f) { _listTabl ...

  5. IP路由选择

    当一个ip数据包准备好了,它是如何到达目标主机的? ?首先这个ip数据报文的生命周期即ttl值是否为0了,如果是0就丢弃了 ?搜索路由表中有没有完全匹配的主机地址 ?匹配主机失败后,搜索路由表中同子网 ...

  6. centos7 mariadb

    闲置已久的空间环境配置忘得差不多了,今天得空整理,重置了磁盘重新搭建环境,首先在CentOS 7.0安装MariaDB的数据库,在这里记录下安装过程,以便以后查看. 1.安装MariaDB 安装命令 ...

  7. maven---install报错

    若maven项目在install或者run的时候出现莫名奇妙的问题,应该考虑是否在pom.xml中引入的包是否为最新的包: 因为在本地maven仓库中已经存在的包就不会再下载,所以可以从这方面排查问题 ...

  8. awk的数组使用经历

    背景:之前是一个数学妞,所以操作系统类的就由windows系列霸占了,甚至“cmd"是什么东西,环境变量是什么概念......其实说那么多就是想表明一点:你现在很有可能比我知道得多得多呢! ...

  9. iOS:使用模板引擎渲染HTML界面

    在实际开发中,UIWebView控件接受一个HTML内容,用于相应的界面,下面是该API的接口: - (void)loadHTMLString:(NSString *)string baseURL:( ...

  10. jqGird 学习记录

    jqGrid使用记录 Jqgrid教程(简单上手) jqGrid基本用法与示例 jqGrid中文教程(精品) $(document).ready(function () { $("#grid ...