巧妙的JavaScript写法

http://hi.baidu.com/gfflyer/blog/item/fd567d53b5b2481e0df3e320.html

最近看到了两行 JavaScript. 代码，很受启发。

1. 封装 DOM 属性

在 JavaScript. 中，我们可以获取HTML元素的属性值，例如 element.id 。但是，因为 for 和 class 是 JavaScript. 中的关键字，所以在 JavaScript. 中这两个属性名称分别用 htmlFor 和 className 代替，于是在封装的时候需要先对这两个属性进行特殊判断。通常，我们会这么写：

1 2 3 4 5 6 7 8 9 10

function getAttr(el, attrName){ var attr; if ('for' == attrName) { attr = 'htmlFor'; } else if ('class' == attrName) { attr = 'className'; } else { attr = attrName; } }

但是我在精通 JavaScript 发现了一种很妙的写法， John Resig 是这么写的：

1 2 3

function getAttr(el, attrName){ var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName; }

构建了一个对象来做判断，实在是巧妙！这样一来节省了很多代码，也就减少了BUG出现的可能性，而且也没有丧失其可读性，是很值得学习的。

2. 交换两个变量的值

这个问题相信学过一点编程的人都知道，一般来说我们会这么写：

1 2 3 4 5 6

var foo = 1; var bar = 2;   var temp = foo; foo = bar; bar = temp;

通过一个临时变量来做数据的缓冲，很直观。但是否可以不使用临时变量呢？看一下下面的这行代码：

1

foo = [bar, bar=foo][0];

没有使用到临时变量，而是利用了数组。实在是妙！

上面这两行代码看上去很简单，不像一些诸如高级算法之类的代码那么显眼，但是，如果不是对语言本身非常了解，如果没有多年的编程经验和思考，如果对数据结构不熟悉，绝对不可能写出这样的代码。或许这种对每一行代码的深思熟虑，正是大师和平庸程序员之间的区别所在。

另外，这也从侧面说明了：编程的时候不要忘记思考，否则你就只是一个完成工作的机器。所以，如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间，别犹豫，换一个。