【荐】JavaScript编码风格

作者:阮一峰

Douglas Crockford是 JavaScript 权威,Json 格式就是他的发明。

去年 11 月他有一个演讲(Youtube),谈到了好的 JavaScript 编程风格是什么。

我非常推荐这个演讲,它不仅有助于学习 JavaScript,而且能让你心情舒畅,因为 Crockford 讲得很幽默,时不时让听众会心一笑。

下面,我根据这个演讲和 Crockford 编写的代码规范,总结一下"JavaScript 编程风格"。

所谓"编程风格"(programming style),指的是编写代码的样式规则。不同的程序员,往往有不同的编程风格。

有人说,编译器的规范叫做"语法规则"(grammar),这是程序员必须遵守的;而编译器忽略的部分,就叫"编程风格" (programming style),这是程序员可以自由选择的。这种说法不完全正确,程序员固然可以自由选择编程风格,但是好的编程风格有助于写出质量更高、错误更少、更易于 维护的程序。

所以,有一点应该明确,"编程风格"的选择不应该基于个人爱好、熟悉程度、打字工作量等因素,而要考虑如何尽量使代码清晰易读、减少出错。你选 择的,不是你喜欢的风格,而是一种能够清晰表达你的意图的风格。这一点,对于 JavaScript 这种语法自由度很高、设计不完全成熟的语言尤其重要。

一、大括号的位置

绝大多数的编程语言,都用大括号({})表示区块(block)。起首的大括号的位置,有许多不同的写法

最流行的有两种。一种是起首的大括号另起一行:

block
{
    ...
}

另一种是起首的大括号跟在关键字的后面:

block {
    ...
}

一般来说,这两种写法都可以接受。但是,JavaScript 要使用后一种,因为 JavaScript 会自动添加句末的分号,导致一些难以察觉的错误。

return
{
    key:value;
};

上面的代码的原意,是要返回一个对象,但实际上返回的是 undefined,因为 JavaScript 自动在 return 语句后面添加了分号。为了避免这一类错误,需要写成下面这样:

return {
    key : value;
};

因此,

规则1:表示区块起首的大括号,不要另起一行。

二、 圆括号

圆括号(parentheses)在 JavaScript 中有两种作用,一种表示调用函数,另一种表示不同的值的组合(grouping)。我们可以用空格,区分这两种不同的括号。

规则2:调用函数的时候,函数名与左括号之间没有空格。
规则3:函数名与参数序列之间,没有空格。
规则4:所有其他语法元素与左括号之间,都有一个空格。

按照上面的规则,下面的写法都是不规范的:

foo (bar)
return(a+b);
if(a === 0) {...}
function foo (b) {...}
function(x) {...}

三、分号

分号表示语句的结束。大多数情况下,如果你省略了句尾的分号,JavaScript 会自动添加。

var a = 1

等同于

var a = 1;

因此,有人提倡省略句尾的分号。但麻烦的是,如果下一行的第一个字元(token)是下面这五个字符之一,JavaScript 将不对上一行句尾添加分号:"("、"["、"/"、"+"和"-"。

x = y
(function (){
    ...
})();

上面的代码等同于

x = y (function (){...})();

因此,

规则5:不要省略句末的分号。

四、with 语句

with 可以减少代码的书写,但是会造成混淆。

with (o) {
    foo = bar;
}

上面的代码,可以有四种运行结果:

o.foo = bar;
o.foo = o.bar;
foo = bar;
foo = o.bar;

这四种结果都可能发生,取决于不同的变量是否有定义。因此,

规则6:不要使用 with 语句。

五、相等和严格相等

JavaScript 有两个表示"相等"的运算符:"相等"(==)和"严格相等"(===)。

因为"相等"运算符会自动转换变量类型,造成很多意想不到的情况:

0 == ‘‘ // true
1 == true // true
2 == true // false
0 == ‘0‘ // true
false == ‘false‘ // false
false == ‘0‘ // true
"
 " == 0 // true

因此,

规则7:不要使用"相等"(==)运算符,只使用"严格相等"(===)运算符。

六、语句的合并

有些程序员追求简洁,喜欢合并不同目的的语句。比如,原来的语句是

a = b;
if (a) {...}

他喜欢写成下面这样:

if (a = b) {...}

虽然语句少了一行,但是可读性大打折扣,而且会造成误读,让别人误以为这行代码的意思是:

if (a === b){...}

另外一种情况是,有些程序员喜欢在同一行中赋值多个变量:

var a = b = 0;

他以为,这行代码等同于:

var a = 0, b = 0;

实际上不是,它的真正效果是下面这样:

b = 0;
var a = b;

因此,

规则8:不要将不同目的的语句,合并成一行。

七、变量声明

JavaScript 会自动将变量声明"提升"(hoist)到代码块(block)的头部。

if (!o) {
    var o = {};
}

等同于

var o;
if (!o) {
    o = {};
}

为了避免可能出现的问题,不如把变量声明都放在代码块的头部。

for (var i ...) {...}

最好写成:

var i;
for (i ...) {...,}

因此,

规则9:所有变量声明都放在函数的头部。
规则 10:所有函数都在使用之前定义。

八、全局变量

JavaScript 最大的语法缺点,可能就是全局变量对于任何一个代码块,都是可读可写。这对代码的模块化和重复使用,非常不利。

规则 11:避免使用全局变量;如果不得不使用,用大写字母表示变量名,比如 UPPER_CASE。

九、new 命令

JavaScript 使用 new 命令,从建构函数生成一个新对象。

var o = new myObject ();

这种做法的问题是,一旦你忘了加上 new,myObject ()内部的 this 关键字就会指向全局对象,导致所有绑定在 this 上面的变量,都变成全部变量。

规则 12:不要使用 new 命令,改用 Object.create ()命令。

如果不得不使用 new,为了防止出错,最好在视觉上把建造函数与其他函数区分开来。

规则 13:建构函数的函数名,采用首字母大写(InitialCap);其他函数名,一律首字母小写。

十、自增和自减运算符

自增(++)和自减(--)运算符,放在变量的前面或后面,返回的值不一样,很容易发生错误。

事实上,所有的++运算符都可以用"+= 1"代替。

++x;

等同于

x += 1;

代码变得更清晰了。有一个很可笑的例子,某个 JavaScript 函数库的源代码中出现了下面的片段:

++x;
++x;

这个程序员忘了,还有更简单、更合理的写法:

x += 2;

因此,

规则 14:不要使用自增(++)和自减(--)运算符,用+=和-=代替。

十一、区块

如果循环和判断的代码体只有一行,JavaScript 允许该区块(block)省略大括号。

下面的代码

if (a) b (); c ();

原意可能是

if (a) { b (); c ();}

但是,实际效果是

if (a) { b ();} c ();

因此,

规则 15:总是使用大括号表示区块。

时间: 2024-10-13 06:35:54

【荐】JavaScript编码风格的相关文章

JavaScript 编码风格指南

A.1  缩进 // 4个空格的层级缩进 if (true) { doSomething(); } A.2  行的长度 // 每行限于80个字符,超出则在运算符后换行,缩进2个层级(8个空格) doSomething(argument1, argument2, argument3, argument4, argument5); A.3  原始值 // 字符串使用双引号及长字符串的链接 var name = "Nicholas", longStr = "this is a lo

JavaScript编码风格

最近在看前端大牛Nicbolas C.Zakas的<编写可维护的JavaScript代码>一书.觉得里面的很多知识点都写的很好,所以,就写篇博文,总结一下吧!编码规范对于程序设计来说是很重要的,因为如果编码风格不一致的话,代码看上去就会很乱,是很难维护的.当然,不同的开发团队有着不同的编码规范,比较著名的有,Google编码规范,jQuery编码规范,dojo编码规范以及Yahoo!编码规范,等等. 第一,Indentation Levels(缩进).目前比较流行的是2空格缩进和4空格缩进,比

JavaScript编码风格指南(中文版)

前言:程序语言的编码风格对于一个长期维护的软件非常重要,特别是在团队协作中.如果一个团队使用统一规范的编码分风格,可以提高团队的协作水平和工作效率.编程风格指南的核心是基本的格式化规则,这些规则决定了如何编写高水准的代码.本指南来自于<编写可维护的JavaScript>这本书,基于"Java语言编码规范"和Crockford的JavaScript编程规范,还有Nicbolas的一些个人经验和喜好.写作本文旨在加深自己印象,也为了更多人的了解到JS编码风格,提高自己的编码质量

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

记录一下比较有用的编码规范(该指南是基于 Java 语言编码规范和 Javascript 编程规范,同时结合作者 Nicholos Zakas 的个人经验和喜好). 一些关于格式(包括缩进.行的长度.运算符间距.括号间距.对象直接量.注释.单行注释.多行注释等类似的规范)的规范这里不做记录. A.3 原始值 // 好的写法 var name = "Nicholos"; // 不好的写法:单引号 var name = 'Nicholos'; // 不好的写法:字符串结束之前换行 var

Airbnb JavaScript 编码风格指南(2018年最新版)

原网址 :  https://segmentfault.com/a/1190000013040555 类型 基本类型:直接存取 string number boolean null undefined symbol const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 symbol 类型不能完全polyfilled,所以请谨慎使用 复杂类型: 通过引用的方式存取 object array function

JavaScript 编码风格

缩进每一行的层级由4个空格组成 行的长度每行长度不超过80字符.如果一行超过80字符,在一个运算符(逗号,加号)后换行,下一行增加2个缩进 原始值避免使用特殊值undefined,判断一个变量是否定义用typeof操作符 注释a) 独占一行的注释,用来解释下一行代码:b) 在代码行尾部的注释,用来解释它之前的代码:c) 多行,用来注释掉一个代码 /* * 如果 * 那么 */ 严格模式严格模式应当在函数内部使用,千万不要在全局使用 // 好的写法 function doSomething() {

web项目开发 之 前端规范 --- JavaScript编码规范

JavaScript编码规范 此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 场景:web前端开发中 一些Javascript的注意事项 和 规格建议: [参考百度资料 和个人一些总结] 1 前言 JavaScript 在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使 JavaScript 代码风格保持一致,容易被理解和被维护. 虽然本文档是针对 Java

零基础JavaScript编码(二)

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&

学习一份百度的JavaScript编码规范

JavaScript编码规范 1 前言 2 代码风格 2.1 文件 2.2 结构 2.2.1 缩进 2.2.2 空格 2.2.3 换行 2.2.4 语句 2.3 命名 2.4 注释 2.4.1 单行注释 2.4.2 多行注释 2.4.3 文档化注释 2.4.4 类型定义 2.4.5 文件注释 2.4.6 命名空间注释 2.4.7 类注释 2.4.8 函数/方法注释 2.4.9 事件注释 2.4.10 常量注释 2.4.11 复杂类型注释 2.4.12 AMD 模块注释 2.4.13 细节注释 3