Google JavaScript Style Guide 中文翻译
October/19th 2010

    昨天不小心看到了Google Javascript Style Guide,Google在里面约定了一些名字的书写规则,也给出一些更好的建议。 下面我翻译一段个人认为很有价值的东西:

布尔表达式

以下代码在布尔表达式里都等于false:

  • null
  • undefined
  • '' 空字符串
  • 0 数字

但是请注意,以下这些等于true:

  • '0' 字符串
  • [] 空的数组
  • {} 空的对象

这就意味着本来这样的代码:

while (x != null) {

你可以这样来写(当你不希望x为0、空字符串、false时):

while (x) {

当你希望检查一个字符串是否为空的时候你可以这样:

if (y != null && y != '') {

但是这样会更简洁更高效:

if (y) {

注意: 有很多容易搞错的布尔表达式(以下表达式的值都为true):

  • Boolean('0') == true
    '0' != true 
    /* Longbill注释:
     * if ('0') alert('yes');
     * if ('0' != true) alert('yes');
     * if ('0' == false) alert('yes');
     * 以上三个都会弹出yes!!
     */
  • 0 != null
    0 == []
    0 == false
  • Boolean(null) == false
    null != true
    null != false
  • Boolean(undefined) == false
    undefined != true
    undefined != false
  • Boolean([]) == true
    [] != true
    [] == false
  • Boolean({}) == true
    {} != true
    {} != false
  • Longbill 补充下:
    NaN != true
    NaN != false
    Boolean(NaN) == false

三目运算符

这样的代码:

if (val != 0) {
  return foo();
} else {
  return bar();
}

可以被简化成这样:

return val ? foo() : bar();

三目运算符在生成html字符串的时候也很有用:

var html = '<input type="checkbox"' +
    (isChecked ? ' checked' : '') +
    (isEnabled ? '' : ' disabled') +
    ' name="foo">';

&& 和 ||

由这两个逻辑运算符连接的表达式会从左到右依次执行,直到遇到满足条件为止。

所以"||" 又被称作 '缺省值' 操作符,因为如下代码:

/** @param {*=} opt_win */
function foo(opt_win) {
  var win;
  if (opt_win) {
    win = opt_win;
  } else {
    win = window;
  }
  // ...
}

可以被简写成:

/** @param {*=} opt_win */
function foo(opt_win) {
  var win = opt_win || window; 
  // ...
}

"&&" 同样很有用。比如,如下代码:

if (node) {
  if (node.kids) {
    if (node.kids[index]) {
      foo(node.kids[index]);
    }
  }
}

可以被简写成:

if (node && node.kids && node.kids[index]) {
  foo(node.kids[index]);
}

或者这样:

var kid = node && node.kids && node.kids[index];
if (kid) {
  foo(kid);
}

甚至可以这样:

node && node.kids && node.kids[index] && foo(node.kids[index]);


使用 join() 来创建字符串

一般来说,累加字符串是很常见的:

function listHtml(items) {
  var html = '<div class="foo">';
  for (var i = 0; i < items.length; ++i) {
    if (i > 0) {
      html += ', ';
    }
    html += itemHtml(items[i]);
  }
  html += '</div>';
  return html;
}

但是这种方式在万恶的IE浏览器下会很慢,通常以下代码会更快:

function listHtml(items) {
  var html = [];
  for (var i = 0; i < items.length; ++i) {
    html[i] = itemHtml(items[i]);
  }
  return '<div class="foo">' + html.join(', ') + '</div>';
}

注意:指定数组的下标来赋值会比直接用数组的push()方法更高效。


遍历Node List

在遍历Node list 的时候,常常会用到length属性来当循环的边界条件。因为循环的时间复杂度是O(n),而每循环一次,都要检查一下边界条件(length属性),这样时间复杂度变为O(n^2):

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

这样做会更高效(时间复杂度应该是O(n) ):

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
  doSomething(paragraph);
}

以上这个方法同样适用于对象和数组(当数组不含有会被当成是false的值的时候)。

/* 原文出自:Google,翻译: Longbill (http://php.js.cn) 2010-10-19 */

另外,当你遍历一个Node的所有子Node的时候,可以用firstNode和nextSibling属性,就像这样:

var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}


8367 read 6 comment(s)
#1
上海门禁   2010年10月19号 21:29       回复
好,学习,有的地方不是很懂.
#2
宇博   2010年10月23号 10:03       回复
精确到省市级的ip地址库,这篇文章打不开,Not Found
#3
longbill   2010年10月23号 10:17       回复
@宇博 好了。。。。
#4
joel   2010年10月28号 09:29       回复
来看这里:http://kissyteam.github.com/coding-style/javascriptguide.xml
#5
longbill   2010年10月29号 17:28       回复
@joel 原来kissy那帮人已经翻译过了。。。。。不过自己翻译一下也挺好的,比粗略看一下印象要深很多。
#6
修远兮   2011年06月16号 10:08       回复
昨天看这到规范滴,内容好多,要仔细看一下了。
添加新的评论
称呼:*
邮件:*
网站:
内容:

Copyright © Longbill 2008-2024 , Designed by EndTo , Powered by EndCMS