1.2 用JavaScript來寫瀏覽器上的應(yīng)用

1.2.1 我要做一個聊天室

大概是在1998年12月中旬，我的個人網(wǎng)站完工了。

這是一個文學(xué)網(wǎng)站，這個網(wǎng)站在瀏覽器上用到了Java Applet和JavaScript，并且為IE 4.0瀏覽器提供了一個稱為“搜索助手”的浮動條（FloatBar），用于快速向服務(wù)器提交查詢文章的請求。而服務(wù)器端則使用了Delphi開發(fā)的ISAPI CGI，運(yùn)行于當(dāng)時流行的Windows NT上的IIS系統(tǒng)。

我接下來的想法是：我要做一個聊天室。因?yàn)樵谖业膫€人網(wǎng)站中，論壇、BBS等都有網(wǎng)站免費(fèi)提供，唯獨(dú)沒有聊天室。于是在1999年春節(jié)期間，我在四川的家中開始做這個聊天室并完成了原型系統(tǒng)（我稱之為beta 0）；一個月后，這個聊天室的beta 1版終于在互聯(lián)網(wǎng)上架站運(yùn)行（見圖1-1）。

這個聊天室的功能集設(shè)定見表1-1。

在這個聊天室的右上角有一個“隱藏幀”，是用FRAMESET來實(shí)現(xiàn)的。這是最早期實(shí)現(xiàn)Web RPC（Remote Procedure Call）的方法，那時網(wǎng)頁開發(fā)還不推薦使用IFRAME，也沒有后來風(fēng)行的AJAX。因此從瀏覽器下方的狀態(tài)欄中，也可以看到這個聊天室在調(diào)用服務(wù)器上的dll文件—這就是那個用Delphi寫的ISAPI CGI。當(dāng)時我還不知道PHP，而ASP也并不那么流行。

這個聊天室在瀏覽器上大量地使用了JavaScript。一方面，它用于顯示聊天信息、控制CSS顯示和實(shí)現(xiàn)界面上的用戶交互；另一方面，我用它實(shí)現(xiàn)了一個Command Center，將瀏覽器中的行為編碼成命令發(fā)給服務(wù)器的ISAPI CGI。這些命令被服務(wù)器轉(zhuǎn)發(fā)給聊天室中的其他用戶，目標(biāo)用戶瀏覽器中的JavaScript代碼能夠解釋這些命令并執(zhí)行類似“更名”“更新列表”之類的功能—服務(wù)器上的ISAPI基本上只用于中轉(zhuǎn)命令，因此效率非常高。

你可能已經(jīng)注意到，這其實(shí)與后來興起的AJAX、前后端分離架構(gòu)，包括最近兩年出現(xiàn)的所謂“JAMStack”如出一轍。

雖然這個聊天室在beta 0版時還嘗試支持了NN 4，但在beta 1時我就放棄了—因?yàn)镮E 4提供的DHTML模型已經(jīng)可以使用insertAdjacentHTML動態(tài)更新網(wǎng)頁了，而NN 4仍只能調(diào)用document.write來修改頁面。

1.2.2 Flash的一席之地

我所在的公司也發(fā)現(xiàn)了互聯(lián)網(wǎng)上的機(jī)會，成立了互聯(lián)網(wǎng)事業(yè)部。我則趁機(jī)提出了一個龐大的計(jì)劃，名為JSVPS（JavaScript Visual Programming System）。

JSVPS在服務(wù)器端表現(xiàn)為dataCenter與dataBaseCenter。前者用于類似聊天室的即時數(shù)據(jù)交互，后者則用于類似論壇中的非即時數(shù)據(jù)交互。在瀏覽器端，JSVPS提出了開發(fā)網(wǎng)頁編輯器和JavaScript組件庫的設(shè)想。

這時微軟的IE 4.x已經(jīng)從瀏覽器市場拿到了超過70%的市場份額，開始試圖把Java Applet從它的瀏覽器中趕走。這一策略所憑借的，便是微軟在IE中加入的ActiveX技術(shù)。于是Macromedia Flash就作為一個ActiveX插件“擠”了進(jìn)來。Flash在矢量圖形表達(dá)能力和開發(fā)環(huán)境方面表現(xiàn)優(yōu)異，使當(dāng)時的Java Applet優(yōu)勢全失。一方面微軟急于從桌面環(huán)境中擠走Java，以應(yīng)對接下來.NET與Java的語言大戰(zhàn)；另一方面Flash與Dreamweaver當(dāng)時只是網(wǎng)頁制作工具，因此微軟并沒有放在眼里，就假手Flash趕走了Java Applet。

Dreamweaver系列的崛起，使得網(wǎng)頁制作工具的市場變得幾乎沒有了懸念。重心放在Java Applet的工具，例如，HotDog等都紛紛落馬；而純代碼編輯的工具，如國產(chǎn)的CutePage則被Dreamweaver慢慢地蠶食著市場。同樣的原因，JSVPS項(xiàng)目在瀏覽器端“開發(fā)網(wǎng)頁編輯器”的設(shè)想最終未能實(shí)施，而“JavaScript組件庫”也因?yàn)槭袌霾幻骼室恢辈荒芡度腴_發(fā)。

而在服務(wù)器端的dataCenter與dataBaseCenter都成功地投入了商用。此后，我在聊天室上花了更多的精力。到2001年下半年，我的聊天室已經(jīng)開始使用頁簽形式來管理多房間同時聊天，并加入語言過濾、表情、行為和用戶界面定制等功能。而且，通過對核心代碼的分離，聊天室已經(jīng)衍生出“Web即時通信工具”和“網(wǎng)絡(luò)會議室”這樣的版本。

2002年年初，聊天室發(fā)布的最終版本（v2.8）的功能設(shè)定已經(jīng)遠(yuǎn)遠(yuǎn)超出了現(xiàn)在網(wǎng)上所見的Web聊天室的功能集。在圖1-2所示的示例中，聊天室包括顏色選取器、本地歷史記錄、多房間管理、分屏過濾器、音樂、動作、表情庫和Outlook樣式的工具欄，以及中間層疊的窗體，都是由DHTML與CSS來動態(tài)實(shí)現(xiàn)的。在后臺驅(qū)動這一切的，就是JavaScript。

我沒有選擇這時已經(jīng)開始流行的Flash，因?yàn)橛肈HTML做聊天室的界面效果并不遜于Flash，也因?yàn)樵赗WC與RIA的戰(zhàn)爭中，我選擇了前者。

1.2.3 RWC與RIA之爭

追溯RWC的歷史，就需要從“動態(tài)網(wǎng)頁（DHTML，Dynamic HTML）”說起。

在1997年10月發(fā)布的IE 4中，微軟提供了JScript 3，這包括當(dāng)時剛剛發(fā)布的ECMAScript Edition 1，以及尚未發(fā)布的JavaScript 1.3的很多特性。最重要的是，微軟頗有創(chuàng)見地將CSS、HTML與JavaScript技術(shù)集成起來，提出了DHTML開發(fā)模型（Dynamic HTML Model），這使得幾乎所有的網(wǎng)頁都開始傾向于“動態(tài)（Dynamic）”。

開始，人們還很小心地使用著腳本語言，但當(dāng)微軟用IE 4在瀏覽器市場擊敗網(wǎng)景之后，很多人發(fā)現(xiàn)，沒有必要為10%的人去多寫90%的代碼。因此，“兼容”和“標(biāo)準(zhǔn)”變得不再重要。于是DHTML成了網(wǎng)頁開發(fā)的事實(shí)標(biāo)準(zhǔn)，以致后來由W3C提出的DOM（Document Object Model）在很長一段時間都沒有產(chǎn)生任何影響。

這時，成熟的網(wǎng)頁制作模式，使得一部分人熱衷于創(chuàng)建更有表現(xiàn)能力和實(shí)用價值的網(wǎng)頁，他們把這樣的瀏覽器和頁面叫作“Rich Web Client”，簡稱RWC。Rich Web的概念產(chǎn)于何時已經(jīng)不可考，但Erik Arvidsson一定是實(shí)踐其的先行者，他也可能是最早通過JavaScript+DHTML實(shí)現(xiàn)menu、tree及tooltip的人。1998年年末，他已經(jīng)在個人網(wǎng)站上實(shí)現(xiàn)了一個著名的WebFX Dynamic WebBoard（見圖1-3）。這套界面完整地模仿了Outlook，因而是在Rich Web Client上實(shí)現(xiàn)類Windows界面的經(jīng)典之作。

而在這時盛行的Flash也需要一種腳本語言來表現(xiàn)動態(tài)的矢量圖形。因此，Macromedia很自然地在Flash 2中加入了一種名為Action的腳本支持。在Flash 3時，該腳本參考了JavaScript的實(shí)現(xiàn)，變得更為強(qiáng)大。隨后，Macromedia又干脆以JavaScript作為底本完成了自己的ActionScript，并加入Flash 5中。隨著ActionScript被瀏覽器端開發(fā)人員逐漸接受，這種語言也日漸成熟，于是Macromedia開始提出自己的對“瀏覽器端開發(fā)”的理解。這就是有名的RIA（Rich Internet Application）。

這樣一來，RIA與RWC分爭“富瀏覽器客戶端應(yīng)用（Rich Web-client Application，RWA）”的市場局面出現(xiàn)了—微軟開始嘗到自己種下的苦果：一方面它通過基于ActiveX技術(shù)的Flash趕走了Java Applet，另一方面卻又使得Dreamweaver和Flash日漸做大。實(shí)在是前門拒虎，后門進(jìn)狼。微軟用丟失網(wǎng)頁編輯器和網(wǎng)頁矢量圖形事實(shí)標(biāo)準(zhǔn)的代價，換取了在開發(fā)工具（例如，Visual Studio.NET）和語言標(biāo)準(zhǔn)（例如，CLS，Common Language Specification）方面的成功。而這個代價的直接表現(xiàn)之一，就是RIA對RWC的挑戰(zhàn)。

RIA的優(yōu)勢非常明顯，在Dreamweaver UltraDev 4.0發(fā)布之后，Macromedia成為網(wǎng)頁編輯、開發(fā)類工具市場的領(lǐng)先者。而在服務(wù)器端，有基于Server Page思路的ColdFusion、優(yōu)秀的J2EE應(yīng)用服務(wù)器JRun和面向RIA模式的Flash組件環(huán)境Flex。這些構(gòu)成了完整的B/S三層開發(fā)環(huán)境。然而似乎沒有人能容忍Macromedia獨(dú)享瀏覽器開發(fā)市場，并試圖染指服務(wù)器端的局面，所以RIA沒有得到足夠的商業(yè)支持。另一方面，ActionScript也離JavaScript越來越遠(yuǎn)，既不受傳統(tǒng)網(wǎng)頁開發(fā)者的青睞，對以設(shè)計(jì)人員為主體的Flash開發(fā)者來講又設(shè)定了過高的門檻。

但RWC的狀況則更加尷尬。因?yàn)镴avaScript中盡管有非常豐富的、開放的網(wǎng)絡(luò)資源，但卻找不到一套兼容的、標(biāo)準(zhǔn)的開發(fā)庫，也找不到一套規(guī)范的對象模型（DOM與DHTML紛爭不斷），甚至連一個統(tǒng)一的代碼環(huán)境都不存在（沒有嚴(yán)格規(guī)范的HOST環(huán)境）。

在RIA熱捧瀏覽器上的Rich Application市場的同時，自由的開發(fā)者們則在近乎瘋狂地挖掘CSS、HTML和DOM中的寶藏，試圖從中尋找到RWC的出路。支持這一切的，是JavaScript 1.3～1.5，以及在W3C規(guī)范下逐漸成熟的Web開發(fā)基礎(chǔ)標(biāo)準(zhǔn)。而在這整個過程中，RWC都只是一種沒有實(shí)現(xiàn)的、與RIA的商業(yè)運(yùn)作進(jìn)行著持續(xù)抗?fàn)幍睦硐攵选?/p>