两行 JavaScript 代码
作者:Dreamer 来源:Dreamer’s Blog 发布时间:2010-08-31 14:57:00
最近看到了两行 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这些概念,我要好好补习一下基础了。
猜你喜欢
- 一、前言学到现在,我们可以说已经学习了爬虫的基础知识,如果没有那些奇奇怪怪的反爬虫机制,基本上只要有时间分析,一般的数据都是可以爬取的,那么
- 本文实例讲述了Python使用matplotlib绘制余弦的散点图。分享给大家供大家参考,具体如下:一 代码import numpy as
- 本例子程序展示了长白山火山气体地球化学2002年观测数据中CO2和He两种气体元素深度的时间序列。程序中用到了常用的时间序列python数据
- 1、在mysql 中建立一个数据库 test1 语句:create database test1 2、创建表examinfo create
- Python简介及入门python为什么是python选择自己喜欢的语言,这往往不容易,更多的是根据需求话说,之前是java,大学用了三年+
- 目录事件类型事件处理方法处理键盘事件处理鼠标事件事件(Event)是 Pygame 的重要模块之一,它是构建整个游戏程序的核心,比如鼠标点击
- 我们首先来看下python的全部代码,大家可以直接复制后测试:#-*- encoding: utf-8 -*- import l
- 背景在我的 《Vue 3 开发企业级音乐 App》课程问答区,有个同学提了个问题,在歌手列表到歌手详情页面到转场动画中,只有进入动画,却没有
- 前言最近在工作中遇到一个问题,在创建数据库后连接数据库的时候居然报错了,错误代码是Access denied for user 'r
- 首先到官网下载python2.7.3版本,编译安装$wget http://www.python.org/ftp/python/2.7.3/
- 在自动化测试脚本的运行过程中,可以通过设置等待的方式来避免由于网络延迟或浏览器卡顿导致的偶然失败,常用的等待方式有三种:一、固定等待(tim
- 单体最佳实践的由来对于很多初创公司来说,业务的早期我们更应该关注于业务价值的交付,并且此时用户体量也很小,QPS也非常低,我们应该使用更简单
- 本文给出一条 SQL 语句用于展示在同一名服务器上,不同的数据库间查询,注意当前连接用户要对两个库都有权限SQL Server 中 SQL
- 前言为了机器人在寻路的过程中避障并且找到最短距离,我们需要使用一些算法进行路径规划(Path Planning),常用的算法有Djikstr
- Debug Textarea这个东西是在线写 js 脚本的时候,用来即时查错的东西!也就是,当发现所编写的脚本有问题的时候会有相应的提示,并
- 超级简单实现iframe框架滚动控制,前提要会简单修改原代码。step1:插入iframe标签在你想要的位置。<iframe 
- 本文我们讲述通过 array_unique()函数删除数组中重复元素。array_unique()函数,将数组元素的值作为字符串排序,然后对
- 本文实例为大家分享了Python实现图形用户界面计算器的具体代码,供大家参考,具体内容如下简易用户图形界面计算器设计思路:简易图形用户界面计
- 目录引入依赖配置构建实体类保存数据查询数据项目中需要存放大量设备日志,且需要对其进行简单的数据分析,信息提取工作.结合众多考量因素,项目决定
- 一、安装PythonPython比较稳定的两个版本是Python 3.5和Python 2.7,我用的是Python 2.7,下载地址是:h