一、JavaScript 专业技术

欢迎来到专业 JavaScript 技术。这本书概述了 JavaScript 的现状,特别是当它应用于职业程序员时。谁是职业程序员?一个对 JavaScript(可能还有其他几种语言)有着坚实基础的人。您对 JavaScript 的广度和深度感兴趣。您想了解文档对象模型(DOM)等典型特性,但也想了解客户端上模型-视图-控制器(MVC) 的所有这些内容。更新的 API,新的特性和功能,以及代码的创造性应用是你在这里寻找的。

这是这本书的第二版。自 2006 年第一版问世以来,情况发生了很大变化。当时,JavaScript 正在经历一个有点痛苦的转变,从一种玩具脚本语言转变为一种对多种不同任务都有用且有效的语言。如果你愿意,那是 JavaScript 的青春期。现在,JavaScript 正处于另一个转变的末期:继续这个比喻,从青春期到成年期。JavaScript 的使用几乎无处不在,85%到 95%的网站,取决于你相信谁的统计,在他们的主页上有一些 JavaScript。许多人认为 JavaScript 是世界上最流行的编程语言(就经常使用它的人数而言)。但是比单纯的使用更重要的是有效性和能力。

JavaScript 已经从一种玩具语言(图像翻转!状态栏文本操作!)到一个有效但有限的工具(想想客户端表单验证),到它目前作为一种功能广泛的编程语言的地位,不再局限于仅仅是浏览器。程序员正在编写提供 MVC 功能的 JavaScript 工具,这一直是服务器的领域,以及复杂的数据可视化、模板库等等。这个清单还在继续。在过去,设计人员需要依赖. NET 或 Java Swing 客户端来为服务器端数据提供功能全面、丰富的接口,现在我们可以通过浏览器用 JavaScript 实现该应用。而且,使用 Node.js,我们有了 JavaScript 自己版本的虚拟机,一个可以运行任何数量的不同应用的可执行文件,所有这些都是用 JavaScript 编写的,不需要浏览器。

这一章将描述我们是如何来到这里的,以及我们要去哪里。它将着眼于促成 JavaScript 革命的浏览器技术(和流行度)的各种改进。JavaScript 本身的状态需要检查,因为我们想在看我们要去哪里之前知道我们在哪里。然后,当我们检查接下来的章节时,您将会看到职业 JavaScript 程序员需要知道什么才能名副其实。

我们是怎么到这里的?

在这本书的第一版,谷歌 Chrome 和 Mozilla Firefox 是相对较新的产品。Internet Explorer 6 和 7 独领风骚,第 8 版越来越受欢迎。几个因素共同推动了 JavaScript 的发展。

JavaScript 的大部分时间都依赖于浏览器。浏览器是 JavaScript 的运行时环境,程序员对 JavaScript 功能的访问高度依赖于访问该程序员网站的浏览器的品牌、型号和版本。到了 2005 年中期,90 年代的浏览器大战被 Internet Explorer 轻松拿下,浏览器开发陷入停滞。两种浏览器挑战了这种状况:Mozilla Firefox 和 Google Chrome。Firefox 是最早的网络浏览器之一 Netscape 的后代。Chrome 有谷歌的支持,这足以让它成为一个即时玩家。

但是这两种浏览器都做出了一些促进 JavaScript 革命的设计决策。第一个决定是支持万维网联盟实现各种标准。无论是处理 DOM、事件处理还是 Ajax ,Chrome 和 Firefox 通常都遵循规范并尽可能好地实现它。对于程序员来说,这意味着我们不必为 Firefox 和 Chrome 编写单独的代码。我们已经习惯于为 IE 和其他东西编写单独的代码,所以拥有分支代码本身并不新鲜。但是确保分支不会过于复杂是一种令人欣慰的解脱。

说到标准,Firefox 和 Chrome 也和欧洲计算机制造商协会(ECMA,现在称为 Ecma)一起做了很多工作。Ecma 是监管 JavaScript 的标准机构。(从技术角度来说,Ecma 负责 ECMAScript 标准,因为 JavaScript 是 Oracle 的商标,而且……嗯,我们其实并不关心这些细节,不是吗?我们将使用 JavaScript 来指代这种语言,使用 ECMAScript 来指代 JavaScript 实现所遵循的规范。ECMAScript 标准就像 IE 开发一样衰落了。随着真正的浏览器竞争的兴起,ECMAScript 标准再次被采用。ECMAScript 第 5 版(2009) 编纂了许多在十年(!)自上一版本标准以来。随着 2011 年 5.1 版本的推出,这个团队本身也充满了活力。未来是可以预见的,目前正在对标准的第 6 版和第 7 版进行大量的工作。

值得表扬的是,Chrome 也推动了 JavaScript 的更新。Chrome JavaScript 引擎名为 V8 ,是 Chrome 在 2008 年首次亮相时非常重要的一部分。Chrome 团队构建了一个比大多数 JavaScript 引擎更快的引擎,并在后续版本中保持了这一目标。事实上,V8 引擎令人印象深刻,它成为了 Node.js 的核心,这是一个独立于浏览器的 JavaScript 解释器。Node 最初是作为一个使用 JavaScript 作为主要应用语言的服务器,现在已经成为一个灵活的平台,可以运行任意数量的基于 JavaScript 的应用。

回到 Chrome:谷歌引入浏览器领域的另一项重大创新是常青树应用的概念。Chrome 的默认设置是自动为你更新浏览器,而不是下载一个单独的浏览器安装进行更新。虽然这种方法有时在公司界是一种痛苦,但对非公司的消费者来说却是一大福音。).如果你使用 Chrome(最近几年还使用了 Firefox),你的浏览器就是最新的,无需你做任何努力。虽然微软在通过 Windows Update 推送安全更新方面已经做了很长时间,但它并没有向 Internet Explorer 引入新功能,除非它们与新版本的 Windows 相结合。换句话说,IE 的更新来得很慢。Chrome 和 Firefox 总是拥有最新和最棒的功能,并且非常安全。

随着谷歌加紧开发 Chrome 的功能,其他浏览器制造商也在迎头赶上。有时这是以更愚蠢的方式出现的,比如 Firefox 采用了 Chrome 的版本编号。但这也导致了 Mozilla 和微软对 JavaScript 引擎冷眼相看。在过去的几年里,这两家浏览器制造商都大幅改进了他们的 JS 引擎,Chrome 的领先优势虽然强大,但不再是不可逾越的。

最后,微软已经(大部分)放弃了其经典的“拥抱和扩展”哲学,至少在 JavaScript 方面。在 IE 第 9 版中,微软实现了万维网联盟(W3C)事件处理,并标准化了它的 DOM 接口和 Ajax API。对于 JavaScript 的大多数标准特性,我们不再需要实现同一个代码的两个版本!(当然,遗留浏览器的遗留代码仍然是一个问题……)

这似乎是一剂灵丹妙药。JavaScript 比以往任何时候都要快。为各种不同的浏览器编写代码更容易。标准文档既描述了现实世界,又为未来的特性提供了有用的路线图。我们的大多数浏览器都是最新的。那么我们现在需要担心的是什么,未来的路在何方?

现代 JavaScript

使用 JavaScript 开发严肃的应用从未如此简单。我们已经与过去的糟糕时代彻底决裂,过去的时代是为多种浏览器分别编写代码,糟糕的标准没有得到很好的实现,缓慢的 JavaScript 引擎常常是事后才想到的。让我们看看现代 JavaScript 环境的状态。具体来说,我们将关注两个领域:现代浏览器和现代工具包。

现代 JavaScript 依赖于现代浏览器的理念。什么是现代浏览器 ?不同的组织用不同的方式描述它。谷歌表示,他们的应用支持当前和以前的主要浏览器版本。(有趣的是,据我们所知,Gmail 仍然可以在 IE9 上工作!)在一篇有趣的文章中,英国广播公司(BBC)网站的幕后人员透露,他们将定义为支持以下功能的现代浏览器:

  1. document.querySelector() / document.querySelectorAll()
  2. window.addEventListener()
  3. 存储 API ( localStoragesessionStorage)

jQuery 可能是网络上最流行的 JavaScript 库,它将其版本分为 1.x 系列和 2.x 系列,1 . x 系列支持 IE 6 及更高版本,2 . x 系列支持 IE 9 及更高版本等“现代”浏览器。毫无疑问,这是现代和古代的分界线。另外两大浏览器是常青树。虽然 Safari 和 Opera 不是常青树,但它们的更新速度比 IE 快,市场份额也不如 IE。

那么,现代浏览器的界限在哪里?唉,边界似乎徘徊在 Internet Explorer 版本 9 到 11 之间。但 IE 8 绝对是浏览器历史上的遥远一面。它不支持 ECMAScript 5 的大多数功能。它不包括用于 W3C 事件处理的 API。这个清单还在继续。所以当我们讨论现代浏览器时,我们至少会提到 Internet Explorer 9。我们的报道不会尽力支持古老的浏览器。在相关和简单的地方,我们会指出旧版本 IE 的 polyfills,但一般来说,我们的底线是 Internet Explorer 9。

图书馆的崛起

除了现代浏览器之外,我们还需要讨论 JavaScript 当前环境的另一个重要方面:库。在过去的 8 年里,JavaScript 库的数量和种类呈爆炸式增长。JavaScript 的 GitHub 库超过 80 万个;其中,近 900 颗恒星超过 1000 颗。JavaScript 库生态系统最初只是一些实用函数的集合,现在已经演变(有些混乱)成一个广阔的前景。

作为 JavaScript 开发人员,这对我们有什么影响?当然,有“库作为扩展”的模型,其中库提供额外的功能。想想像 Backbone 和 Angular 这样的 MVC 库(我们将在后面的章节中讨论),或者像 d3 或 Highcharts 这样的数据可视化库。但是 JavaScript 处于一个有趣的位置,因为库也可以为一些浏览器上的标准特性提供一个层次接口,而在其他浏览器上却不是。

长期以来,JavaScript 中可变实现特性的标准例子是事件处理。Internet Explorer 有自己的事件处理 API。其他浏览器通常遵循 W3C 的 API。各种库为事件处理提供了统一的实现,包括了两个世界的精华。其中一些库是独立的,但成功的库也规范了 Ajax、DOM 和许多其他跨浏览器实现的功能。

这些库中最流行的是 jQuery 。从一开始,jQuery 就是使用新 JavaScript 特性的首选库,而不用担心浏览器对这些特性的支持。因此,不使用 IE 或 W3C 的事件处理,您可以简单地使用 jQuery 的.on()函数,该函数包装了方差,提供了一个统一的接口。其他几个库也提供了类似的功能:Dojo、Ext JS、Prototype、YUI、MooTools 等等。这些工具包库旨在为开发人员标准化 API。

标准化不仅仅是提供简单的分支代码。这些库经常改善有缺陷的实现。一个函数的官方 API,版本之间可能变化不大,但是会有 bugs 有时这些错误会被修复,有时不会,有时修复会引入新的错误。在图书馆可以修复或解决这些问题的地方,他们做到了。例如,jQuery 1.11 包含六个以上的事件处理 API 问题修复程序。

一些库(特别是 jQuery)也对某些功能提供了新的或不同的解释。jQuery 选择器函数是这个库的核心,早于现在标准的querySelector()querySelectorAll()函数,它是在 JavaScript 中包含这些函数的驱动力。其他库提供对功能的访问,尽管底层实现非常不同。在本书的后面,我们将研究 Ajax 新的跨源资源共享(CORS )协议,该协议允许 Ajax 向最初服务页面的服务器之外的服务器发出请求。一些库已经实现了一个使用 CORS 的版本,但是在需要的地方退回到 JSON 和 padding (JSON-P)。

由于它们的实用性,一些库已经成为专业 JavaScript 程序员的标准开发工具包的一部分。它们的特性可能还没有被标准化为 JavaScript,但是它们是知识和功能的积累,这使得快速实现设计变得更加容易。然而,最近几年,你可以通过询问 jQuery(或另一个库)是否真的是在现代浏览器上开发所必需的,来获得相当多的点击量。考虑 BBC 的要求;如果有这三种方法,您肯定可以实现很大程度上类似 jQuery 的功能。但是 jQuery 还包括一个简化但扩展的 DOM 接口,它可以处理各种不同边缘情况下的错误,如果您需要支持 IE 8 或更早版本,jQuery 是您的主要选择。因此,专业的 JavaScript 程序员必须考虑项目的需求,并考虑是否值得冒险重新发明 jQuery(或另一个类似的库)提供的轮子。

不止是关于移动设备的说明

在早期的 JavaScript 和 web 开发书籍中,你会看到一个章节,也许是整个第,讲述如何处理移动浏览。移动浏览 在总浏览量中所占的份额很小,而且市场非常分散,似乎只有专家才会对移动开发感兴趣。现在不是这样的了。从这本书的第一版开始,移动网页浏览已经爆炸了,它是一个与桌面开发非常不同的野兽。考虑一些统计数据:根据各种来源,移动浏览占所有浏览的 20%到 30%。当你读到这篇文章时,它很可能代表了更多,因为自 iPhone 问世以来,它一直在增长。说到这里,超过 40%的移动浏览是通过 iOS Safari 完成的,尽管 Android 的浏览器和 Chrome for Android 正在取得进展(可能已经超过 Safari,取决于你相信谁的统计数据)。iOS 上的 Safari 和桌面上的 Safari 不一样,安卓 Chrome 对桌面 Chrome,手机火狐对桌面火狐也是一样。移动是主流。

移动设备上的浏览器带来了一系列新的挑战和机遇。移动设备通常比台式机更受限制(尽管这是另一个正在迅速缩小的差距)。相反,移动设备提供了新的功能(滑动事件、更精确的地理定位等)和新的交互习惯(用手代替鼠标,滑动滚动)。根据您的开发需求,您可能需要构建一个在移动和桌面上都好看的应用,或者为移动平台重新实现现有功能。

在过去的几年里,JavaScript 领域发生了巨大的变化。尽管 API 有一些标准化,但也有许多新的挑战。这对我们这些职业 JavaScript 程序员有什么影响?

我们将何去何从?

我们应该为自己制定一些标准。我们已经设定了一个:IE9 作为现代浏览器体验的基础。其他浏览器是常青树,不用担心。那么手机呢?虽然这个问题很复杂,但一般来说,iOS 6 和 Android 4.1 将成为我们的底线。移动计算比台式机更新得更快更频繁,因此我们对使用这些更新版本的移动操作系统充满信心。

也就是说,让我们暂时离题,讨论一下你的受众,而不是浏览器版本、操作系统或平台。虽然我们可以整天引用统计数据,但有价值的统计数据告诉你的是你的听众,而不是一般的听众。也许你正在为你的雇主设计,他已经标准化了 IE 10。或者你对应用的想法很大程度上依赖于只有 Chrome 提供的功能。或者可能甚至没有桌面版本,但你的目标是推出 iPads 和 Android 平板电脑。考虑你的目标受众。这本书被写得具有广泛的适用性,你的应用也可能如此。但是花时间担心之前提到的平板电脑应用的 IE9 漏洞是愚蠢的,不是吗?现在,回到我们的标准。

对于截图和测试,这本书一般会倾向于谷歌 Chrome。偶尔,我们会在 Firefox 或 Internet Explorer 上演示相关的代码。对于开发者来说,Chrome 是黄金标准——不一定是用户友好,但肯定是向程序员展示的信息。在后面的章节中,我们将研究各种可用的开发工具,不仅研究 Chrome,还研究 Firefox(有和没有 Firebug)和 IE。

作为标准库,我们会参考 jQuery。当然,还有很多选择,但是 jQuery 胜出有两个原因:首先,它是 web 上最流行的通用 JavaScript 库。其次,至少其中一位作者(John Resig)与 jQuery 有一点渊源,这使得另一位作者(约翰·帕克斯顿)不得不承认使用 jQuery 的重要性。在更新这本书的过程中,我们用 jQuery 的功能库替换了以前版本中的许多技术。在这些情况下,我们不愿意重新发明轮子。根据需要,我们将引用适当的 jQuery 功能。当然,我们也会讨论新的令人兴奋的技术!

在 JavaScript 自身发展的推动下,JavaScript IDEs 在过去几年中有了显著的更新。可能性不胜枚举,但有几个应用值得注意。John Resig 在他的开发环境中使用了高度定制的 vim 版本。约翰·帕克斯顿稍微懒一点,他选择使用 JetBrains 的优秀的 WebStorm ( http://www.jetbrains.com/webstorm/)作为他的 IDE。Adobe 提供开源、免费的支架 IDE ( http://brackets.io/),目前版本为 1.3。Eclipse 也是可用的,许多人已经报告了通过定制 SublimeText 或 Emacs 来完成他们的投标的积极结果。像往常一样,用你觉得最舒服的。

还有其他工具可以帮助 JavaScript 开发。我们将在本书的后面专门用一章来介绍它们,而不是在这里一一列举。这意味着这是一个很好的时间来给出一个未来的轮廓。

接下来

从第二章开始,我们将看看 JavaScript 语言的最新和最伟大之处。这意味着查看新的特性,比如那些通过Object类型可用的特性,但是也要重新检查一些旧的概念,比如引用、函数、作用域和闭包。我们将把所有这些都放在特性、功能和对象的标题下,但是它涵盖的内容不止这些。

第三章讨论了创建可重用代码。第 2 章跳过了 JavaScript 最大的新特性之一,即Object.create()方法,以及它对面向对象 JavaScript 代码的影响。因此,在这一章中,我们将花时间了解用 JavaScript 实现的Object.create()、函数构造函数、原型和面向对象的概念。

已经花了两章开发代码,我们应该开始考虑如何管理它。第四章向你展示了用于调试 JavaScript 代码的工具。我们首先研究浏览器及其开发工具。

第 5 章开始讨论 JavaScript 功能的一些常用领域。这里我们看一下文档对象模型。自上一版以来,DOM API 的复杂性增加了,但并没有真正变得更简单。但是有一些我们应该熟悉的新特性。

在第 6 章中,我们试图掌握事件。这里的大新闻是遵循 W3C 风格的事件 API 的标准化。这让我们有机会远离实用程序库,最终深入到事件 API 中,而不用担心浏览器之间的巨大差异。

JavaScript 的第一个非玩具应用之一是客户端表单验证。令人惊讶的是,浏览器制造商花了十多年的时间才想到除了捕获提交事件之外,还要增加表单验证的功能。当查看第 7 章中的 JavaScript 和表单验证时,我们会发现 HTML 和 JavaScript 都提供了一套全新的表单验证功能。

每个用 JavaScript 开发的人都花了一些时间介绍 Ajax 。随着跨源资源共享(CORS)的引入,Ajax 功能终于克服了最愚蠢的限制。

像 Yeoman、Bower、Git 和 Grunt 这样的命令行工具包含在 Web 制作工具中。这些工具将向我们展示如何快速添加所有需要的文件和文件夹。这样我们才能专注于发展。

第十章包括和检测。使用在前一章中获得的知识,我们现在开始看看是什么使 Angular 工作,以及如何实现单元测试和端到端测试。

最后,第 11 章讨论了 JavaScript 的未来。ECMAScript 6 或多或少会在本书出版时被解决。ECMAScript 7 正在积极开发中。除了 JavaScript 的基本发展方向之外,我们还将看看您现在可以使用哪些特性。

摘要

这一章我们花了很多时间讨论 JavaScript 的一切:平台、历史、ide 等等。我们相信历史影响着现在。我们想要解释我们在哪里,以及我们是如何到达这里的,来帮助你理解为什么 JavaScript 是现在的样子。当然,我们计划用这本书的大部分来讨论 JavaScript 是如何工作的,特别是对于专业程序员来说。我们强烈认为,这本书涵盖了每个专业 JavaScript 程序员都应该熟悉的技术和 API。所以事不宜迟…