两行 JavaScript 代码

标签: tip Web Develop JavaScript 技术 | 发表时间:2010-08-08 15:35 | 作者:Dreamer MessyCS
出处:http://www.zhuoqun.net

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

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. 交换两个变量的值

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

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

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

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

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

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

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

UPDATE:
首先感谢大家的热烈讨论。看了大家的讨论之后,我觉得要做一个说明。

这篇日志里面举的第二个例子和第一个例子放在一起确实有欠妥当,因为第二个例子只是一个“妙”字,在可读性方面确实没什么可取之处,只考虑这一方面,这种代码就不推荐在工作中写。

关于效率问题,使用临时变量和构建一个临时数组都是分配一块内存把数据放进去,它们之间的效率差别就是在构建数组的过程,而构建数组的效率是因浏览器引擎而异的,比如说在很多浏览器下面,数组声明使用 var a = [] 要比 var a = new Array 效率高,在有些浏览器下差别就不大,但可以肯定的是,构建数组肯定比单值变量耗时,效率方面这行代码也不行。虽然 jay.li 同学说的很对,“测试结果受浏览器类型和硬件影响,衡量操作速度的硬指标是‘算法时间复杂度’和‘空间复杂度’”,不过在实际工作中来说,尽管可能两种写法的复杂度都是 O(1),但是 1s 和 1000s 的差别我们还是要计较的。

关于 Y.Boy 同学所说的变量声明周期问题,既然你说“函数体内的局部变量在函数执行完后,就会被销毁”,那么为什么下面这段代码可以工作呢:

function example(arg1){
  var localVar = 2;
  return function inner(arg2){
    return arg1+localVar + arg2;
  }
}
 
var result = example(3);
var sum = result(4); // sum = 9;

最后,多谢 jay.li 同学提醒有关堆栈、scopChain这些概念,我要好好补习一下基础了。

相关日志

相关 [javascript 代码] 推荐:

两行 JavaScript 代码

- MessyCS - Dreamer's Blog
最近看到了两行 JavaScript 代码,很受启发. 在 JavaScript 中,我们可以获取HTML元素的属性值,例如 element.id. 但是,因为 for 和 class 是 JavaScript 中的关键字,所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替,于是在封装的时候需要先对这两个属性进行特殊判断.

一段Javascript的代码

- Deland - 酷壳 - CoolShell.cn
我们先看一段Javascript的代码,如下所示:(你能看出来这是干什么的. 这段代码来自BlackHat DC 2011((黑帽安全大会,全世界最大两个黑客大会之一,另一个是Defcon)中的一个叫Ryan Barnett黑客做的XSS Street-Fight. 的演讲(XSS是Web上比较经典的跨站式攻击,操作起来也有些复杂),一共69页,基本上都是一些比较枯燥的Javascript,不过这段代码挺有意思的,如果上面这段代码换个样子:.

JavaScript代码复用模式

- - SegmentFault 最新的文章
代码复用,顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用,从而构建新的程序. 在谈及代码复用的时候,我们首先可以想到的是 继承性. 优先使用对象组合,而不是类继承. 在js中,由于没有类的概念,因此实例的概念也就没多大意义,js中的对象是简单的键-值对,可以动态的创建和修改它们. 但在 js中,我们可以使用构造函数和 new操作符来实例化一个对象,这与其他使用类的编程语言在语法上有其相似之处.

更好的用vim浏览Javascript代码

- cRabdanceR - Kejun's Blog
vim默认没有一般IDE的outline视图,浏览长篇Javascript源文件很麻烦,taglist插件正是弥补这点不足. 它可以将所有方法和变量分级罗列出来,一目了然. taglist是依赖强大的ctags实现的. ctags支持41种编程语言,其中包括Javascript,但对Javascript支持较随意.

使用 JSLint 保证 JavaScript 代码质量

- zhibin - IBM developerWorks 中国 : Web development : Articles,Tutorials
随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式. JavaScript 语言本身是一种弱类型脚本语言,具有相对于 C++ 或 Java 语言更为松散的限制,一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现.

也谈JavaScript代码性能优化

- 可乐加糖 - Fdream's Blog
差不多两年前写了个选择器whiz,除在DOM查找方面做了许多优化工作之外,还在代码优化上做了很多工作,一直没有分享. 抽空总结一下,基本上在jQuery、Mootools和YUI的源码里面都可以看到这些写法. 有些是已经在网上分享很多遍了,众所周知的,也有一些可能写了多年的JavaScript的开发人员也不一定想得到的.

用JSLint精炼提升JavaScript代码

- - 博客 - 伯乐在线
英文原文: Using JSLint to Refine Your Code,编译: 伯乐在线 – 胡蓉( @蓉_inShanghai). 由于移动应用的盛行和HTML5的广泛运用,JavaScript正越来越流行. JavaScript受欢迎的部分原因是因为它的灵活便捷,你可以快速上手,它不需要重量级的开发环境,也不需要第三方应用支持,只要你打开一个文本编辑器,然后保存,最后通过网页 浏览器运行即可.

JavaScript:避免代码的重复执行

- - WebHek
我喜欢到一些大型网站上去翻阅它们的原代码,期望能找到一些可以应用到自己的代码中的模式,或发现一些之前从未听说过的工具和技巧. 可是,在我查看这些大型网站的源代码时,经常会发现一个问题,那就是重复的代码执行,重复的功能应用. 下面就是一些在查看它们的源代码时发现一些问题,把这些分享给大家,希望能让你们更加简洁高效的写出JavaScript代码.

Android WebView中的JavaScript代码使用

- - 博客园_首页
  上一篇博文: Android WebView使用基础已经说了一些Android中WebView的基本使用.   本篇文章主要介绍WebView中的JavaScript代码的执行相关,已经JS代码与Android代码的互相调用.   (因为本人对Web开发并不是很熟悉,所以如果有哪些地方说得不对,还请指正.

FSF建议Google公开Gmail的Javascript代码

- greenar - Solidot
自由软件基金会(FSF)主席Richard Stallman声称,非自由的基于AJAX的Web应用是“Javascript trap”. 为了解决这一问题,FSF建议Google在自由软件许可证下公开Gmail的Javascript源代码. 当你访问Gmail,浏览器会下载和运行几千行Javascript代码.