《编写可维护的JavaScript》——JavaScript编码规范(一)
缩进层级
代码如何缩进通常有两种主张:
使用制表符缩进
每一个缩进层级都用单独的制表符表示。这种方法的主要缺点是:系统对制表符的解释不一致。这些差异会导致不同的开发者对同一段代码有不同的看法的,这正是团队开发需要规避的
使用空格符缩进
每个缩进层级是由多个空格字符组成。在这种观点钟有三种具体的做法: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编码规范(一)的更多相关文章
- 如何编写可维护的面向对象JavaScript代码
能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地 ...
- [转]JavaScript程序编码规范
原文:http://javascript.crockford.com/code.html 作者:Douglas Crockford 译文:http://www.yeeyan.com/articles/ ...
- 转发一个javascript的编码规范
google出品:http://chajn.org/jsguide/javascriptguide.html
- 浅谈 JavaScript 编程语言的编码规范
对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...
- 【转发】网易邮箱前端技术分享之javascript编码规范
网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...
- 网易前端JavaScript编码规范
在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...
- 网易邮箱前端Javascript编码规范:基础规范
在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...
- Java 编码规范有感
应小组要求,开发测试都需要考阿里编码规范,因此,相当于是突击了一下关于编码规范方面的知识,目前做的项目后期需要进行项目迁移,数据迁移,功能迁移... 各种迁移... 阿里巴巴编码规范(Java)考试地 ...
- 《编写可维护的 Javascript》读书笔记(附录 A 部分):Javascript 编码风格指南(1)原始值
记录一下比较有用的编码规范(该指南是基于 Java 语言编码规范和 Javascript 编程规范,同时结合作者 Nicholos Zakas 的个人经验和喜好). 一些关于格式(包括缩进.行的长度. ...
随机推荐
- jquety
.html() //能够获取元素里的内容包括标签: .text() //只能获取到元素里的内容 .val() //可以得到元素的value值 $(this).index() //得到点时间发生的 ...
- vert.x学习(五),用StaticHandler来处理静态文件
做web开发,css.js.图片等静态资源是必不可少的,那么vert.x又是怎么来加载这些静态资源呢.请看StaticHandler 编写HelloStaticResource.java packag ...
- TextView无法通过setText设值
因为setText接收的是char序列接口类型实例,假如你在传入int类型的时候一定要String.valueOf: 设值没有成功八成是你传递的为非char序列接口类型!!!!!
- ORM系列之二:EF(1)
目录 1. EF是什么 2. 如何获取EF 3. EF有哪些主要模式 EF是什么 EF全称为Entity Framework,是微软推荐的一种数据库访问技术,属于重量级的ORM框架,功能非常强大,目前 ...
- Servlet 3.0
Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若干新特性用于简化 Web 应用的开发 ...
- css3知识
一.box-sizing 属性 规定两个并排的带边框的框 二.align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式. 值: flex-start:弹性盒子 ...
- mongoperf
官方文档 mongoperf is a utility to check disk I/O performance independently of MongoDB. It times tests o ...
- struts2所有组件
struts2所有组件(动作,结果,拦截器) 动作在框架中可作为MVC模式的模型.这个角色的主要职责是控制业务逻辑,动作使用execute()方法来实现这个功能. 这个方法中的代码应该只关注与请求相关 ...
- jvm性能监控与故障处理工具
jdk为我们提供了一系列的jvm性能监控和故障处理工具,在这里根据学习进度进行整理记录.便于之后查阅 1.jps 虚拟机进程工具 类似于Linux系统中的ps命令,用于查看虚拟机进程,常用的有以下功 ...
- Python开发【前端】:汇总
页面模板 1.EasyUI(推荐指数★) JQuery EasyUI中文网 下载 使用方法:把文件下载到本地.直接从官网上把源码拷贝过来,更改下js的路径即可 优点:功能非常多.非常齐全 偏做后台管理 ...