缩进层级

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

使用制表符缩进

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

使用空格符缩进

每个缩进层级是由多个空格字符组成。在这种观点钟有三种具体的做法: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. nginx中相关配置

    #nginx 开启目录浏览 location / { root /data/www/file //指定实际目录绝对路径: autoindex on; //开启目录浏览功能: autoindex_exa ...

  2. 【转】监听按钮除OnClick外其他事件的方法,附简易改编的UIButton类

    http://lib.csdn.net/article/unity3d/38463 作者:IceFantasyLcj 大家好,我是雨中祈雨.一直以来,CSDN都是我最好的编程助手.这是我在CSDN的第 ...

  3. js == 与 === 的区别,‘’与“”的区别

    js == 与 === 的区别 1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值&quo ...

  4. H5 FormData对象的使用

    XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...

  5. [转载]Difference between <context:annotation-config> vs <context:component-scan>

    在国外看到详细的说明一篇,非常浅显透彻.转给国内的筒子们:-) 原文标题: Spring中的<context:annotation-config>与<context:componen ...

  6. ASP.NET MVC location.href不跳转

    表单使用submit导致不跳转 <button type="button">

  7. ClearTrace

    一年前两次手动使用fn_trace_gettable对跟踪文件进行分析,按TextData排序,通过截取TextData左边N位尝试分组,观察总体相同的过程或语句中的关键字,逐一得出跟踪分析报表,罗列 ...

  8. [转]理解I/O Completion Port

    原文:http://dev.gameres.com/Program/Control/IOCP.htm 另附上:http://stackoverflow.com/questions/5283032/i- ...

  9. HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用

    HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用? X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过 ...

  10. http 登录Digest认证相关知识

    Digest access authentication https://en.wikipedia.org/wiki/Digest_access_authentication Digest acces ...