本节书摘来自异步社区《JavaScript设计与开发新思维》一书中的第1章,第1.2节,作者:【美】Larry Ullman著,更多章节内容可以访问云栖社区“异步社区”公众号查看
1.2 JavaScript的历史
JavaScript诞生于1995年,原名为Mocha,后又改为LiveScript。使用新名称的JavaScript 1.0版本于1996年由网景公司发布。如果读者的年龄足够大,就应该听说过网景公司,Netscape Navigator是最早的Web浏览器之一,后来它的所有市场份额全部丧失,主要是被Internet Explorer所占据。最终,网景公司创立并转化为Mozilla—Firefox Web 浏览器的创作者以及JavaScript持续开发的关键参与者之一。
JavaScript是ECMAScript(发音为ECK-MA-Script)的一个实现,ECMAScript是一个不为人知的标准国际脚本语言(ECMA是欧洲计算机制造商协会英文名称European Computer Manufacturers Association的缩写)。前面提到的ActionScript也是从ECMAScript派生而来,和JavaScript有许多相似之处。JavaScript的语法受到Java编程语言的影响,但是这两种语言既没有关系也不相像。
尽管JavaScript在今天主要仍是用在Web浏览器中,但是它可以嵌入到PDF中,用于创建桌面小插件,甚至成为动态服务器端功能的基础。
但是,这些细节只是基本的事实。为了了解现代的JavaScript,你还应该知道JavaScript声名狼藉的过去。
注意: 微软公司将自己的JavaScript实现命名为JScript,因为JavaScript是注册商标名称。
1.2.1 间或有些丑陋的历史
1999年,当我刚刚开始进行Web开发的时候,JavaScript在最好的情况下是相当有用的,而在最坏的情况下相当令人烦恼。JavaScript曾经被用于创建警告(颤动)、弹出窗口(啊!)和播放音频文件(请别这么做),这些都是对Web的严重损害。JavaScript比较不让人厌烦的常见应用包括图像翻转(image rollover)和浏览器状态栏操作。那时,添加重要的动态功能的常见方法需要HTML框架,因此为了使页面保持条理性就需要额外的工作。20世纪90年代,JavaScript最好用的,或者说仅有的好用的方式,是改进和验证HTML表单。简而言之,JavaScript被当作一种“玩具”语言,它的应用没有赢得尊重。
与十几年前的Web状况相关的两个关键事实使得JavaScript的用途更加贫乏。首先,宽带互联网访问刚刚开始向家庭用户开放(在当时最大的互联网市场—美国)。没有高速度的互联网访问,审慎的开发人员将网页尺寸控制在较小的规模,并尽可能地限制JavaScript和媒体的使用。在当时,仅仅为了能添加一些Flash图像(双关语)或者少数的功能而将14 KB数据(常见JavaScript框架的大小)发送给最终用户对于网站来说是不现实的。
其次,现在JavaScript的浏览器支持没有太多不一致的地方,而在20世纪90年代,浏览器之间的差别很大。当时的两大主要浏览器是Internet Explorer和Netscape Navigator,另外还有流行的互联网服务提供商(ISP)美国在线(AOL)自己的定制浏览器。由于这些浏览器之间的差异,编写可靠的跨浏览器JavaScript是一个沉重的负担。
幸运的是,许多情况都已经发生了改变。
1.2.2 Ajax重临
JavaScript历史上最重大的发展之一是Ajax的兴起。Ajax于2005年第一次被提出,当时它只是对浏览器之前已经拥有的功能赋予的一个标记而已。Ajax的意思可能是(也可能不是)“异步JavaScript和XML”(Asynchronous JavaScript and XML),最早命名它的Jesse James Garrett现在声称Ajax并不是一个缩写词。无论如何,Ajax的基础是:用户在浏览器中动作时,(通过单击一个链接、使用一个表单、将鼠标光标移到一个元素上面等)触发事件。这些触发事件可以由JavaScript“异步”处理,也就是说,JavaScript可以在后台进行处理,而不强制用户等待事件的响应。JavaScript在Ajax中的任务是对服务器端资源发出请求。在Ajax这个术语刚刚定义时,请求结果使用XML(可扩展标记语言)格式返回给JavaScript。
我认为Ajax是一个重大的发展,但是它的好处在很多时候被忽视了。而且,公平地说,用一本书表达Ajax的用处是很难的。为了更好地理解Ajax对Web功能性的影响,让我们来看一个示例。
假设你的网站上有一个注册表单,用户在表单上输入用户名、电子邮件地址、密码等信息(图1.1)。在用户完成表单之后,单击提交按钮将表单数据发送给服务器。这时,服务器端脚本将验证表单数据。如果数据没有问题,用户就得以注册。如果存在错误,表单应该再次显示,指出错误并且保留数据(图1.2)。这一过程将被重复,直到表单正确完成,用户得以注册(图1.3的步骤Y),并被重定向到下一个逻辑HTML页面(图1.3的步骤Z)。
图1.3中的系统完全能够正常工作。而且,这仍然是用户的浏览器不支持Ajax时所使用的方法。但是利用现代的JavaScript,这个系统和用户体验可以得到很大的改进。按照图1.3中所示的情况,每个表单提交都需要完全下载和重新绘制整个HTML页面。即使表单数据中只有一个错误,所有的HTML代码、图像等都必须重新发送(除了那些被缓存的内容)并重新绘制。为此花费的时间—发送表单数据给服务器,在服务器上处理,将整个页面发回给用户,并且在浏览器中重新绘制页面—并不很多,但是对最终用户来说将会很明显。
更好的解决方案是使用JavaScript执行客户端表单验证。利用在浏览器中运行的JavaScript,你可以很容易地确认表单完成并立即报告问题,完全不需要任何服务器请求(图1.4)。(注意,在图1.4中可以看到,作为服务器安全措施,服务器端验证仍然进行,但是这个验证只有在用户禁用JavaScript时才会捕捉表单的错误。)
在很长的时间里,基本表单验证是JavaScript一个较好的用途。但是仅仅使用客户端JavaScript,可以执行的验证类型有一定的局限,仅能检查表单的完整性。至于更复杂的验证如确认用户名是否存在(图1.2),仍然必须有服务器端请求(因为用户名存储在服务器上的数据库中)。这正是Ajax出众之处!
注意: 因为JavaScript可能在浏览器中被禁用,必须始终使用服务器端表单验证。
Ajax允许客户端JavaScript以不打扰用户的方式发出服务器端请求。我们继续表单验证的示例,当用户单击提交按钮时,JavaScript可以暂停表单的提交并将表单数据发送给服务器端脚本。该脚本进行所有验证并返回数据,表示一个简单的状态或者一个错误列表。如果有错误返回,JavaScript将解析所有错误并更新页面,相应地指出所有错误,并且用加亮显示,进一步强调表单中的问题。如果返回的状态表示没有错误发生,JavaScript将继续进程的下一步(图1.5)。现在,图中所概述的过程似乎表明,应用Ajax使一切都变得更加复杂了。Ajax确实更复杂,但是加入它有以下关键的好处:
在Web浏览器中能够完成尽可能多的工作。
通过服务器传输尽可能少的数据(例如HTML、CSS、媒体等),最终的结果是用户过程更加高效和灵敏。
从Ajax的概念被正式提出之后的数年内,它的底层技术没有太多的改变,而使用率和接受度有了很大的提升。Ajax原始概念和当今的Ajax之间的一个主要区别是传输的数据不一定是XML格式,也可以是JSON(JavaScript Object Notation,JavaScript对象标记)或者普通文本。其次,Ajax请求的执行方法在各种浏览器中更加一致。
注意: 第11章将介绍Ajax的各种与众不同的特性。
图1.5 使用Ajax,也可以执行服务器端验证,用户自动进入过程中的下一步,不需要任何公开的服务器请求
1.2.3 浏览器改进
JavaScript在历史上曾经很难学,这有3个原因。第一,JavaScript和许多其他语言不同,正如我们已经讨论过的,它的使用场景和方式以及原型化对象特性与众不同(例如,它是一种不让你定义自己的类的OOP语言)。第二,因为JavaScript主要用于Web浏览器中,在历史上将这种语言归到Web设计人员(而不是编程人员)的范畴中。第三,创建可靠的跨浏览器JavaScript是极度乏味的工作。仅仅使用JavaScript来做一件简单的事情,就必须为一组浏览器编写代码,而为另一组浏览器编写不同的代码。相同浏览器的后续版本中的修改也需要进一步的考虑。试图创建在所有浏览器上100%可靠的代码成为了巨大的负担,造成了如下的“解决方案”:
if (navigator.appName == "Netscape") { // It's Netscape!
if (parseInt(navigator.appVersion) >= 4) { // At least version 4!
} else { // It's an earlier version. Bah!
}
} else { // Let's assume it's IE?
}
这还只是为了识别浏览器类型和版本而使用的条件。每个条件语句内的代码必须使用专用于所识别的浏览器和版本的JavaScript。考虑到当今的常用浏览器包括微软公司的 Internet Explorer、Mozilla 公司的Firefox、苹果公司Safari 和 Google 公司的 Chrome,在不同电脑上还会找到各种浏览器的许多不同的版本(在本书写作的时候,有IE浏览器6~9版本、Firefox 3~6版本等),为每种特定的浏览器和版本编写专门的程序是难以想象的。(这里还没有考虑大量移动设备和游戏设备的用户。)
提示: 对于一般的Web开发,特别是JavaScript,有如下的金科玉律:用一个好的浏览器(如Firefox)开始开发,然后在Internet Explorer上测试以取悦你的客户。
具有讽刺意味的是,尽管选择越来越多,但是从功能性上来说,当今的浏览器可以两个粗略地分为类别:微软的Internet Explorer以及其他浏览器。即使经验最少的Web开发人员也会告诉你,为Internet Explorer(IE浏览器)设计HTML和CSS或者编写JavaScript代码是很麻烦的(我说的已经是很客气了)。幸运的是,随着时间的推移,也可能是因为使用Internet Explorer的人越来越少,微软改进了IE浏览器与其他技术的配合。另一类浏览器—“其他浏览器”—主要指的是Firefox、Chrome和Safari,虽然Opera的市场份额不大,但是仍然值得一提。一般来说,这些浏览器都比IE浏览器更坚持标准,因而表现也就更好(事实就是如此)。最终的结果是,按照这种方式开发Web应用,保证用户体验有合理的一致性比起以前已经容易得多了。更重要的是,在本章将要结束的时候,你将学到一种新的方法,能够编写在任何浏览器上都可靠工作的代码。
1.2.4 框架的兴起
JavaScript历史上第三个重大发展是框架(Framework)的创建。框架就是一个代码库,其目的是加快开发的进程。在任何编程语言中,都有许多任务和过程是重复出现的。从长远来看,与其每次都重复创建相关的代码,不如编写简单和快速地为你重复这些代码的框架。现在的框架强大而灵活。JavaScript框架能够创建日期选择器(图1.6)等用户界面插件、简化表单验证和Ajax集成,并改进常见的Web元素(如数据表格的分页和排序)。
更重要的是,框架能够创建浏览器无关的代码,这意味着不管使用的是什么浏览器都能成功运行(假设浏览器启用JavaScript)。对于许多开发人员来说,跨浏览器的可靠性就足以成为使用框架的理由。
选择框架是个人的决定,而且可能很复杂(在第13章中将研究这个主题)。在本书中,我主要讨论和说明jQuery和YUI,但是也关注其他的JavaScript框架,包括MooTools、script.aculo.us。
话虽如此,对于框架的使用仍然有许多合理的争议。首先,框架需要额外的学习,同时仍然需要适应语言本身(例如,你需要学习JavaScript,然后学习jQuery或者其他知识)。其次,即使在最好的情况下,将框架用于非常高级或者定制的目的仍然很困难,在最糟糕的情况下则近乎不可能,这一切都取决于你的技能水平。最后,框架几乎总是意味着,和自己编写的代码相比,性能更差。特别对于JavaScript,使用框架意味着浏览器必须下载比单独使用JavaScript多得多的代码。
自JavaScript创建以来的15年中,Ajax的采用、浏览器的改进以及框架的创建都极大地扩展了这种语言的用途和易用性。然而有趣的是,在这段时间里这种语言本身的变化却相对较少。在描述JavaScript语言有时显得丑陋的这段历史时,人们可以说,这段历史实际上是人们一开始没有很好地使用JavaScript技术,继而学习发挥该技术最大潜能的一段历史。