上篇 JavaScript程序開發(fā)

第1章 JavaScript簡介

所有Web頁面開發(fā)人員及希望成為Web頁面開發(fā)人員的人，對(duì)HTML（hypertext markup language，超文本標(biāo)記語言）一定不陌生，因?yàn)樗蔷W(wǎng)頁制作的基礎(chǔ)。但是如果希望頁面能夠方便用戶使用，友好而大方，甚至希望頁面能夠像桌面應(yīng)用程序一樣，那么僅僅依靠HTML是不夠的。如今，JavaScript在Web頁面開發(fā)中扮演著重要的角色。本章將從JavaScript的起源及一些背景知識(shí)出發(fā)，介紹其基礎(chǔ)知識(shí)，為讀者對(duì)后續(xù)章節(jié)的進(jìn)一步學(xué)習(xí)打下基礎(chǔ)。本章思維導(dǎo)圖如下。

本章導(dǎo)讀

1.1 程序設(shè)計(jì)語言與JavaScript

知識(shí)點(diǎn)講解

在正式開始學(xué)習(xí)JavaScript語言之前，我們先來了解一些關(guān)于程序設(shè)計(jì)語言以及JavaScript的背景知識(shí)和特點(diǎn)。初學(xué)者雖然未必能夠完全、迅速、深刻地理解這些概念，但是先有感性的認(rèn)識(shí)，等到學(xué)完以后再經(jīng)過一些時(shí)間的實(shí)踐和練習(xí)，就會(huì)逐步真正理解它們了。

自從20世紀(jì)中期電子計(jì)算機(jī)被發(fā)明以來，程序設(shè)計(jì)語言就開始不斷地發(fā)展、演進(jìn)，從數(shù)量來說，真正被使用的編程語言可能有數(shù)十甚至上百種，各種語言也在不斷發(fā)展變化，讀者如果有興趣，可以查看一個(gè)專門對(duì)各種程序設(shè)計(jì)語言流行度進(jìn)行研究和追蹤的網(wǎng)站——TIOBE。根據(jù)TIOBE給出的數(shù)據(jù)，目前流行度最廣的10種語言如圖1.1所示。

如果仔細(xì)看一下這10種語言，它們大致可以分為以下幾種不同的情況。

● 排名第1的C語言是最為傳統(tǒng)的結(jié)構(gòu)化程序設(shè)計(jì)語言，它可以被看作很多流行語言的“老祖宗”，但目前C語言主要用于對(duì)性能要求比較高的系統(tǒng)開發(fā)或底層開發(fā)，例如操作系統(tǒng)或設(shè)備驅(qū)動(dòng)程序的開發(fā)，而在應(yīng)用層的程序開發(fā)方面則使用得并不多。排名第10的匯編語言（Assembly language）則被用于底層的設(shè)備驅(qū)動(dòng)程序的開發(fā)等場景，通常不會(huì)用來開發(fā)通用的面向業(yè)務(wù)層面的程序和系統(tǒng)。

● 排名第9的SQL是被使用極為廣泛的語言，幾乎沒有一個(gè)網(wǎng)站或者App的背后沒有SQL的存在，但它不屬于通用程序設(shè)計(jì)語言，它是用于對(duì)數(shù)據(jù)庫進(jìn)行操作的專用語言。

● 剩下的7種語言中，不僅JavaScript語言，而且其余的6種語言也都屬于面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，它們都是主流的、被用于開發(fā)業(yè)務(wù)系統(tǒng)的語言。實(shí)際上它們都有著非常類似的語法結(jié)構(gòu)和特性，被稱為基于“類”的面向?qū)ο笳Z言。從而也可以看出，面向?qū)ο笫且环N極其主流的程序開發(fā)范式，否則不會(huì)幾乎所有的主流程序開發(fā)語言都使用這種范式。

● JavaScript經(jīng)過20多年的發(fā)展，已經(jīng)從一種內(nèi)嵌于瀏覽器的非常簡單的腳本語言，發(fā)展成了一種被廣泛應(yīng)用于各個(gè)領(lǐng)域的通用程序開發(fā)語言。需要了解的是，JavaScript也是一種面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，但是它使用了與其他主流面向?qū)ο笳Z言都不一樣的另一種范式，即基于“原型”的面向?qū)ο蠓妒?。?duì)于大多數(shù)開發(fā)者來說，他們學(xué)習(xí)這種開發(fā)范式，多多少少會(huì)遇到一些困難。

JavaScript語言有如下一些特點(diǎn)。

1.JavaScript是解釋型語言，而非編譯型語言

傳統(tǒng)的C、C++、C#、Java等語言都是編譯型語言，程序員寫好的程序首先被編譯為機(jī)器碼或者字節(jié)碼，然后才能在機(jī)器上運(yùn)行，所以這些語言都有“編譯期”和“運(yùn)行時(shí)”的概念。當(dāng)程序存在一些問題的時(shí)候，有的問題可以在編譯的時(shí)候就被發(fā)現(xiàn)，有的問題會(huì)到運(yùn)行的時(shí)候才被發(fā)現(xiàn)。

而JavaScript是解釋型語言，不需要編譯即可直接在具體的運(yùn)行環(huán)境（例如瀏覽器）中運(yùn)行。因此程序中如果存在問題，都是在運(yùn)行時(shí)才會(huì)被發(fā)現(xiàn)。

2.JavaScript是動(dòng)態(tài)類型語言，而非靜態(tài)類型語言

在所有高級(jí)程序設(shè)計(jì)語言中，都有“數(shù)據(jù)類型”的概念。只有機(jī)器語言和匯編語言是面向寄存器和內(nèi)存地址進(jìn)行編程、基本上沒有數(shù)據(jù)類型概念的。而對(duì)于高級(jí)語言來說，類型系統(tǒng)是一門語言里最重要的特征和組成部分，不同的語言會(huì)有各自不同的類型系統(tǒng)。如果深入探究的話，類型系統(tǒng)是非常復(fù)雜的，需要更豐富的相關(guān)背景知識(shí)，因此這里我們僅對(duì)其進(jìn)行淺顯的講解。

諸如C、C++、C#、Java等語言都屬于靜態(tài)類型語言。也就是說，一個(gè)變量一旦被聲明為某種類型，就不能再改變。而JavaScript語言則不然，一個(gè)變量可以隨時(shí)改變自身類型，因此它是動(dòng)態(tài)類型語言。

3.JavaScript是弱類型語言，而非強(qiáng)類型語言

高級(jí)語言的類型系統(tǒng)除了可以分為動(dòng)態(tài)類型和靜態(tài)類型外，還可以分為強(qiáng)類型和弱類型。類型強(qiáng)弱的區(qū)分則比動(dòng)靜態(tài)的區(qū)分更為復(fù)雜，如果要對(duì)此進(jìn)行嚴(yán)格的定義，需要一些復(fù)雜的程序語言方面的知識(shí)，故這里不做嚴(yán)格的定義。粗淺地說，強(qiáng)類型語言對(duì)類型的要求更為嚴(yán)格，偏向于更嚴(yán)格地限制變量自動(dòng)的類型轉(zhuǎn)換（或稱隱式轉(zhuǎn)換），而弱類型語言則對(duì)變量自動(dòng)的類型轉(zhuǎn)換更為寬容。

我們會(huì)在后面的章節(jié)詳細(xì)地介紹相關(guān)知識(shí)，而這部分內(nèi)容也是JavaScript讓人頗為頭疼的知識(shí)點(diǎn)之一。

根據(jù)上面的第2、3兩個(gè)特點(diǎn)，可以把各種程序語言分類到4個(gè)象限，如圖1.2所示。

● 靜態(tài)強(qiáng)類型語言，典型的是Java、C#語言。

● 靜態(tài)弱類型語言，典型的是C語言。

● 動(dòng)態(tài)強(qiáng)類型語言，典型的是Python語言。

● 動(dòng)態(tài)弱類型語言，典型的是JavaScript語言。

從圖1.2中可以看出，一門語言是動(dòng)態(tài)類型還是靜態(tài)類型，是強(qiáng)類型還是弱類型，并不是絕對(duì)的，而是一種評(píng)價(jià)“尺度”，只能說偏向某一邊多一些而已。

此外還可以看出，JavaScript是一種特別靈活的語言，很大程度上給予了程序員自由掌控程序的權(quán)利。這是一把“雙刃劍”，自由的同時(shí)意味著責(zé)任。一方面這與最初設(shè)計(jì)它的理想主義理念有關(guān)，另一方面也與最初的編程規(guī)則不夠完善有關(guān)。JavaScript的創(chuàng)始人Brendan Eich（布倫丹?艾希）最初設(shè)計(jì)并實(shí)現(xiàn)JavaScript語言只用了兩周的時(shí)間，因此不可避免地在各個(gè)方面要使用“做減法”的策略。因?yàn)楫?dāng)時(shí)僅僅是為了能夠在網(wǎng)頁上實(shí)現(xiàn)一些簡單的交互而已。在當(dāng)時(shí)，誰也無法預(yù)料JavaScript會(huì)成為重要的程序設(shè)計(jì)語言和事實(shí)上的互聯(lián)網(wǎng)標(biāo)準(zhǔn)。

4.JavaScript是基于原型的面向?qū)ο笳Z言，而非基于類的面向?qū)ο笳Z言

這一點(diǎn)是JavaScript讓初學(xué)者更為頭疼的一點(diǎn)。從程序設(shè)計(jì)的宏觀范式角度來看，程序設(shè)計(jì)語言的演進(jìn)大致經(jīng)過了3個(gè)階段。

在電子計(jì)算機(jī)出現(xiàn)后不久的初始階段，使用機(jī)器語言進(jìn)行程序設(shè)計(jì)與開發(fā)是一項(xiàng)極其低效而煩瑣的工作，因此產(chǎn)生了高級(jí)語言，以盡可能使用接近人類語言的方式編寫程序。當(dāng)然在最早期階段，高級(jí)語言相當(dāng)不完善。高級(jí)語言主要是通過“翻譯”機(jī)器指令的方式實(shí)現(xiàn)的，并且會(huì)通過條件判斷以及跳轉(zhuǎn)（Goto語句）來實(shí)現(xiàn)程序邏輯的表達(dá)。

在著名的荷蘭計(jì)算機(jī)科學(xué)家迪杰斯特拉發(fā)表了論文指出“Goto語句是有害的”之后，程序設(shè)計(jì)語言領(lǐng)域逐步發(fā)展出了結(jié)構(gòu)化程序設(shè)計(jì)的范式，最早實(shí)現(xiàn)結(jié)構(gòu)化程序設(shè)計(jì)范式的是Pascal語言，其核心思想是消除Goto語句、自頂向下、逐步求精。通過順序、分支、循環(huán)這3種基本結(jié)構(gòu)以及子程序（函數(shù)）來表達(dá)程序邏輯，對(duì)指令進(jìn)行封裝，人們實(shí)現(xiàn)了代碼的重用。

此后，人們逐漸發(fā)現(xiàn)，結(jié)構(gòu)化程序設(shè)計(jì)過程中，雖然消除了Goto語句，但是往往需要依賴大量的分支結(jié)構(gòu)，例如嵌套的if-else結(jié)構(gòu)或者switch-case結(jié)構(gòu)，而這往往是程序復(fù)雜性的來源。因此，面向?qū)ο螅╫bject oriented）思想逐步產(chǎn)生并成熟，在結(jié)構(gòu)化程序設(shè)計(jì)的基礎(chǔ)上又增加了“類”等基本結(jié)構(gòu)，對(duì)程序的抽象能力進(jìn)一步加強(qiáng)。面向?qū)ο笳Z言通過封裝、繼承和多態(tài)等特性，實(shí)現(xiàn)了低耦合、高內(nèi)聚的目標(biāo)，降低了程序的復(fù)雜性，提高了程序的可讀性和可維護(hù)性。

目前面向?qū)ο蟮幕窘Y(jié)構(gòu)是主流程序設(shè)計(jì)語言的基本配置，前文介紹的許多被廣泛使用的通用程序設(shè)計(jì)語言都是面向?qū)ο蟮摹?/p>

非常有趣但也令人頭疼的是，JavaScript使用了一種與大多數(shù)主流語言很不一樣的面向?qū)ο蟮膶?shí)現(xiàn)方式。主要涉及4點(diǎn)。

● 例如Java、C#這類常見語言都是使用“類-實(shí)例”的方式來對(duì)程序要表達(dá)的邏輯進(jìn)行抽象的。而JavaScript則使用了一套非常不同的被稱為“原型”的方式來對(duì)邏輯進(jìn)行抽象。理解“原型”的工作原理對(duì)初學(xué)者而言是一件頗具挑戰(zhàn)的事情。

● JavaScript的類型系統(tǒng)被稱為“結(jié)構(gòu)性類型”，而不是Java、C#等語言使用的“名義性類型”，這一區(qū)別會(huì)帶來很多開發(fā)中思維方式的不同。要逐步熟悉JavaScript的思維方式，是需要學(xué)習(xí)者靜下心來認(rèn)真思考并通過實(shí)踐才能逐步掌握的。

● JavaScript吸收了函數(shù)式語言的一些特征。函數(shù)在JavaScript中的地位特別重要，遠(yuǎn)遠(yuǎn)超出了函數(shù)在普通語言中的地位。

● 由于歷史原因，JavaScript的發(fā)展經(jīng)過了很漫長的爭論，其不同的版本有各自不同的實(shí)現(xiàn)方法，且還要實(shí)現(xiàn)對(duì)歷史版本的兼容。JavaScript中實(shí)現(xiàn)同一個(gè)功能，可能有很多不同的實(shí)現(xiàn)方法，各自有不同的優(yōu)缺點(diǎn)，所以要想真正掌握這些實(shí)現(xiàn)方法，就要對(duì)它們條分縷析。例如實(shí)現(xiàn)對(duì)象的創(chuàng)建和繼承，在其他語言里是一件很簡單和確定的事情，而在JavaScript中則可能有將近10種方法，這對(duì)于初學(xué)者是比較有挑戰(zhàn)性的。

總體來說，根據(jù)上面的講解，讀者可以了解JavaScript是一種頗具個(gè)性的語言，無論是對(duì)編程新手，還是對(duì)已經(jīng)熟練掌握了其他語言的資深開發(fā)人員來說，JavaScript都是需要付出努力才能被真正掌握的語言。Java與JavaScript之間的差距，遠(yuǎn)遠(yuǎn)大于Java與C#，或者Java與Python之間的差距。

當(dāng)然，讀者對(duì)此也無須害怕。一方面隨著ES6的推出，新的JavaScript用起來已經(jīng)非?！罢！绷?；另一方面，JavaScript的使用者大體上可以分為兩類，即框架開發(fā)者和應(yīng)用開發(fā)者，他們對(duì)JavaScript的理解和掌握程度有很大的不同。

● 如果你是一名框架開發(fā)者，就需要對(duì)JavaScript有著非常深刻的理解和掌握。常見的JavaScript框架（例如非常流行的jQuery、Vue.js和React等）都是由很多技術(shù)水準(zhǔn)非常高的開發(fā)人員開發(fā)出來的。而這些框架的開發(fā)目的是降低開發(fā)實(shí)際應(yīng)用程序（例如某個(gè)網(wǎng)站）的技術(shù)門檻。

● 如果你是一名應(yīng)用開發(fā)者，通常每天面對(duì)的工作是使用一些常用的框架開發(fā)一些網(wǎng)站的頁面，那么對(duì)技術(shù)的要求會(huì)簡單很多，通常只要能掌握J(rèn)avaScript的基本特性就可以了，基本不需要寫涉及對(duì)象繼承等復(fù)雜的代碼。當(dāng)然本書還是會(huì)對(duì)JavaScript的一些比較深入的特性進(jìn)行講解，使讀者在需要時(shí)能夠讀懂一些比較復(fù)雜的代碼（比如某些框架的源代碼）。讀懂復(fù)雜的代碼對(duì)開發(fā)者技術(shù)實(shí)力的提升意義巨大。

1.2 JavaScript的起源、發(fā)展與標(biāo)準(zhǔn)化

任何技術(shù)都不是單純地在實(shí)驗(yàn)室里憑空構(gòu)想出來的，JavaScript語言也是起于草莽，逐步成為今天的互聯(lián)網(wǎng)時(shí)代的“核心支柱”的。

1.2.1 起源

早在1992年，一家名為Nombas的公司開發(fā)出一種叫作“C減減”（C-minus-minus）的嵌入式腳本語言，并將其捆綁在一個(gè)被稱作CEnvi的共享軟件中。當(dāng)時(shí)意識(shí)到互聯(lián)網(wǎng)會(huì)成為技術(shù)焦點(diǎn)的Netscape（網(wǎng)景）公司，開發(fā)出了自己的瀏覽器軟件Navigator并率先進(jìn)入市場。與此差不多的時(shí)間，Nombas公司開發(fā)出了第一個(gè)可以嵌入網(wǎng)頁的CEnvi版本，它是萬維網(wǎng)上最早的客戶端腳本。

當(dāng)“網(wǎng)上沖浪”逐步走入千家萬戶的時(shí)候，對(duì)開發(fā)客戶端腳本語言的需求顯得越來越迫切。此時(shí)大多數(shù)網(wǎng)民還是通過28.8kbit/s的調(diào)制解調(diào)器來連接網(wǎng)絡(luò)，但網(wǎng)頁卻越來越豐富多彩。讓眾多開發(fā)者頭疼的是許多用戶認(rèn)證等現(xiàn)在看起來極其簡單的操作，當(dāng)時(shí)實(shí)現(xiàn)起來都非常麻煩。這時(shí)網(wǎng)景公司（為了擴(kuò)展其瀏覽器的功能）開發(fā)了一種名為LiveScript的腳本語言，并于1995年11月末與Sun公司聯(lián)合宣布把其改名為JavaScript。改成JavaScript并非因?yàn)樗蚃ava有關(guān)系，而是想蹭一下Java的熱度。二者之間的距離不小于“雷鋒”和“雷峰塔”之間的差距。

此后很短時(shí)間，Microsoft（微軟）公司也意識(shí)到了互聯(lián)網(wǎng)的重要性，并決定進(jìn)軍瀏覽器市場。其在發(fā)布的Internet Explorer（IE）3.0中搭載了JavaScript的“克隆”版本，但為了避免版權(quán)糾紛，將其命名為JScript。隨后微軟公司將瀏覽器加入操作系統(tǒng)中捆綁銷售，使JavaScript得到了很快的發(fā)展，但這樣也產(chǎn)生了3個(gè)不同版本的JavaScript：網(wǎng)景公司的JavaScript、微軟公司的JScript以及Nombas公司的ScriptEase。

1997年，JavaScript 1.1作為一個(gè)草案被提交給ECMA（European Computer Manufacturers Association，歐洲計(jì)算機(jī)制造商協(xié)會(huì)）。由來自網(wǎng)景、Sun、微軟、Borland等對(duì)腳本語言感興趣的公司的程序員組成第39技術(shù)委員會(huì)（TC39）。TC39最終“錘煉”出ECMA-262標(biāo)準(zhǔn)，定義了ECMAScript這種全新的腳本語言。ECMA-262是一個(gè)偉大的標(biāo)準(zhǔn)，如今我們能夠在不同的設(shè)備上使用JavaScript要得益于ECMA-262標(biāo)準(zhǔn)，并且ECMA-262標(biāo)準(zhǔn)一直在不斷升級(jí)演進(jìn)。

進(jìn)入21世紀(jì)后，網(wǎng)頁上的各種對(duì)話框、廣告、滾動(dòng)提示條越來越多，JavaScript被很多網(wǎng)頁制作者亂用，一度背上了惡劣的名聲。直到2005年初，Google（谷歌）公司的網(wǎng)上產(chǎn)品谷歌討論組、谷歌地圖、谷歌搜索建議、Gmail等使得AJAX（asynchonous JavaScript and XML，異步JavaScript和XML技術(shù)）興起并受到廣泛好評(píng)。此時(shí)，作為AJAX最重要元素之一的JavaScript才重新找到了自己的定位。

背景知識(shí)

大家可以記住TC39，它是后來20年主導(dǎo)JavaScript標(biāo)準(zhǔn)制定的關(guān)鍵組織。TC39的成員都是一些公司“巨頭”、相關(guān)組織以及大學(xué)，例如微軟、谷歌、蘋果、Mozilla、英特爾、甲骨文、jQuery基金會(huì)等。

TC39有一整套完備的JavaScript標(biāo)準(zhǔn)制定流程。TC39成員可以提交提案，所提交的提案經(jīng)過TC39審議和討論，按照一定的步驟，經(jīng)過若干階段，最終可以成為正式標(biāo)準(zhǔn)。

1.2.2 博弈與發(fā)展

所有如今看起來是天經(jīng)地義的技術(shù)，其實(shí)都是經(jīng)過了驚心動(dòng)魄的博弈和競爭之后的產(chǎn)物。JavaScript就是在一系列激烈的博弈和競爭中逐步發(fā)展起來的。

20世紀(jì)90年代中期，互聯(lián)網(wǎng)開始普及，瀏覽器成為競爭的“風(fēng)口”，此時(shí)的瀏覽器市場幾乎被網(wǎng)景公司的產(chǎn)品所壟斷，如日中天的微軟公司意識(shí)到在瀏覽器領(lǐng)域已經(jīng)落后的現(xiàn)實(shí)情況，又一次通過“捆綁”這個(gè)法寶，在Windows操作系統(tǒng)中免費(fèi)內(nèi)置了IE。1997年6月，網(wǎng)景公司的Navigator 4發(fā)布，同年的10月微軟公司發(fā)布了IE 4。這兩種瀏覽器較以前的版本有了明顯的改進(jìn)，DOM（document object model，文檔對(duì)象模型）得到了很大的擴(kuò)展，從而可以運(yùn)用JavaScript來完成一系列加強(qiáng)的功能。

在各自的瀏覽器中，雙方大體上遵循著一致的標(biāo)準(zhǔn)，但又各有各的特性，即不完全一致。它們各自對(duì)CSS（cascading style sheets，串聯(lián)樣式表）和JavaScript的支持都不盡相同。例如網(wǎng)景公司的DOM使用其專有的層（layer）元素，每個(gè)層都有唯一的ID標(biāo)識(shí)，JavaScript通過如下代碼對(duì)Navigator進(jìn)行訪問：

document.layers['mydiv']

而在微軟的IE中，JavaScript必須如下這樣使用：

document.all['mydiv']

Navigator和IE在細(xì)節(jié)方面的差異很大，幾乎所有的JavaScript細(xì)節(jié)在兩種瀏覽器中或多或少都有區(qū)別，這就使互聯(lián)網(wǎng)網(wǎng)頁開發(fā)受到了嚴(yán)重的影響。在商業(yè)市場上，競爭與合作永遠(yuǎn)是共存的。當(dāng)“各自為戰(zhàn)”帶來很多問題以后，各大廠商便開始尋找解決之道。

1.2.3 標(biāo)準(zhǔn)的制定

就在瀏覽器廠商之間為了商業(yè)利益而展開激烈的競爭時(shí)，W3C（World Wide Web consortium，萬維網(wǎng)聯(lián)盟）也在協(xié)調(diào)各大廠商制定大家共同遵守的標(biāo)準(zhǔn)，以實(shí)現(xiàn)JavaScript技術(shù)的標(biāo)準(zhǔn)化。但是制定標(biāo)準(zhǔn)的過程也是非常艱難的，各個(gè)廠商有各自的訴求，要達(dá)成一致非常不容易。

1998年6月，ECMAScript 2.0發(fā)布，緊接著在1999年12月，ECMAScript 3.0發(fā)布。ECMAScript 3.0（ES3）獲得了巨大的成功，得到了廣泛支持，成為了JavaScript的通行標(biāo)準(zhǔn)。接著又開始了下一個(gè)版本標(biāo)準(zhǔn)的制定工作，但是制定工作非常困難，爭議巨大。經(jīng)過近8年的時(shí)間，才于2007年10月發(fā)布了ECMAScript 4.0的草案，本來預(yù)計(jì)次年8月發(fā)布正式版本。但是草案發(fā)布后，由于ECMAScript 4.0的標(biāo)準(zhǔn)過于激進(jìn)，各個(gè)廠商對(duì)于是否通過這個(gè)標(biāo)準(zhǔn)，發(fā)生了嚴(yán)重分歧。以雅虎、微軟、谷歌為首的大公司，反對(duì)JavaScript的大幅升級(jí)，主張小幅改動(dòng)；而以JavaScript創(chuàng)造者布倫丹?艾希為首的Mozilla公司，則堅(jiān)持原標(biāo)準(zhǔn)草案。為此，ECMA開會(huì)決定，中止ECMAScript 4.0的開發(fā)，將其中涉及現(xiàn)有功能改善的一小部分，發(fā)布為ECMAScript 3.1。不久之后， ECMAScript 3.1改名為ECMAScript 5（ES5）,ES5是一個(gè)“妥協(xié)的產(chǎn)物”。因此，目前JavaScript的早期版本常見就是ES3和ES5，它們之間差別不大，并且不存在ES4。

2015年6月17日，ECMAScript 6（ES6）正式發(fā)布，正式的名稱為ECMAScript 2015，但是開發(fā)人員早已習(xí)慣稱之為ES6了，因此，大多數(shù)場合ECMAScript 2015都被稱為ES6。ECMAScript 2015是一個(gè)非常重要的版本，在多方的共同努力下，它使JavaScript從一個(gè)先天不足的腳本語言成為一個(gè)正常而穩(wěn)定的通用程序開發(fā)語言。而此后，ECMAScript 仍然在不斷“演進(jìn)”，但是ES6奠定的大結(jié)構(gòu)已經(jīng)穩(wěn)定下來了，因此ES6可以說是JavaScript標(biāo)準(zhǔn)化過程中最重要的一個(gè)版本，是經(jīng)過近20年的多方努力才達(dá)到的結(jié)果。

從ECMAScript 2015開始，正式的版本名稱用發(fā)布年份標(biāo)識(shí)，這也導(dǎo)致了每個(gè)版本都有兩個(gè)名字。2016年6月，小幅修訂的ECMAScript 2016（簡稱ES2016或ES7）標(biāo)準(zhǔn)發(fā)布，其與ECMAScript 2015的差異非常小。

需要注意的是，上面介紹的都是ECMAScript，那么它和JavaScript又是什么關(guān)系呢？它們二者是標(biāo)準(zhǔn)與實(shí)現(xiàn)的關(guān)系，即ECMAScript是大家協(xié)商確定的一套標(biāo)準(zhǔn)，而JavaScript是各個(gè)瀏覽器或其他運(yùn)行環(huán)境具體的實(shí)現(xiàn)。

1.3 JavaScript的組成

知識(shí)點(diǎn)講解

盡管ECMAScript是一個(gè)重要的標(biāo)準(zhǔn)，但它并不是JavaScript的唯一部分，也不是唯一被標(biāo)準(zhǔn)化的部分。1.2.2小節(jié)提到的DOM也是JavaScript重要的組成部分之一，另外還有BOM（browser object model，瀏覽器對(duì)象模型）。JavaScript的組成如圖1.3所示。

1.3.1 ECMAScript

正如1.2.1小節(jié)所說，ECMAScript是由ECMA標(biāo)準(zhǔn)化的腳本語言。它并不與任何瀏覽器綁定，也沒有用到任何用戶輸入輸出的方法。事實(shí)上，瀏覽器僅僅是ECMAScript的宿主環(huán)境。除了常見的瀏覽器之外，Adobe公司的Flash腳本ActionScript等都支持ECMAScript的實(shí)現(xiàn)，只是Flash已經(jīng)走下了歷史舞臺(tái)。簡單來說，ECMAScript描述的僅僅是語法、類型、語句、關(guān)鍵字、保留字、運(yùn)算符、對(duì)象等。

每個(gè)瀏覽器都有其自身的ECMAScript接口，然后這些接口又被不同程度地?cái)U(kuò)展，包含了1.3.2小節(jié)和1.3.3小節(jié)會(huì)提到的DOM、BOM等。

1.3.2 DOM

根據(jù)W3C的DOM規(guī)范可知，DOM是一種與瀏覽器、平臺(tái)、語言無關(guān)的接口，使得用戶可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單來說，DOM解決了網(wǎng)景的JavaScript和微軟的JScript之間的沖突，給了Web頁面開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓大家可以方便地訪問站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。

DOM把整個(gè)頁面規(guī)劃成由節(jié)點(diǎn)層級(jí)構(gòu)成的文檔，閱讀下面這段簡單的HTML代碼：

1　 <html>
2　 <head>
3　　　 <title>DOM Page</title>
4　 </head>
5
6　 <body>
7　　　 <h2><a href="#myUl">標(biāo)題1</a></h2>
8　　　 <p>段落1</p>
9　　　 <ul id="myUl">
10　　　　　<li>JavaScript</li>
11　　　　　<li>DOM</li>
12　　　　　<li>CSS</li>
13　　　</ul>
14　</body>
15　</html>

這段HTML代碼十分簡單，故不再一一說明其中各個(gè)標(biāo)記的含義。根據(jù)DOM可將其繪制成節(jié)點(diǎn)層次圖，具體參見第7章。

現(xiàn)在需要明確的是，DOM將頁面分成了清晰、合理的層次結(jié)構(gòu)，從而使開發(fā)者對(duì)整個(gè)頁面有了很好的控制力。

1.3.3 BOM

從IE 3.0和Netscape Navigator 3.0開始，瀏覽器都提供BOM的特性，它可以對(duì)瀏覽器窗口進(jìn)行訪問和操作。利用BOM的相關(guān)技術(shù)，Web頁面開發(fā)者可以移動(dòng)窗口、改變狀態(tài)欄以及執(zhí)行一些與頁面中的內(nèi)容毫不相關(guān)的操作。盡管沒有統(tǒng)一的標(biāo)準(zhǔn)，但BOM的出現(xiàn)仍然給網(wǎng)絡(luò)世界增添了不少“色彩”，主要如下。

● 彈出新的瀏覽窗口。

● 移動(dòng)、關(guān)閉瀏覽窗口以及調(diào)整窗口大小。

● 提供瀏覽器相關(guān)信息的導(dǎo)航對(duì)象。

● 提供頁面詳細(xì)信息的定位對(duì)象。

● 提供屏幕分辨率詳細(xì)參數(shù)的屏幕對(duì)象。

● 提供cookie的支持。

● 提供各種瀏覽器自身的一些新特性，如IE的ActiveX類等。

本書的后續(xù)章節(jié)也將對(duì)BOM進(jìn)行詳細(xì)的介紹。

1.3.4 新的開始

網(wǎng)景公司與微軟公司之間的競爭最終以后者的全面獲勝而告終，這并不是因?yàn)镮E對(duì)JavaScript標(biāo)準(zhǔn)的支持強(qiáng)于Navigator或是別的技術(shù)上的因素，而是因?yàn)镮E與Windows進(jìn)行了捆綁銷售。迫于各方面的壓力，微軟公司從IE5開始內(nèi)建對(duì)W3C標(biāo)準(zhǔn)化DOM的支持，但其仍然繼續(xù)支持自身所獨(dú)有的Microsoft DOM。

再來回顧一下瀏覽器的市場占有率變化情況，如圖1.4所示，這對(duì)我們理解JavaScript語言也有所幫助。

由于早期的瀏覽器對(duì)標(biāo)準(zhǔn)支持不一致，有各自獨(dú)有的一些特性和接口，因此早期的前端開發(fā)人員為了讓網(wǎng)頁在不同的瀏覽器中能夠有統(tǒng)一的顯示效果，需要付出巨大的努力和時(shí)間成本。

2010年左右，Web標(biāo)準(zhǔn)化開始了一個(gè)新的歷程。谷歌開發(fā)的Chrome瀏覽器逐漸成為主流，與此同時(shí)，對(duì)標(biāo)準(zhǔn)的遵守也越來越好。各大廠商也開始逐步意識(shí)到標(biāo)準(zhǔn)化才是正確的選擇。

特別是進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代以后，瀏覽器進(jìn)入移動(dòng)設(shè)備，由于相對(duì)較晚，反而從一開始就比較好地支持了一致的標(biāo)準(zhǔn)，這讓前端開發(fā)人員獲得了比較舒服的開發(fā)體驗(yàn)。

1.4 Web標(biāo)準(zhǔn)

2004年初，網(wǎng)頁設(shè)計(jì)在經(jīng)歷了一系列的變革之后，一本名為Designing with Web Standards（應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)）的書掀起了整個(gè)Web行業(yè)的大革命。網(wǎng)頁設(shè)計(jì)與制作相關(guān)人員紛紛開始重新審視自己的頁面，并發(fā)現(xiàn)那些充滿嵌套表格的HTML代碼頗顯“臃腫”且難以修改，于是一場“清理”HTML代碼的行動(dòng)開始了。

1.4.1 Web標(biāo)準(zhǔn)概述

Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由3部分組成：結(jié)構(gòu)（structure）、表現(xiàn)（presentation）和行為（behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分3方面：結(jié)構(gòu)標(biāo)準(zhǔn)主要包括XML和XHTML，表現(xiàn)標(biāo)準(zhǔn)主要包括CSS，行為標(biāo)準(zhǔn)主要包括DOM和ECMAScript等。

1.結(jié)構(gòu)標(biāo)準(zhǔn)語言

結(jié)構(gòu)標(biāo)準(zhǔn)語言主要包括XML和XHTML。XML（extensible markup language，可擴(kuò)展標(biāo)記語言）和HTML一樣，來源于SGML（standard general markup language，標(biāo)準(zhǔn)通用標(biāo)記語言），但XML是一種能定義其他語言的語言。XML最初被設(shè)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。

XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對(duì)成千上萬已有的站點(diǎn)，直接采用XML還為時(shí)過早。因此，開發(fā)人員在HTML 4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML（extensible hypertext markup language，可擴(kuò)展超文本標(biāo)記語言）。簡單來說，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。

2.表現(xiàn)標(biāo)準(zhǔn)語言

W3C最初創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語言。純CSS布局與XHTML相結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問與維護(hù)更加容易。

3.行為標(biāo)準(zhǔn)語言

1.3.2小節(jié)已經(jīng)介紹過，DOM是一種與瀏覽器、平臺(tái)、語言無關(guān)的接口，它使用戶可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單來說，DOM解決了網(wǎng)景的JavaScript和微軟的JScript之間的沖突，給了Web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法來訪問站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。

另外，1.2.3小節(jié)介紹的ECMAScript同樣也是重要的行為標(biāo)準(zhǔn)。目前推薦遵循的是ECMAScript-262標(biāo)準(zhǔn)。

注意

對(duì)各個(gè)標(biāo)準(zhǔn)的技術(shù)規(guī)范和詳細(xì)文檔有興趣的讀者可以參考W3C的官網(wǎng)。

使用Web標(biāo)準(zhǔn)，對(duì)于網(wǎng)站瀏覽者來說：

● 文件下載與頁面顯示速度更快；

● 內(nèi)容能被更多的用戶（包括失明、視弱、色盲等視力障礙者）所訪問；

● 內(nèi)容能被更廣泛的設(shè)備（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等）所訪問；

● 用戶能夠通過樣式選擇定制自己的界面風(fēng)格；

● 所有頁面都能提供適用于打印的版本。

而對(duì)網(wǎng)站設(shè)計(jì)者來說：

● 僅需更少的代碼和組件，容易維護(hù)；

● 帶寬要求降低（代碼更簡潔），成本降低；

● 內(nèi)容更容易被搜索引擎搜索到；

● 改版方便，不需要改動(dòng)頁面內(nèi)容；

● 提供打印版本而不需要復(fù)制內(nèi)容；

● 提高網(wǎng)站易用性，在美國，有嚴(yán)格的法律條款來約束政府網(wǎng)站必須達(dá)到一定的易用性，其他國家也有類似的要求。

1.4.2 結(jié)構(gòu)、表現(xiàn)、行為的分離

對(duì)于網(wǎng)頁開發(fā)者而言，Web標(biāo)準(zhǔn)很好的運(yùn)用是結(jié)構(gòu)、表現(xiàn)、行為的分離，這使他們可以將頁面看成這幾個(gè)部分的有機(jī)結(jié)合體，分別對(duì)待。當(dāng)然，不同的部分要運(yùn)用不同的專用技術(shù)。下面來看一下網(wǎng)頁各個(gè)部分的含義。

網(wǎng)頁首先要展現(xiàn)其內(nèi)容（content）。例如花店網(wǎng)站最終是為了展示其賣的花，動(dòng)物網(wǎng)站的內(nèi)容主要是動(dòng)物的介紹等。因此內(nèi)容可以包括清單、文檔、圖片等，是純粹的網(wǎng)站數(shù)據(jù)。

網(wǎng)頁上只有內(nèi)容顯然是不夠的，內(nèi)容合理地組織在一起便形成了一定的結(jié)構(gòu)，例如一級(jí)標(biāo)題、二級(jí)標(biāo)題、正文、列表、圖片等，這類似Word文檔的文檔結(jié)構(gòu)。通常合理的結(jié)構(gòu)能使內(nèi)容更加具有邏輯性和易用性。通常頁面的結(jié)構(gòu)是由HTML代碼來搭建的，例如下面這段簡單的HTML代碼便搭建了一個(gè)頁面的結(jié)構(gòu)：

1　 <div id="container">
2　　　 <div id="globallink"></div>
3　　　 <div id="parameter"></div>
4　　　 <div id="main"></div>
5　　　 <div id="footer"></div>
6　 </div>

它對(duì)應(yīng)的頁面結(jié)構(gòu)可能如圖1.5所示。

HTML雖然定義了頁面的結(jié)構(gòu)，但整個(gè)頁面的外觀還是沒有改變，例如標(biāo)題的顏色還不夠突出，頁面的背景還不夠漂亮等。這些用來改變頁面外觀的東西被稱為表現(xiàn)。通常處理頁面表現(xiàn)的是CSS技術(shù)，后面的章節(jié)將會(huì)進(jìn)一步介紹它。

一個(gè)網(wǎng)站通常不僅僅通過表現(xiàn)來展示其內(nèi)容，很多時(shí)候還需要與用戶交互，例如用戶單擊按鈕、提交表單、拖曳圖片等，這些統(tǒng)稱為行為。而讓用戶能夠具有這些行為的，通常是以JavaScript為代表的腳本語言。

通過HTML搭建結(jié)構(gòu)來存放內(nèi)容，通過CSS制作美工來完成頁面的表現(xiàn)，通過JavaScript編寫腳本來實(shí)現(xiàn)各種行為，便可實(shí)現(xiàn)Web網(wǎng)頁結(jié)構(gòu)、表現(xiàn)、行為三者的分離，這也是目前標(biāo)準(zhǔn)化制作網(wǎng)頁的方法，也是本書的基礎(chǔ)，在后面的章節(jié)中都會(huì)逐一分析。

1.4.3 前/后端分離成為Web頁面開發(fā)的主流模式

另外一個(gè)大趨勢是2012年開始的前/后端分離，2014到2015年是JavaScript技術(shù)大爆發(fā)的兩年，從此全面進(jìn)入前/后端分離時(shí)代。相關(guān)發(fā)展情況如圖1.6所示。

由于移動(dòng)互聯(lián)網(wǎng)的普及，多終端設(shè)備的適配逐步成為前端開發(fā)所必須面對(duì)的問題，因此后端業(yè)務(wù)邏輯逐步演變成API（application program interface，應(yīng)用程序接口）方式，脫離與UI（user interface，用戶界面）層的耦合，前端和后端開發(fā)逐步分離。由此，前/后端分離的Web頁面開發(fā)模式逐漸被接受并逐步開始發(fā)展。

互聯(lián)網(wǎng)的應(yīng)用越來越豐富，逐步從提供內(nèi)容到提供服務(wù)轉(zhuǎn)變，對(duì)技術(shù)上的要求，具有如下4點(diǎn)。

● 客戶端需求復(fù)雜化，對(duì)用戶體驗(yàn)的期望提高。

● 頁面的渲染從服務(wù)器端轉(zhuǎn)移到客戶端。

● 客戶端程序具備完整的生命周期、分層架構(gòu)和技術(shù)棧。

● 從“單一網(wǎng)站”到“多端應(yīng)用”。

因此，傳統(tǒng)的jQuery逐步被新的客戶端框架所取代，例如當(dāng)下主流的3個(gè)客戶端框架Vue.js、Angular、React。使用這些新的客戶端框架對(duì)開發(fā)者理解并掌握J(rèn)avaScript提出了新的要求。

本章小結(jié)

在本章中，我們介紹了JavaScript的一些歷史發(fā)展情況和基本組成部分，以及Web標(biāo)準(zhǔn)的相關(guān)知識(shí)。仔細(xì)想一想JavaScript的作用，簡而言之就是我們可以對(duì)頁面中的各種對(duì)象通過編程的方式進(jìn)行控制。這正是我們正在經(jīng)歷的這個(gè)時(shí)代的大趨勢——所有事物都在逐步軟件化和智能化，甚至出現(xiàn)了一個(gè)口號(hào)“軟件定義一切”。而要實(shí)現(xiàn)軟件化和智能化，本質(zhì)就是要讓各種事務(wù)“可編程”。

習(xí)題1

一、關(guān)鍵詞解釋

JavaScript　 ECMAScript　 DOM　 BOM　 Web標(biāo)準(zhǔn)　 前/后端分離模式

二、描述題

1.請簡單描述一下JavaScript語言有什么特點(diǎn)。

2.請簡單描述一下JavaScript是由哪幾個(gè)部分組成的。

3.請簡單描述一下Web標(biāo)準(zhǔn)主要包含哪些內(nèi)容。