Original Post:What makes a good browser API?
Nicholas C. Zakas,2009年11月24日
翻译完成:2010年1月22日,最后更新:2010年1月22日

上个月,我又参加了Mozilla公司组织的一次研讨会,这一次讨论的是Web数据库。虽然研讨会的议题很有意思,但我觉得会议期间大家对另一个问题的争论似乎更值得关注。争论中,与会者针对浏览器到底应该为JavaScript提供什么样的API分成两派。一派坚持认为原生的JavaScript API应该尽量保持低级化,然后由库开发者在低级API基础上再去构建更好用的接口。另外一派,也是我所在的阵营,则认为中级API才是大势所趋。没有人认为浏览器应该向开发人员提供高级API。所谓低级、中级、高级到底都是什么意思呢?

低级API

低级API仅为提供基本功能而设计。由于只要能实现相应功能即可,因此这种API不需要很直观或者很好理解。有时候,低级API确实会给初级甚至中级开发人员造成理解上的困难。这样一来,借由人们频繁使用来发现相应API问题的机会就大为减少了。大家都会指望库开发者在这些低级API基础上实现直观、好用的API,以便于普通开发人员使用。doument.cookie就是说明低级API最好的一个例子。

作为JavaScript开发人员操作cookie的唯一接口,document.cookie可谓有史以来最难使用的一个API。关于cookie,我专门写过一篇文章,还探讨过它的安全性问题,其中都涉及到如何在JavaScript中使用它们;因此,这里只能算是一个简单的介绍了。要设置cookie,必须以正确的cookie格式来设置document.cookie属性,例如:

document.cookie = “name=Nicholas; domain=nczonline.net; path=/; expires=Sat, 02 May 2009 23:38:25 GMT

要取得cookie,则需要读取document.cookie,返回的字符串是如下列所示的名值对格式:

name1=value1; name2=value2; name3=value3; name4=value4

而为了得到想要的值,必须先从这个字符串中查找相应的名字,然后再解析出相应的值。

之所以把这种API归类为低级API,是因为其实现要求你必须先了解cookie的内部格式,然后才能使用它。实际上,document.cookie属性只是在简单地模仿Set-Cookie和Cookie这两个对开发人员不可见的HTTP首部。为了写cookie,必须要理解字符串的确切格式,这涉及到其中的名和值必须采用URI编码形式,而其他片段之间必须以一个分号和一个空格来分隔,此外还必须知道设置过期日期的正确日期格式。反过来也一样,在读cookie时,你同样需要知道返回的字符串是什么格式,然后才能从中解析出想要的数据。这就是所谓的“遇繁不简,遇简也不简”。一句话,这种API对于不了解cookie的人根本没有用。

如果大多数开发人员都不会直接使用某个API,你就可以说它是低级API。不用,是因为使用它们所需的知识储备(Cognitive Overhead)太多了。绝大多数开发人员在使用JavaScript读写cookie时,最终都会求诸于一个JavaScript库例如YUI中的Cookie工具(YUI2YUI3),这些工具把那些令人讨厌的实现细节都隐藏起来了。

这正是那些低级API的支持者所愿意看到的:浏览器应该只提供基本功能,而基于这些功能开发易用API的任务应该交给开发人员社区。这些人支持低级API有一个主要的理由,即围绕基本功能可以实现任何层次的抽象,开发人员也会因此获得更多选择,从而更好地利用基本功能。

低级API的问题在于浪费时间。如果你创建了低级API,那结果就是潜在用户的数量会很少。至于什么时候能够出现好用的抽象工具,只能指望某一天这些用户中有(一个或几个)人会意识到确实有必要去做这件事,以便其他社区人员更好地利用该API。如果你想让新API尽快地被别人使用,你就会明白应该怎样去改进它,低级API根本不合适。

提示:大多数服务器端语言(如 ASP.NETJSPPHP)都提供了读写cookie的原生抽象,但JavaScript始终都没有。

高级API

这一争论的另一个极端是高级API。高级API设计出来就是为了让开发人员直接使用的,并且一般都非常直观。这种API不仅要考虑提供某种功能,而且还要提供使用相应功能的友好、易用的接口。高级API设计首先考虑的是开发人员的方便,因而通常需要对开发人员使用API的方式从理论上作出归纳。显然,这又是一个问题:谁能确切地知道某个人希望怎么去使用一个API呢?因此,在浏览器中提供原生的高级API几乎就是一个不可能完成的任务。

各式各样的JavaScript库就是高级API的典型例子。这些库都面向相同的浏览器,但为实现相同功能而提供的接口却差别很大。使用jQuery的方式与使用YUI截然不同;这是件好事,因为开发人员可以选择。可是,如果你告诉YUI开发人员必须使用jQuery语法写代码——因为只能使用一种语法;或者相反,会怎么样呢?相信对此提出抗议的开发人员一定会成群结队。强迫人们必须以某种方式开发是不幸之源。只有抽象,或者说只有随时都可以提高和降低抽象级别,才会让开发充满乐趣,也才能激励开发人员不断地创新。

高级API要求的知识储备非常低,因此开发人员无需了解太多就可以直接使用。但值得高兴的是,没有人认为浏览器应该提供高级AIP。大家都希望有所选择,都希望不同程度的抽象。 查看全文 »

埃里克·米拉利亚(Eric Miraglia)

从诞生至今的大部分时间里,焦虑、抨击、蔑视和误解一直与JavaScript如影随形。JavaScript刚刚问世那几年,很多“严肃的程序员”都认为它不够严肃。

相比之下,.COM泡沫时期加入Web开发行列的许多文科生,则普遍觉得JavaScript深不可测、晦涩难懂。就算那些耐力和韧性俱佳者能够把JavaScript琢磨得很透,但仍然摆脱不掉竞争性浏览器提供的不同实现给他们带来的麻烦。凡此种种,最终导致粗制滥造的脚本越来越多。另一方面,拜Web前端代码的无比开放性所赐,各种坏习惯不断从一个站点被粘贴进另一个站点的源代码中。那些实现活该臭名昭著,可是,JavaScript这门语言也因此被严重拖累,背上了不该有的坏名声了。

2001年前后(随着Internet Explorer 6的发布),浏览器实现已经大为改进,Web开发实践也开始得到改善,呈现出了二者水乳交融的局面。作为Ajax核心的XMLHttpRequest对象正慢慢地为人们所发现,一种新的桌面风格的用户交互模式出现在浏览器中。允许JavaScript操作Web文档结构和内容的DOM API已经定型。而CSS,不管人们如何曲解或者无视它,也无论浏览器开发商怎样丧心病狂地实现它,都已经成长得足够茁壮,它的美妙和反应敏捷令它能够与新的Web交互能力配合无间。最终,JavaScript一扫颓势,变得令人惊诧、让人兴奋、使人敬畏。想想2004年第一次使用Google Maps时的情景吧,那种感觉你或许还记忆犹新。

Google Maps是新兴应用程序的典型代表。这类浏览器编程与后端编程并重的应用程序,不禁令人对Web浏览器窗口中那块“画布”的未来浮想联翩。(除Google Maps之外,早在2003年就基于网页邮件客户端提供类似Outlook功能的Oddpost,也是这类应用程序的一个了不起的先驱。)随着这类应用程序如雨后春笋般大量涌现,以及支持它们的浏览器的市场份额不断攀升,一个Web应用全面复兴的时代真的到来了。“Web 2.0”诞生了,Ajax也成了“IT”技术。Web似乎在一夜之间脱胎换骨,重新激发起了人们的兴趣。而JavaScript作为唯一的Web编程语言,也变得更有意思了。

有意思,但用好它却不简单。JavaScript以及在DOM和BOM中为其定义的API不一致的实现,给跨浏览器编程造成了比原本大得多的困难。前端设计行业还远未成熟。大学教学计划并没有(至今仍没有)做出相应的调整,以满足相关的培训要求。

到2004年底,JavaScript无疑已经成为最重要的编程语言。但从学术角度看,它依然不具备进入一类学科的资格。Web虽然已经翻开了新的一页,但在培养足够的知识全面、训练有素的人才方面,我们依然面临着严峻的挑战。

为此,很多技术作者挺身而出,撰写了不少有关JavaScript的图书。几年来,这类书虽然也出了不下几十本,但总体来说仍然不尽如人意。其中有的在推销与落伍的浏览器有关的技术,有的则在卖弄容易剪贴但却不好扩展和维护的技术。让人想不通的是,许多JavaScript图书让人觉得作者好象并不真正喜欢JavaScript,或者他们不认为读者应该喜欢它,再或者他们根本不相信读者能够完全理解JavaScript。

2005年,Nicholas C. Zakas这本书的第一版面世,为前端工程领域奉献了一本真正的好书。当时,我和雅虎的同事们正在创建YUI(Yahoo! User Interface Library,Yahoo!用户界面库),打算将其作为公司前端工程的基础,同时也借以推广我们这门新学问的最佳实践。每到周五,我们就聚到一间教室里讨论前端工程,也向大家讲解JavaScript、CSS以及在浏览器中创建Web应用程序的知识。我们从已出版的高级JavaScript及DOM脚本编程方面的图书中认真挑选了几本,想让新工程师通过它们掌握如何构建耐用、基于标准且容易维护的Web应用程序。Zakas的书一出版,马上就被选为我们的JavaScript内部培训课本。

从那时起我们就一直使用他的书。我们一致认为这本书太有用了,于是就跟Zakas商量,让他加入雅虎帮我们建立公司的前端工程社区。

Zakas在书中传达的理念与众不同——JavaScript既需要严肃认真地对待,但也是完全可以理解和掌握的。如果你是个程序员,这本书会告诉你JavaScript与各种编程语言的关系,以及如何运用你已经习以为常的各种编程模式。你可以理解JavaScript的继承机制及其固有的动态特性(虽不合传统,但却十分自由十分强大),可以从Zakas这位尊重和理解JavaScript的同道那里学会欣赏JavaScript这门语言。

如果你曾经是一名文科生,在网络泡沫时期步入了这个行业,至今也没有转行,而且想要弥补自己在JavaScript方面的不足,你会发现Zakas是一位难得的良师益友。他可以帮你实现从“会做”到“做好”的转变。他能让你认真地理解这门严肃的学问。最重要的是,他不会让你先入为主地产生对这门语言应该理解多深的想法。相反,通过他严肃、耐心、通俗易懂的讲解,你自然而然地会对这门语言有同样深刻的认识。

本书是经过扩展、更新和改进后的第二版,删除了上一版中与今天的职业需求无关的主题,并用我们在2005年至2008年学习的新知识更新了剩余的内容。这几年是JavaScript发展的重要时期,Zakas则始终位于最前沿孜孜不倦地学习这些新知识。他这些年一直在致力于建造新一代最流行的Web个人门户(My Yahoo!),以及开发Web上最受欢迎的站点(Yahoo!主页)的新版本。Zakas以他作为老师和作者的独特视角,筛选出由这些超复杂、超大型应用程序磨砺出的经验,并将这些经验融入到了本书的字里行间。

他给出的解决方案远远超出了一本好书的范畴,只有每天都与代码同呼吸共命运的人,才有可能与读者分享如此具有实用价值的知识。

说实话,本书新版的面世对我和各位读者而言真是个莫大的喜讯。因为它的内容比上一版更有价值、更能反映JavaScript最新的发展成果,因此也更加令人不可错过。

埃里克·米拉利亚(Eric Miraglia)
YUI高级技术经理 哲学博士
于加利福尼亚州森尼维耳市

Nicholas C. Zakas,Yahoo!主页首席前端工程师Nicholas C. Zakas,Yahoo!主页首席前端工程师,个人网站www.nczonline.net。《Professional JavaScript for Web developers, 2nd Edition》作者。最新专著《High Performance JavaScript》(O’Reilly Media; 1 edition,March 15, 2010)。

Original Post:What makes a good front end engineer?
Nicholas C. Zakas,2007年8月15日
翻译完成:2010年1月10日,最后更新:2010年1月10日

昨天,我负责了Yahoo!公司组织的一次面试活动,感触颇深的是其中的应聘者提问环节。我得说自己对应聘者们提出的大多数问题都相当失望。我希望听到一些对在Yahoo!工作充满激情的问题。在昨天的应聘者中,只有一个人的问题是我认为最好的,那个人问我:“你觉得怎么才能成为优秀的前端工程师?”我觉得很有必要把这个问题从面试房间里拿出来讨论一下。

首先,前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行,你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通,但你至少要能够运用它们完成大多数任务,而无需地频繁地寻求别人的帮助。

优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的,没错吧?我甚至可以说这些技术几乎每天都在变化,如果没有快速学习能力,你就跟不上Web发展的步伐。你必须不断提升自己,不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别,而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

计算机科学这个大门类下面的许多分支在人们眼中实际上都不外乎科学。但是,我们所说的前端不是什么科学,而是艺术。艺术家不仅要掌握谋生的技术,还要懂得如何运用。对同一个问题的解决方案在这种情况适用,在另一种情况下可能就不适用。对Web应用程序的前端而言,解决同一问题的方案经常会有很多。没有哪个方案是错的,但其中确实有一些是更合适的。优秀的前端工程师应该知道在什么情况下使用哪种方案更合适,而在什么情况下应该重新选择。

优秀的前端工程师需要具备良好的沟通能力,因为你的工作与很多人的工作息息相关。在任何情况下,前端工程师至少都要满足下列四类客户的需求。

  1. 产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求,以及怎样通过他们设计的模式赚到钱(但愿如此)。一般来说,这些人追求的是丰富的功能。
  2. UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。
  3. 项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点,无外乎正常运行时间(uptime)——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化,以及不在升级更新时引入新问题。
  4. 最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道,但他们的反馈意见至关重要;没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能,以及竞争性产品所具备的功能。

那么,前端工程师应该最关注哪些人的意见呢?答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期,然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上,因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能,必须删繁就简,你怎么跟产品经理解释?再比如,假设某个设计如果不改回原方案可能会给应用程序造成负面影响,你怎么才能说服UI设计师?作为前端工程师,你必须了解每一类人的想法从何而来,必须能拿出所有各方都能接受的解决方案。从某种意义上说,优秀的前端工程师就像是一位大使,需要时刻抱着外交官的心态来应对每一天的工作。

我告诫新来的前端工程师最多的一句话,就是不要在没有作出评估之前就随便接受某项任务。你必须始终记住,一定先搞清楚别人到底想让你干什么,不能简单地接受“这个功能有问题”之类的大概其的说法。而且,你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理,问一问这个按钮有什么用处,然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师,这种沟通至关重要。

无论从哪个方面讲,我都觉得前端工程师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了,为了在多种平台中使用,多种技术都借鉴了大量软科学的知识和理念。成为优秀前端工程师所要具备的专业技术,涉及到广阔而复杂的领域,这些领域又会因为你最终必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端工程师的大门,但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力,才会真正让你变得优秀。

延伸阅读

Nicholas C. Zakas的书

Professional JavaScript for Web Developers, 2nd Edition Professional Ajax, 2nd Edition Even Faster Web Sites

Original Post:Surviving an interview with me
Nicholas C. Zakas,2007年3月27日
翻译完成:2010年1月9日,最后更新:2010年1月10日

早就打算写这篇文章了,但时至今日才决定动笔。如果你投了简历,那么应该会在面试你的人名单里找到我的名字。你现在就有点紧张了,(好啦,别不好意思)面试总会让人感觉有点不舒服。作为面试官,我其实并不算难对付,但如果你想在我们谈话之后让我放你过关,你确实得做一些必要的准备。

  • 回答问题。我问你一个问题,你必须要回答它。我遇到应聘者在回答我问题时顾左右而言他的情况太多了。我知道你会有些紧张,说几句不着边际的话可能有助于缓解,但请你不要喋喋不休,要赶快回到正题上来。我不想知道你的宠物猫最近又出了什么新状况,我只想听到你的回答。假如你没有听明白我问的是什么,可以要求我再解释一下,重复几遍问题或者换一种问法,对我而言没有什么。
  • 告诉我你不知道什么。如果我问到了你不知道的问题,一定要告诉我。我不认为你的大脑里可以装得下百科全书。在知道了你不知道什么以后,我对你的评估才会更加公平。问题仍然要回答,但我会给你一些提示,同时也可以考察一下你解决问题的能力。
  • 不要放弃。在我面试你的过程中,不要总想着放弃。如果你被我前面的话不幸言中,那么你可能会面对一个让你不知所措的问题,而且你也告诉我你答不上来了。此时此刻,千万不要打退堂鼓!我会尽力提醒你,让你找到正确答案;因此不要随随便便打断我说:“我真的不知道。”在我们这个行业,你经常会遇到没有现成解决方案的挑战,到时候你会轻易放弃吗?我必须知道你具备解决问题的能力,而不是遇到一点挫折就轻言放弃。
  • 不用担心怪问题。有些公司的确有吓唬应聘者的传统,他们会让你回答一些类似脑筋急转弯似的稀奇古怪的问题。对那种面试方式,我不敢苟同。我提的所有问题都有答案,而且绝大多数还不止有一个正确答案;我保证一个怪问题也不会问你。因为这样既会让你难堪,又对我毫无意义。你大可放心,我的每个问题都至少会有一个正确答案。
  • 自圆其说。如果你提到了某个解决方案或者强调自己掌握了某方面知识,请做好进一步讨论它的准备。假设我问了一个问题,你在回答这个问题时提到:“对,因为IE不支持CSS3……”然后,你最好能够跟我讨论一下要是IE支持CSS3你会怎么办。
  • 不要说自己是专家。大多数面试中可能都需要注意这一条,但我对这一条尤其敏感。我从来不会把应聘者划分为三六九等,因此你也不必告诉我你属于哪个等级。一旦你声明自己已经跻身“专家”的行列,我怕有些问题会让你下不来台。我确实见过自称专家而又确实是专家的人。但是,我认为真正的专家不会自己说出来,而是会做给你看。
  • 不要靠卖弄赚取我的好印象。如果我想知道什么,我会问。我知道在面试时需要了解哪些信息,只要一听到有人说“想不想看一个绝妙的技巧?”或者其他类似的话,我都有一种立即中断面试的冲动。所以,请尽力回答好我的问题即可。
  • 充满激情。如果你想得到跟我一起工作的机会,请给我一个愿意跟你共事的理由。最好的理由就是要有激情,把你主动、积极学习的热情展示出来。希望你能谈一谈产品、公司,以及为什么想得到这份工作。尤其要注意最后一点,我不想听你说你当前的工作如何如何讨厌。当然,可以解释一下为什么现在或者过去没有从事你喜欢的工作,但你一定要告诉我你对自己今后的成长有何打算,还有为什么你应聘的这个职位能够有助于你的成长。

没错,我确实希望将来有可能被我面试的所有人都看到这篇文章。我希望你能在我面试你时表现得非常好,真的,确实如此。说来也简单,只要你留意上述这些常见的问题,并且原原本本地展示你自己就足够了。说不定哪一天,你就会跟我坐到同一间办公室里了。

注意,My Yahoo!团队正在招聘呢。如果你是一位有才华的软件工程师,又对创造价值和Yahoo!公司充满激情,请跟我联系,咱们谈谈。

延伸阅读

Nicholas C. Zakas的书

Professional JavaScript for Web Developers, 2nd Edition Professional Ajax, 2nd Edition Even Faster Web Sites

Original Post:Interviewing the front-end engineer
Nicholas C. Zakas,2010年1月5日
翻译完成:2010年1月7日,最后更新:2010年1月10日

面试前端工程师对我来说是一件非常有意思的事,因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司,之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题,就是因为负责招聘的那些人不知道自己公司需要什么样的人,结果问问题时也问不到点子上。经过这几年在行业里的摸索,我总结出了自己的一套很有效的面试前端工程的方法。

有的应聘者说我不好对付,但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付,主要是因为我问他们问题时问得太细了。以前我曾专门写过一些东西,告诉应聘者怎么才能通过我的面试以及怎样才能成为优秀的前端工程师应该具备什么样的素质,而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题,也不认为出几道逻辑题就能考出人的真实水平。我唯一的想法就是确定你能否胜任我们要招的这个职位。为此,我需要简单地考察如下几个方面。

基本知识

我们生活在互联网时代,你想知道的任何事情几乎都能在15分钟内找到相关信息。可是,能找到信息并不等于你会使用它。我认为所有前端工程师至少都应该掌握某些基本的知识,才能有效地完成自己的工作。如果一遇到问题,就停下工作上网四处搜索解决方案,怎么可能保证按期完成工作呢?听听,还有谁在说“我不知道,但我可以上网搜到。”请这些同学把手举起来,让大家认识一下(immediately raises a flag for me.)。下面我列出一些基本的知识点,这些都是我认为一名前端工程师(无论工作年头长短)在没有任何外来帮助的情况下就应该知道的。

  • DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
  • 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
  • XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
  • 严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
  • 盒模型——外边距、内边距和边框之间的关系,IE < 8中的盒模型有什么不同。
  • 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
  • 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
  • HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
  • JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。

重申一下,上述这些知识点都应该是你“想都不用想”就知道的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到,但我觉得你至少应该掌握这些,才有可能跟我坐到一间办公室里来。

少量提问

我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平,也很无聊。我在任何一次面试中,通常只问三个大问题,但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤,这样我就可以在每个步骤中穿插着问一些小问题。比如说: 查看全文 »