【几行JS,很受启发】

转载 (原文地址) 夜空 教程 JS 521阅读 2017-12-25 15:40:55 举报

1. 封装 DOM 属性

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

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

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

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

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

2. 交换两个变量的值[/color]

这个问题相信学过一点编程的人都知道,一般来说我们会这么写:
[color=#548dd4]
var foo = 1;
var bar = 2;

var temp = foo;
foo = bar;
bar = temp;[/color]
通过一个临时变量来做数据的缓冲,很直观。但是否可以不使用临时变量呢?看一下下面的这行代码:

[color=#d99694]foo = [bar, bar=foo][0];
没有使用到临时变量,而是利用了数组。实在是妙!

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

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

评论 ( 2 )
最新评论
夜空 1F 2017-12-26 08:41:30 2F

<font color='red' size='20'>牛掰</font>

wq627100 2017-12-25 20:17:12 1F

html 代码