垃圾回收站

April 27, 2008

10年编程无师自通

[ 分类: 其他技术 ] 由 弗里曼·潘 发表于 3:49 am 评论( 0 )

FooSleeper 翻译   更新:2005-01-12 10:18:06  版本: 1.09   

原文:Teach Yourself Programming in Ten Years
作者:Peter Norvig
翻译:郭晓刚(foosleeper@163.net)
最后修订日期:2004-3-19
2005-01-12增加了新的译本链接。

本中文译本得到了Peter Norvig的许可。

为什么每个人都急不可耐?

走进任何一家书店,你会看见《Teach Yourself Java in 7 Days》(7天Java无师自通)的旁边是一长排看不到尽头的类似书籍,它们要教会你Visual Basic、Windows、Internet等等,而只需要几天甚至几小时。我在Amazon.com上进行了如下搜索:
pubdate: after 1992 and title: days and (title: learn or title: teach yourself)
(出版日期:1992年后 and 书名:天 and (书名:学会 or 书名:无师自通))
我一共得到了248个搜索结果。前面的78个是计算机书籍(第79个是《Learn Bengali in 30 days》,30天学会孟加拉语)。我把关键词“days”换成“hours”,得到了非常相似的结果:这次有253本书,头77本是计算机书籍,第78本是《Teach Yourself Grammar and Style in 24 Hours》(24小时学会文法和文体)。头200本书中,有96%是计算机书籍。
结论是,要么是人们非常急于学会计算机,要么就是不知道为什么计算机惊人地简单,比任何东西都容易学会。没有一本书是要在几天里教会人们欣赏贝多芬或者量子物理学,甚至怎样给狗打扮。
让我们来分析一下像《Learn Pascal in Three Days》(3天学会Pascal)这样的题目到底是什么意思:

学会:在3天时间里,你不够时间写一些有意义的程序,并从它们的失败与成功中学习。你不够时间跟一些有经验的程序员一起工作,你不会知道在那样的环境中是什么滋味。简而言之,没有足够的时间让你学到很多东西。所以这些书谈论的只是表面上的精通,而非深入的理解。如Alexander Pope(译注:英国诗人、作家,1688-1744)所言,一知半解是危险的(a little learning is a dangerous thing)

Pascal:在3天时间里你可以学会Pascal的语法(如果你已经会一门类似的语言),但你无法学到多少如何运用这些语法。简而言之,如果你是,比如说一个Basic程序员,你可以学会用Pascal语法写出Basic风格的程序,但你学不到Pascal真正的优点(和缺点)。那关键在哪里?Alan Perlis(译注:ACM第一任主席,图灵奖得主,1922-1990)曾经说过:“如果一门语言不能影响你对编程的想法,那它就不值得去学”。另一种观点是,有时候你不得不学一点Pascal(更可能是Visual Basic和JavaScript之类)的皮毛,因为你需要接触现有的工具,用来完成特定的任务。但此时你不是在学习如何编程,你是在学习如何完成任务。

3天:不幸的是,这是不够的,正如下一节所言。

10年编程无师自通

一些研究者(Hayes、Bloom)的研究表明,在许多领域,都需要大约10 年时间才能培养出专业技能,包括国际象棋、作曲、绘画、钢琴、游泳、网球,以及神经心理学和拓扑学的研究。似乎并不存在真正的捷径:即使是莫扎特,他4 岁就显露出音乐天才,在他写出世界级的音乐之前仍然用了超过13年时间。再看另一种音乐类型的代表–披头士,他们似乎是在1964年的Ed Sullivan节目中突然冒头的。但其实他们从1957年就开始表演了,即使他们很早就显示出了巨大的吸引力,他们第一次真正的成功之作《Sgt. Peppers》也要到1967年才发行。Samuel Johnson(译注:英国诗人)认为10 年还是不够的:“任何领域的卓越成就都只能通过一生的努力来获得;稍低一点的代价也换不来。”(Excellence in any department can be attained only by the labor of a lifetime; it is not to be purchased at a lesser price.) 乔叟(译注:Chaucer,英国诗人,1340-1400)也抱怨说:“生命如此短暂,掌握技艺却要如此长久。”(the lyf so short, the craft so long to lerne.)
下面是我在编程这个行当里获得成功的处方:

对编程感兴趣,因为乐趣而去编程。确定始终都能保持足够的乐趣,以致你能够将10年时间投入其中。

跟其他程序员交谈;阅读其他程序。这比任何书籍或训练课程都更重要。

编程。最好的学习是从实践中学习。用更加技术性的语言来讲,“个体在特定领域最高水平的表现不是作为长期的经验的结果而自动获得的,但即使是非常富有经验的个体也可以通过刻意的努力而提高其表现水平。”(p. 366),而且“最有效的学习要求为特定个体制定适当难度的任务,有意义的反馈,以及重复及改正错误的机会。”(p. 20-21)《Cognition in Practice: Mind, Mathematics, and Culture in Everyday Life》(在实践中认知:心智、数学和日常生活的文化)是关于这个观点的一本有趣的参考书。

如果你愿意,在大学里花上4年时间(或者再花几年读研究生)。这能让你获得一些工作的入门资格,还能让你对此领域有更深入的理解,但如果你不喜欢进学校,(作出一点牺牲)你在工作中也同样能获得类似的经验。在任何情况下,单从书本上学习都是不够的。“计算机科学的教育不会让任何人成为内行的程序员,正如研究画笔和颜料不会让任何人成为内行的画家”,Eric Raymond,《The New Hacker’s Dictionary》(新黑客字典)的作者如是说。我曾经雇用过的最优秀的程序员之一仅有高中学历;但他创造出了许多伟大的软件,甚至有讨论他本人的新闻组,而且股票期权让他达到我无法企及的富有程度(译注:指Jamie Zawinski,XEmacs和Netscape Navigator的作者)。

跟别的程序员一起完成项目。在一些项目中成为最好的程序员;在其他一些项目中当最差的一个。当你是最好的程序员时,你要测试自己领导项目的能力,并通过你的洞见鼓舞其他人。当你是最差的时候,你学习高手们在做些什么,以及他们不喜欢做什么(因为他们让你帮他们做那些事)。

接手别的程序员完成项目。用心理解别人编写的程序。看看在没有最初的程序员在场的时候理解和修改程序需要些什么。想一想怎样设计你的程序才能让别人接手维护你的程序时更容易一些。

学会至少半打编程语言。包括一门支持类抽象(class abstraction)的语言(如Java或C++),一门支持函数抽象(functional abstraction)的语言(如Lisp或ML),一门支持句法抽象(syntactic abstraction)的语言(如Lisp),一门支持说明性规约(declarative specification)的语言(如Prolog或C++模版),一门支持协程(coroutine)的语言(如Icon或Scheme),以及一门支持并行处理(parallelism)的语言(如Sisal)。

记住在“计算机科学”这个词组里包含“计算机”这个词。了解你的计算机执行一条指令要多长时间,从内存中取一个word要多长时间(包括缓存命中和未命中的情况),从磁盘上读取连续的数据要多长时间,定位到磁盘上的新位置又要多长时间。(答案在这里。)

尝试参与到一项语言标准化工作中。可以是ANSI C++委员会,也可以是决定自己团队的编码风格到底采用2个空格的缩进还是4个。不论是哪一种,你都可以学到在这门语言中到底人们喜欢些什么,他们有多喜欢,甚至有可能稍微了解为什么他们会有这样的感觉。

拥有尽快从语言标准化工作中抽身的良好判断力。

抱着这些想法,我很怀疑从书上到底能学到多少东西。在我第一个孩子出生前,我读完了所有“怎样……”的书,却仍然感到自己是个茫无头绪的新手。30个月后,我第二个孩子出生的时候,我重新拿起那些书来复习了吗?不。相反,我依靠我自己的经验,结果比专家写的几千页东西更有用更靠得住。
Fred Brooks在他的短文《No Silver Bullets》(没有银弹)中确立了如何发现杰出的软件设计者的三步规划:

尽早系统地识别出最好的设计者群体。

指派一个事业上的导师负责有潜质的对象的发展,小心地帮他保持职业生涯的履历。

让成长中的设计师们有机会互相影响,互相激励。

这实际上是假定了有些人本身就具有成为杰出设计师的必要潜质;要做的只是引导他们前进。Alan Perlis说得更简洁:“每个人都可以被教授如何雕塑;而对米开朗基罗来说,能教给他的倒是怎样能够不去雕塑。杰出的程序员也一样”。
所以尽管去买那些Java书;你很可能会从中找到些用处。但你的生活,或者你作为程序员的真正的专业技术,并不会因此在24小时、24天甚至24个月内发生真正的变化。

参考文献

Bloom, Benjamin (ed.) Developing Talent in Young People, Ballantine, 1985.
Brooks, Fred, No Silver Bullets, IEEE Computer, vol. 20, no. 4, 1987, p. 10-19.
Hayes, John R., Complete Problem Solver, Lawrence Erlbaum, 1989.
Lave, Jean, Cognition in Practice: Mind, Mathematics, and Culture in Everyday Life, Cambridge University Press, 1988.

答案

各种操作的计时,2001年夏天在一台典型的1GHz PC上完成:
执行单条指令 1 纳秒 = (1/1,000,000,000) 秒
从L1缓存中取一个word 2 纳秒
从主内存中取一个word 10 纳秒
从连续的磁盘位置中取一个word 200 纳秒
从新的磁盘位置中取一个word(寻址) 8,000,000纳秒 = 8毫秒

脚注

T. Capey指出Amazon上面《Complete Problem Solver》的页面中,《Teach Yourself Bengali in 21 days》和《Teach Yourself Grammar and Style》被列在了“购买此书的顾客还买了以下书籍”栏目里面。我猜其中一大部分察看这两本书的人都是从我这里过去的。

译本

感谢以下作者将本文翻译成其他语言:
日文(Yasushi Murakawa),中文(郭晓刚),繁体中文(Jason Chen),西班牙文(Carlos Rueda),德文(Stefan Ram),法文(P. E. Allary),土耳其文(Çağıl Uluşahin)。

Peter Norvig (Copyright 2001)


April 15, 2008

Javascript风格要素

[ 分类: Javascript ] 由 弗里曼·潘 发表于 2:16 am 评论( 0 )

http://dancewithnet.com/2008/01/26/the-elements-of-javascript-style-part-one/

程序设计是困难的,其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。

好的体系架构是必需给程序足够的结构使其健壮而不会陷入混乱的泥淖,但我们表达一个程序细节的方式是同等重要的。一个程序的本质会被不良的编码所隐藏。只有当一个程序的表达清晰时,我们才能有希望正确的推理出它的效率、安全和正确性。

William Strunk的《风格要素》(The Elements of Style)是关于文学风格的经典著作,它是一本关于英文写作的薄手册,在用法、组织和形式上提出忠告。风格的理念应用于编程,在1972年Kreitzberg和Shneiderman的《FORTRAN风格要素》(The Elements of FORTRAN Style)中是不成功的,但在1978年的Kernighan和Plauger的《编程风格要素》(The Elements of Programming Style)中是非常成功的:

好的编程不能通过笼统的说教。学习编程的好方法是一次又一次的思考:真正的编程是如何通过一些良好实践的原则和一点常识来进行改进的。

他们从他们批评和改进的其他的编程教科书中筛选程序。

当我们在这里谈论风格时,我们谈论的不是潮流或者时尚,也不是CSS、布局惯例或排版。我们正在谈论的是能真正提高代码价值的表达式的永恒品质。对于公司来说,他们的评估和他们的代码是息息相关的,风格应该是一个至关重要的受关注内容。

我们使用许多编程语言,但在某一方面,Javascript是最重要的,它是浏览器的语言。当人们访问我们的站点时,他们将邀请我们的Javascript程序在他们的机器中执行。我们有义务使那些程序执行好。

没有好的关于Javascript编程的课本。在网页使用Javascript的大多数人学习它是通过从糟糕的书、糟糕的站点和糟糕的工具中复制相当糟糕的例子。我们这里有极好的Javascript程序员社区,但我们依旧能从较好的风格实践中获益。

为了证明这个问题,我将从公共网站中抽取一些程序,展示它们如何能被改进。这并不是我有意为难任何人。我的意图仅是通过例子展示风格的价值。我不会保留任何秘密:我展示给你的是我们已经传送给世界上的每一个人。
淘汰过时结构

下面的例子是2005-09-19摘自www.yahoo.com:
<script language=javascript><!–
     lck=”,
     sss=1127143538,
     ylp=’p.gif?t=1127143538&_ylp=A0Je5ipy2C5D54AAwVX1cSkA’,
     _lcs=”;
–></script>

这个脚本块用了language属性。这个特性是微软为了支持VBScript引入的。然而Netscape采用它是为了支持非标准偏差。W3C不采取这个language属性,倾向使用MIME类型的type属性取代。不幸的是,MIME类型未得到标准化,所以它有时是”text/javascript”、”application/ecmascript”或其他。幸运的是所有的浏览器都选择Javascript作为默认的编程语言,所以简单的写<script>是最好的。它最小,且工作在最多的浏览器。在脚本中使用HTML的注释的时间要回溯到Netscape Navigator和Netscape Navigator 2的兼容问题上来。后者引入了<script>标签。然而,前者的用户能像文本一样看到脚本,因为在HTML惯例中不能识别的标签被忽略。<!–注释hack在Netscape Navigator 3出现的时候是需要的,现在它不被需要了。它是丑陋的且浪费空间的。

逗号运算符像Javascript语法的大多数一样从C语言中借用。逗号运算符获得两个值,且返回第二个。在语言的定义中它的存在易于掩盖一定的编码错误,编译器也易于对一些错误视而不见。最好避免逗号运算符,并以分号运算符代替。

在这个案例里,我们定义了一些全局变量。当指定一个未知(匿名)的变量时,Javascript会创建一个新的全局变量来替代产生的错误。事后看来,这是一个错误。即使当他们是一个标准错误,这是避免错误的最好办法。我们应该明确的声明变量。它花费我们四个字符,但是它正是要做的正确的事。
<script>
var lck = ‘3ek6b0i2he2a5eh3/o’,
    sss = 1126894256,
    ylp = ‘p.gif?t=1126894256&_ylp=A0Je5iOwCitDw2YBX331cSkA’,
    _lcs = ‘94040′;
</script>

从上面我们能得出这样的原则:淘汰过时结构
结构化语句要始终使用区块

下面这个例子是一个cookie类构造器。它创建了一个有get和set方法的对象。
function yg_cookie() {
    this.get = function (n) {
        var s,
            e,
            v = ”,
            c = ‘ ‘ + document.cookie + ‘;’;
        if ((s = c.indexOf((’ ‘ + n + ‘=’))) >= 0) {
            if ((e = c.indexOf(’;',s)) == -1)
                e = c.length;
            s += n.length + 2;
            v = unescape(c.substring(s, e));
        }
        return (v);
    }
    this.set = function (n,v,e) {
        document.cookie = n + "=" + escape(v) +
            ";expires=" + (new Date(e * 1000)).toGMTString() +
            ";path=/" + ";domain=www.yahoo.com";
    }
}
var _yc = new yg_cookie();

Javascript的if语句和C语言的相似:它能执行一个语句或一个区块。关于用语句的问题是一个普通的错误非常难以探测。最好把
if ((e = c.indexOf(’;', s)) == -1)
    e = c.length;

写成
if ((e = c.indexOf(’;', s)) == -1) {
    e = c.length;
}

区块的用处是避免了下面的情况:
if ((e = c.indexOf(’;', s)) == -1)
    e = c.length;
    s += n.length + 2;

它将出现当indexOf返回-1是,s是只被增加,但这不是实际情形。像这样的bug被发现代价是非常高的,但是可以通过一直使用大括号声明结构来廉价的避免。
避免赋值表达式

Javascript从C继承的另一个坏习惯是赋值表达式。它出现在流线型代码中,但它能使控制流更难以理解。如果我们从他们的使用中分离了s和e的计算,get方法会变得更清晰。
this.get = function (n) {
    var v = ”,
        c = ‘ ‘ + document.cookie + ‘;’,
        s = c.indexOf((’ ‘ + n + ‘=’)),
        e = c.indexOf(’;', s);
    if (s >= 0) {
        if (e == -1) {
            e = c.length;
        }
        s += n.length + 2;
        v = unescape(c.substring(s, e));
    }
    return (v);
}

我们现在能看到当s被计算时,在indexOf参数两边有多余的括号。(在return语句中也有非必须的括号。)但是更重要的是,能容易的看出if (e == -1)的目的是什么:如果cookie中末尾的分号不存在,假定cookie结束在字符串的末端。然而,当我们计算c时,我们在cookie中加入了一个分号,它保证了预料的if条件将绝不会发生。所以我们能移除if。
使用对象参数

当一个函数被指定一个值,像在this.get = function (n) { … }中,它应该以一个分号来结束所有的赋值语句。
function yg_cookie() {
    this.get = function (n) {
        var v = ”,
            c = ‘ ‘ + document.cookie + ‘;’,
            s = c.indexOf((’ ‘ + n + ‘=’));
        if (s >= 0) {
            s += n.length + 2;
            v = unescape(c.substring(s, c.indexOf(’;', s)));
        }
        return v;
    };
    this.set = function (n,v,e) {
        document.cookie = n + "=" + escape(v) +
            ";expires=" + (new Date(e * 1000)).toGMTString() +
            ";path=/" + ";domain=www.yahoo.com";
    };
}
var _yc = new yg_cookie();

最后,我们看到yg_cookie是一个能产生一个无状态对象的构造器。我们一点也不需要构造器函数。我们能简单创建一个空对象,通过指派方法的方式来增加它。
var _yc = new Object();
_yc.get = function (n) {
    var v = ”,
        c = ‘ ‘ + document.cookie + ‘;’,
        s = c.indexOf((’ ‘ + n + ‘=’));
    if (s >= 0) {
        s += n.length + 2;
        v = unescape(c.substring(s, c.indexOf(’;', s)));
    }
    return v;
};
_yc.set = function (n,v,e) {
    document.cookie = n + "=" + escape(v) +
        ";expires=" + (new Date(e * 1000)).toGMTString() +
        ";path=/" + ";domain=www.yahoo.com";
};

如果我们不需要支持Netscape3和IE4,我们能通过对象字面量来实现的更加优雅。
var _yc = {
    get: function (n) {
        var v = ”,
            c = ‘ ‘ + document.cookie + ‘;’,
            s = c.indexOf((’ ‘ + n + ‘=’));
        if (s >= 0) {
            s += n.length + 2;
            v = unescape(c.substring(s, c.indexOf(’;', s)));
        }
        return v;
    },
    set: function (n,v,e) {
        document.cookie = n + "=" + escape(v) +
            ";expires=" + (new Date(e * 1000)).toGMTString() +
            ";path=/" + ";domain=www.yahoo.com";
    }
};
使用通用库

此时对于处理cookies我们有几种方法。我们发现下一个事情是令人惊奇的,它是没有利用我们定义的方法的cookies处理方式代码。
var b,
    l = ”,
    n = ‘0′,
    y;
y = ‘ ‘ + document.cookie + ‘;’;
if ((b = y.indexOf(’ Y=v’)) >= 0) {
    y = y.substring(b, y.indexOf(’;', b)) + ‘&’;
    if ((b = y.indexOf(’l=’)) >= 0) {
        l = y.substring(b + 2, y.indexOf(’&’, b));
        if ((b = y.indexOf(’n=’)) >= 0)
            n = y.substring(b + 2, y.indexOf(’&’, b));
    }
}

它甚至复制了我们早前看到的同样技术。很有可能两块代码都改写自同一个有缺点的原稿。我们可以利用我们最近的工作来改进它:
var l = ”,
    n = ‘0′,
    y = _yc.get(’Y') + ‘&’,
    b = y.indexOf(’l=’);
if (b >= 0) {
    l = y.substring(b + 2, y.indexOf(’&’, b));
    b = y.indexOf(’n=’);
    if (b >= 0) {
        n = y.substring(b + 2, y.indexOf(’&’, b));
    }
}

代码重用是软件工程的圣杯。我们可以想象通过最先进的技术避免大量的必需的手工工作来得到高效率。这里我们发现一种失败,使用一种方法需要在相邻需要它的地方进行定义。

软件的体系结构倾向于反映生产他们的组织结构。在这种情况下,我们看到一个组织由于缺乏流程的连通意识而导致的明显低效的证据。风格的应用是吹毛求疵的,因为如果我们理解这几条是什么才有可能正确的一起使用这几条。

原文:Douglas Crockford的The Elements of JavaScript Style Part One

 

我们使用习惯用法可以使我们的意图更加的清晰和简洁。
使用==时,当心强制转换

考虑下面函数:
function gw(f) {
    if (d.w.sv.checked == true) {
        zv = ‘on’;
    } else {
        zv = ‘off’;
    }
    procframe.location.replace("http://b.www.yahoo.com/module/wtr_tr.php?p=" +
        escape(f.p.value) + "&sv=" + zv);
    return false;
}

==运算符不应该被用着和true比较值,因为它要执行强制转换。如果我们想确定d.w.sv.checked是否是布尔值
true,我们必须用===运算符。如果我们仅在意一个值是真实存在的不是假的,最好不要用相等运算符。

例如,由于强制转换:1 == true是真,1 === true是假。==运算符隐藏了类型错误。
使用?:运算符选择两值之一

if语句通常被用来从两个值中选择一个。这应该是三元操作符?:最适合的。
zv = d.w.sv.checked ? ‘on’ : ‘off’;
绝不使用隐含的全局变量

变量zv不是作为一个var或函数参数来声明的,所以它是一个隐式的全局变量。如果这个页面的另一个函数使用了同样名字的全局变量,则可能得到一个失败的结果。这样的臭虫(bug)是非常难以发现,却很容易避免。这个例子中,我们既可以声明zv为一个var,也可以发现它仅仅被使用过一次而整个去掉它。
function gw(f) {
    procframe.location.replace("http://b.www.yahoo.com/module/wtr_tr.php?p=" +
        escape(f.p.value) + "&sv=" + d.w.sv.checked ? ‘on’ : ‘off’);
    return false;
}
绝不使用?:运算符选择两种行为之一

我们常质疑那些返回一个常量的函数,但这有时是在浏览器环境下所必需的。

下面我们看一个不正确使用?:运算符的例子。它常被用于在两个任务间选择。
function u(o, z) {
    var em = o.id.substring(1);
    var p = d.getElementById(’e’ + em);
    if (p) {
        (z == 0) ? p.style.backgroundColor = ‘#fff’ :
                   p.style.backgroundColor = ‘#989898′;
    }
    p = d.getElementById(’e’ + (em - 1));
    if (p) {
        (z == 0) ? p.style.backgroundColor = ‘#fff’ :
                   p.style.backgroundColor = ‘#989898′;
    }
}

对Z的判断是模糊不清的。Z正好等于0时我们选择#fff颜色,那么,Z不等于时?如上所述似乎指明的是前者,但它实际上是后者。在这个例子中幸运的是,我们大概想要的就是后者,所以它不是技术上错误(这次)。但是在文体上只糟糕的。

我们可以用if代替?:,但碰巧的是这些值对应的是同一个左值(lvalue),所以我们无需if就可以改正这个错误。
function u(o, z) {
    var em = o.id.substring(1),
        p = d.getElementById(’e’ + em);
    if (p) {
        p.style.backgroundColor = z ? ‘#fff’ : ‘#989898′;
    }
    p = d.getElementById(’e’ + (em - 1));
    if (p) {
        p.style.backgroundColor = z ? ‘#fff’ : ‘#989898′;
    }
}
使用||运算符指定一个默认值

事件处理程序依赖于浏览器。理想情况下,应用程序应该通过公共库隔绝对浏览器的依赖。当没有这样的库时,就会有些函数发生如下情况:
function md(e) {
    (window.event) ? ev = window.event : ev = e;
    (ev.target) ? sr = ev.target : sr = ev.srcElement;
    if (ev && sr && sr.id == "fp" || sr.id == "sb") st = 1;
    if (sr.className.indexOf("pllist") < 0 && sr.className != "more" &&
            sr.className != "plinkc" && sr.tagName != "scrollbar " &&
            _toClose && _toCloseNorgie) {
        d.getElementById(_toClose).innerHTML = "";
        _toClose = "";
        _toCloseNorgie.parentNode.className = ”;
        _toCloseNorgie = ”;
    }
}

一些浏览器把事件对象作为一个参数传给事件管理程序。微软选用把事件对象放入到一个全局的事件变量中。在Javascript中,全局变量是全局对象的成员。在浏览器中,全局对象始终包含一个window对象成员,其值是全局对象。当测试一个变量是否存在时,通过window访问全局变量是避免未定义变量错误的一种方法。无论如何,做这样的测试不应该是必要的。

我们能通过问它是否是另外一种,来代替首先判断是否是微软事件。
ev = e || event;

我们用||(默认)运算符。如果e是真,我们将有它的值,但是如果e是假,则我们将用event。

在下一个语句,我们又用||运算符去确定sr是哪个值。

我们应该用var去声明ev和sr来避免全局冲突:
function md(e) {
    var ev = e || event,
        sr = ev.target || ev.srcElement;
    if (sr && (sr.id == ‘fp’ || sr.id == ’sb’)) {
        st = 1;
    }
    if (sr.className.indexOf(’pllist’) < 0 && sr.className != ‘more’ &&
            sr.className != ‘plinkc’ && sr.tagName != ’scrollbar ‘ &&
            _toClose && _toCloseNorgie) {
        d.getElementById(_toClose).innerHTML = ”;
        _toClose = ”;
        _toCloseNorgie.parentNode.className = ”;
        _toCloseNorgie = ”;
    }
}
全局变量是魔鬼

下面我们看到另一个时间处理程序。正如你所料,它重复像前面一样破坏风格。
function kd(e) {
    (window.event) ? ev = window.event : ev = e;
    (ev.target) ? el = ev.target : el = ev.srcElement;
    if (ev && el) {
        code = ev.keyCode;
        id = el.id;
    } else {
        return;
    }
    ctn = lt.id.substring(1);
    if (code == 13) {
        return;
    } else if ((code == 191 || code == 222) && id != ‘fp’) {
        _ffs = 1;
        gk = 0;
    } else if ((code < 31 || code > 41) &&
            (code < 16 || code > 18) && code != 9 && code != 8 ) {
        gk = 1;
    } else {
        gk = 0;
    }
    if (!_ffs && (id == ‘fp’ || id == ’st’)) {
        if (code == 9) {
            if (box.value == ” || (box.value != ” && (at == 1 || ev.shiftKey))) {
                mt(ctn);
            } else if (id == ’st’ && box.value != ” && at == 0) {
                at = 1;
                mt(ctn);
            }
        } else if (id == ‘fp’ && gk == 0 &&  (box.value == ” && st == 0)
                                 && !ev.shiftKey && !ev.ctrlKey && !ev.altKey) {
            d.getElementById(’mk’).focus();
            d.getElementById(’mk’).blur();
        } else if (gk == 1) {
            at = 0;
        }
    } else if ((id == ‘mk2′ && box.value != ” && ev.shiftKey && code == 9) ||
            (id == ‘m6′ && !ev.shiftKey && code == 9)){
        d.getElementById(’mk’).focus();
    } else if (!_ffs && gk == 1 && el.type != ‘text’ && !ev.ctrlKey && !ev.altKey){
        box.value = ”;
        box.focus();
    }
}
function mt(ctn) {
    if ((ev && !ev.ctrlKey && !ev.altKey) || !ev) {
        if (ev.shiftKey){
            nextTab = parseInt(ctn) - 1;
        } else {
            nextTab = parseInt(ctn) + 1;
        }
        if (nextTab == 0) {
            d.getElementById(’mk’).focus();
        } else if (nextTab < 8 ) {
            t(d.getElementById(’v’ + nextTab));
        } else {
            return;
        }
    }
}

有意思的是它有一个同伴函数mt,它仅被kd调用。mt被传给一个参数ctn,但kd和mt之间的通讯大部分是通过全局变量。
使用内部函数避免全局变量

我们可以通过增加传递给mt的参数数量来除掉所有的全局变量。但代替方案,我们将使mt变成kd的内部函数。作为一个内部函数,mt能访问kd的所有变量。
unction kd(e) {
    var ev = e || event,
        el = ev.target || ev.srcElement,
        cnt,
        code = ev.keyCode,
        gk,
        id = el.id,
        ctn = lt.id.substring(1);

    function mt() {
        var nextTab;
        if (!ev.ctrlKey && !ev.altKey) {
            nextTab = parseInt(ctn) + ev.shiftKey ? -1 : 1;
            if (!nextTab) {
                d.getElementById(’mk’).focus();
            } else if (nextTab < 8 ) {
                t(d.getElementById(’v’ + nextTab));
            }
        }
    }

    if (code == 13) {
        return;
    } else if ((code == 191 || code == 222) && id != ‘fp’) {
        _ffs = 1;
        gk = 0;
    } else if ((code < 31 || code > 41) &&
            (code < 16 || code > 18) && code != 9 && code != 8 ) {
        gk = 1;
    } else {
        gk = 0;
    }
    if (!_ffs && (id == ‘fp’ || id == ’st’)) {
        if (code == 9) {
            if (box.value == ” ||
                    (box.value != ” && (at == 1 || ev.shiftKey))) {
                mt();
            } else if (id == ’st’ && box.value != ” && at == 0) {
                at = 1;
                mt();
            }
        } else if (id == ‘fp’ && gk == 0 && (box.value == ” && st == 0) &&
                !ev.shiftKey && !ev.ctrlKey && !ev.altKey) {
            d.getElementById(’mk’).focus();
            d.getElementById(’mk’).blur();
        } else if (gk == 1) {
            at = 0;
        }
    } else if ((id == ‘mk2′ && box.value != ” && ev.shiftKey && code == 9) ||
            (id == ‘m6′ && !ev.shiftKey && code == 9)){
        d.getElementById(’mk’).focus();
    } else if (!_ffs && gk == 1 && el.type != ‘text’ && !ev.ctrlKey &&
            !ev.altKey) {
        box.value = ”;
        box.focus();
    }
}

在函数kd中,从两个地方调用函数mt。通过使它成为一个内部函数,我们能有效的减少kd所用到的全局变量的数目,这将降低了干扰其他组件的可能性。kd依旧是一个烂摊子,但它现在不是一无是处的烂摊子。

原文:Douglas Crockford的The Elements of JavaScript Style Part Two: Idioms


Next Page »