Javascript编程风格

作者: 阮一峰

日期: 2012年4月27日

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

  " \t\r\n " == 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:总是使用大括号表示区块。

(完)

文档信息

相关文章

  • 2013.10.21: 什么是 Event Loop?

    Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制。
  • 2013.09.02: JavaScript与有限状态机
    有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物。

功能链接

广告(购买广告位)

 
 

留言(45条)

yale 说:

请推荐一两本优秀中文js的入门教材,谢谢!

bush 说:

我始終認為 JS 在每一行末尾自動添加分號是很不好的設計。

qian 说:

赞一个 ... 平时的小问题多注意一些, 肯定会给将来写出来框架级的js代码会减少不少错误和麻烦 !

webmaster 说:

严格相等通常翻译:恒等;
建构函数通常翻译:构造函数;

RedNax 说:

有些过于吹毛求疵了。

最重要只要注意两点:
1. JS前加 "use strict"; 使新浏览器进入严格模式,保证不小心污染根对象的情形不会发生 (chrome里会抛出异常)。
2. 使用 JSLint 确保代码基本正常

已经能cover大部分问题点了。

TR 说:

@RedNax:

认同,有些编程规范要遵守,有些还是自由发挥吧,重要的还是在于编程所创造的东西,编码清晰易读就好

FrankFang 说:

不是应该写作JavaScript而不是Javascript吗?

格调 说:

引用yale的发言:

请推荐一两本优秀中文js的入门教材,谢谢!

告诉你个少走弯路的经验:不要看中国人写的书,极个别除外。推荐阅读这篇文章javascript的那些书

刘永新 说:

第九条中提到了“构建函数”,我没有使用过Javascript,不知道是不是应该是“构造函数”?

zrong 说:

JS用的少,看来代码块起始花括号换行的习惯要改了。

aaron 说:

引用yale的发言:

请推荐一两本优秀中文js的入门教材,谢谢!

老道说他那本《优良的部分》算一本

nobody 说:

因为Javascript会自动添加句末的分号,导致一些难以察觉的错误——说明阮一峰用的编辑软件不好

fish 说:

引用yale的发言:

请推荐一两本优秀中文js的入门教材,谢谢!

原文地址 http://limu.iteye.com/blog/1267475

xulboy 说:

大括号写在下面才看着清楚,你那种写法我不是很赞同.省那点地方带来的是较差的可读性.

Pob 说:

推荐阮哥了解一下CoffeeScript,在您有时间的时候

Freeman 1.01 说:

Douglas Crockford在他的Javascript:the good parts一书中,也提到了这些意见。

Freeman 1.01 说:

引用xulboy的发言:

大括号写在下面才看着清楚,你那种写法我不是很赞同.省那点地方带来的是较差的可读性.

不是可读性的问题了,左大括号单独一行在Javascript里面有可能造成错误!
(不过这是Javascript的设计问题)

colder 说:

引用Pob的发言:

推荐阮哥了解一下CoffeeScript,在您有时间的时候

我也是 CoffeeScript 的爱好者.
JavaScript 社区普遍承认并接受这门语言天生的语法缺陷, 但是他们往往不能接受对 JavaScript 语法层面的包装, 理由是导致源代码分裂, 使重用发生困难, 造成彼此之间的隔离. Express 的作者就极度不接受 CoffeeScript, 连他写的测试框架都十分不情愿支持 CoffeeScript.
所以 CoffeeScript 成了两难的选择, 目前公开的项目除了 CoffeeScript 周边的项目之外, 很少采用这门语言的.

Mr.Gidot 说:

阮兄涉足领域之广啊!

chenge 说:

jQuery作者Resig在他的书中专门写了with语句,不知道该听谁的呢?

Cat Chen 说:

使用 create 来代替 new 并不是最好的办法。jQuery 作者 John Resig 的做法更 fool-proof:如果一个函数是 constructor,在使用者忘记加 new 时应该保证跟使用了 new 的效果一致。现在很多 library 在学习 jQuery API 时也学习了这一点。

tototo 说:

什么叫不规范?那个函数名空格的地方全部都不会影响编译器,也没有同一标准,只能说这人认为这样容易读一点。

说实话,这篇文章阮先生的翻译让我失望了。。

卢达 说:

引用nobody的发言:

因为Javascript会自动添加句末的分号,导致一些难以察觉的错误——说明阮一峰用的编辑软件不好

好像这个意思是说,JavaScript 被解释执行时会被加上分号;而不是指发生在开发编辑的阶段。

卢达 说:

这篇文章中提到的关于 with\new\++ 的原则,疑似因噎废食啊

lltg 说:

前面的完全是认同,而后面说++和--运算符不要用这个我表示完全不能理解。
比如一个初学程序的例子,sum([1:100]),如果不按照这篇文章的规范,可能是这样:

var i, s = 0;
for (i = 1; i

甚至是

for (i = 1, s = 0; i

然后这篇文章告诉我们,要写成这样

var i, s;
s = 0;
for (i = 1; i
s += i;
}

借用《短码之美》作者一句话,不要责怪这些代码可读性太差,而是应该去学习学习如何读懂代码。

Priezt 说:

很多条规则都太保守了,Javascript语法本来很灵活,如果都按照这些规则来,出错率和可读性的确会提升,但写代码会变得很无趣

hax 说:

绝大部分规则都是合理的。但规则5除外。因为你总有可能漏写分号,而JS的设计导致漏写的分号难以被察觉(因为你不知道是有意漏写还是无意漏写)。所以我赞同的方式是始终不写分号,并配合合理的断行格式。只在(、[等为起始的代码行的行首加分号。参见:http://hax.iteye.com/blog/382186

达达 说:

请问 函数名与参数序列之间,没有空格。是什么意思?

keenboy 说:

挺好的,javascript的鸡肋都是滥用出来的,作者讲的是精华部分,同时javascript不等同于其他语言,他依靠网络,需要压缩,没有分号js引擎怎么解析他

萧萧 说:

其实大多数规则都没有必要,例如第一条
  return 
  {
    key:value;
  };

  return {
    key:value;
  };

为什么大家不能老老实实的写代码呢?
var ret =
  {
    key:value;
  };
return ret;

Ryan 说:

说的很有道理,而且解决以前的疑惑:局部变量可以在外部引用!原来被提到外面了。。。

Allen 说:

用=== 严格等于这条很受用

呦菜 说:

我觉得这些都是有必要的,养成良好的编写规范是件好事。像我以前就找了return(换行)的道了,结果自己还没发现,都是细小的问题。坚决支持!

兰威举 说:

对于最后一条是无论如何不能接受的,我的 CS 要求能不用大括号的地方一律不准用大括号。
而且我就是喜欢写 if ((a = b)) {...} // 如果是C语言,用 gcc -Wall 编译,会要求在 a=b 外面加括号。这样倒不容易看错

笃行天下 说:

我很幸运在没犯这些错误时了解了这些特性,对策多样的,只要牢记这些隐晦的特性即可~

韦杰 说:

呵呵,看了回复才发现大家其实都在讲英文,只不过是汉化了的英文。“抛出异常”太别扭了。

欲三更 说:

引用chenge的发言:

jQuery作者Resig在他的书中专门写了with语句,不知道该听谁的呢?

还是不用为好,因为你不能保证在你的代码域内,没有任何一个全局对象和你with的对象重名。就算你现在能保证,那以后万一有人改写程序咋办?

hhyytt 说:

很好的文章,其实遵守c/c++的语法,JS的代码会很优秀。

呆呆 说:

赞一个,都是很容易折磨人的错误。

differui 说:

有几条之前都没有注意到,感谢提醒~

anybody 说:

庸俗的想法。估计是个低俗的程序员

Alvin Tin 说:

很有python的风格~

rodney 说:

我觉得javascript最好的大全还是Javascript: the definitive Guide 6th Edition.
http://shop.oreilly.com/product/9780596805531.do

如果仅仅偏重于语言本身,Javascript Garden是一篇非常好的总结。可以说,完全掌握Garden里的每一点,语言本身就过关了。
http://bonsaiden.github.com/JavaScript-Garden/

亭子 说:

规则9:所有变量声明都放在函数的头部。
请问一下,这个指的是变量声明写在函数内的前部分,函数中代码块的上方,是这个意思么?不是写在函数外面吧?

asfree 说:

过了一遍,很有收获,写的很好,也把留言看了下,也有收获,谢谢

我要发表看法

 

您的留言 (HTML标签部分可用)

您的大名:

«-必填

电子邮件:

«-必填,不公开

个人网址:

«-我信任你,不会填写广告链接

记住个人信息?

 

«- 点击按钮

联系方式 | ruanyifeng.com 2003 - 2013 

 

FW: javascripts 要不要加引号的更多相关文章

  1. oracle查询出的字段加引号

    SELECT 'list.add("' || t.dummy || '");' as listFROM dual t where rownum < 600; 执行结果: SE ...

  2. JQuery $()后面的括号里的内容什么时候加引号,什么时候不加

    一.如果是已经声明存在的变量或者对象,就不用加引号. 比如var name=document.getElementById("name"); $(name)或者$(this). 二 ...

  3. location.pathname;outline:medium;undefined不能加引号

    1. location.pathname -- 返回URL的域名后的部分.例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/ 2. 判断某个名称为undefined时 ...

  4. 取值对比ture of false加引号与不加引号的问题-----Bug笔记-160219

    一.默认情况,当属性值为布尔值类型的时候对比判断不用加引号<input type="radio" name="city" value="BeiJ ...

  5. JS声明对象时属性名加引号与不加引号的问题

    般情况下属性名加引号和不加引号是都可以的,效果是一样的. var obj = { name : '你好', 'age' : 1, }; document.write( obj['name'] + '& ...

  6. ajax post 传参数加引号和不加引号的区别

    1.前言 用ajax技术,type:post,data:参数列表.参数列表就是一个JSON数据,但key可以加引号,也可以不加引号,那总有区别的. 2.区别 var d2 = "two&qu ...

  7. .后面是方法不加引号 ,后面是"名"要加引号

    .后面是方法不加引号 ,后面是"名"要加引号  

  8. js写css()方法,记得加引号“ ”,除非是数字

    js写css()方法,记得加引号“ ”,除非是数字.如: $("#android").css({ "position": "absolute" ...

  9. setinterval 里面的方法记得加引号

    setinterval 里面的方法记得加引号 否则不执行

随机推荐

  1. HTTP 304

    304 的标准解释是:Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档).服务器告诉客户,原来缓冲的 ...

  2. python mysql 更新和插入数据无效

    注意,在删除和增加后必须执行conn.commit()才有效,否则操作无效.

  3. WebView WebViewClient WebChromeClient

    在android中,浏览器的功能分成几个部分,每个部分分工明确,互相协作.其中: 1. WebView :专门负责网页数据解析和渲染: 2. WebViewClient :帮助WebView处理各种请 ...

  4. bsp STEP

    Web开发不仅现在比较流行,将来也会.我来谈一下最近bsp  application项目的体会吧,属初学者,请各位多多指教. SAP 的web开发方法有很多种,bsp只是其中一种,而bsp开发有可以分 ...

  5. 2016 - 1 - 24 NSURLSession (一)

    一: NSURLSession简介 1.实施步骤 1.1 使用 NSURLSession对象 创建TASK ,然后执行TASK 2.TASK的类型: 二: NSURLSession的简单使用: - ( ...

  6. C++静态成员函数小结(转)

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: 类体中 ...

  7. day13_API第三天

    1.StringBuffer类(掌握) 1.概念      字符串缓冲区类 2.机制      StringBuffer采用的是缓冲区机制. 一开始,首先开辟一些空间,然后,随着数据的增多,还可以继续 ...

  8. Python::OS 模块 -- 文件和目录操作

    os模块的简介参看 Python::OS 模块 -- 简介 os模块的进程管理 Python::OS 模块 -- 进程管理 os模块的进程参数 Python::OS 模块 -- 进程参数 os模块中包 ...

  9. 巧用TexturePacker命令行

    游戏开发使用TexturePacker来生成图片的atlas sheet, 工具非常好用. 一般GUI的方法, 新建一个tps文件, 将要图片加载进来,调整参数和输出路径, 最后点publish. 在 ...

  10. js事件处理机制

    一.事件处理程序 a.     DOM0级事件处理程序,被认为是元素的方法. var btn=document.getElementById('myBtn'); btn.onclick=functio ...