征服RIA:基於JavaScript的Web客戶端開發

前 言

征服RIA:基於JavaScript的Web客戶端開發 征服RIA:基於JavaScript的Web客戶端開發

RIA是什麼

RIA是Rich Internet Application的縮寫,意為富網際網路套用,引申為富客戶端套用。那么,RIA意味著什麼呢?在回答這個問題之前,我們不妨先回顧一下從大型主機時代開始,套用軟體系統發展至今所走過的歷程:

圖中的兩個坐標軸,分別代表Rich和Reach,即套用軟體的界面表現力和套用軟體所能影響到的人群。

1.主機時代,界面表現力和用戶數量無疑是最低的。少量的用戶使用啞終端操作計算機。

2.隨著計算機製造成本的降低,尤其是個人計算機的普及,使得軟體行業出現了一種新的部署結構:客戶機負責提供豐富的用戶界面、承擔業務邏輯,在伺服器上集中存儲數據。這一階段被稱為C/S(Client/Server)時代。

3.C/S結構最大的問題是部署和維護成本極高,一旦用戶界面或者業務邏輯發生變化,便需要更新分布在每一台客戶機上的軟體。因此,B/S(Browser/Server)結構應運而生。在B/S結構中,客戶端程式統一運行在Web瀏覽器中,用戶界面由伺服器程式渲染生成,客戶端程式只負責展現。部署成本的降低,使得套用軟體的用戶數量激增:網際網路能達到的地方,都可能出現你的用戶。

4.B/S結構至今被人褒貶不一。首先,客戶機的計算能力幾乎被廢棄了,這是一種浪費;其次,用戶界面的表現能力受制於Web瀏覽器,比起C/S結構發生了倒退。那么,能否創造一種在套用軟體的界面表現力和部署成本之間雙贏的局面呢?這就是所謂的RIA。

富客戶端套用也稱胖客戶端套用,是相對於B/S時代的瘦客戶端套用而言的。在RIA時代,一個運行於Web瀏覽器中的客戶端套用,要上升為富客戶端套用,應該具備三個條件:

不輸給桌面套用的、具有豐富效果的複雜用戶界面。

有能力調度服務端的業務邏輯,自行組裝所需要的用戶界面,而不是一味地由服務端渲染生成用戶界面。

在一定程度上突破Web瀏覽器的限制。例如,在必要時能接收伺服器推送來的數據,這意味著打破“瀏覽器請求、伺服器回響”的單調格局。又例如,在必要時能在客戶端存儲部分數據——這是無與倫比的一次跨越,一旦擁有存儲能力,富客戶端套用便能在離線狀態下繼續為用戶提供服務。

JavaScript能為RIA做什麼

接下來,我們從技術方面分析RIA所能選擇的實現手段。筆者歸納,致力於富客戶端這一技術領域的IT廠商大致可以劃分為以下4個陣營。

微軟陣營:鑒於微軟是個人計算機作業系統的最大供應商,出於強化個人計算機地位的初衷,一直致力於富客戶端套用開發技術的研發,這一點從其新近於.NET Framework 3.0中集成的WPF,伴隨著Windows Vista推出的Windows邊欄Gadgets,以及Silverlight等概念中便可見一斑。再加上原有的.NET WinForm、Win32 Application、ActiveX等,微軟真不愧是樂此不疲的客戶端套用開發技術的“高產戶”。其中的ActiveX和Silverlight屬於Web瀏覽器外掛程式技術,非常有可能在RIA市場上搶到一些份額。

Adobe陣營:Adobe緊鑼密鼓地推出Apollo計畫,在其集成開發環境Flex Builder中,使用ActionScript既能開發運行於Flash Player中的Flash,又能開發運行於桌面的AIR套用。由於Flash已經無處不在,Adobe是非常令人看好的一股力量。

Sun陣營:提到Sun的大名,自然令人想到Java。沒有人奢望JavaFX及SWT/Swing/AWT能撼動微軟和Adobe,但是在桌面套用方面形成三足鼎立的局面還是值得期待的。在瀏覽器套用方面,Applet和Java Web Start已經積累下一些成功案例。

Google、Mozilla陣營:Google是雲計算和SaaS(Software as a Service)的領導廠商;Mozilla則擁有技術領先的Web瀏覽器。這是唯一沒有推出自己的桌面套用開發技術,而把全部的賭注押在Web上的陣營。JavaScript+HTML+CSS的組合,遠沒有Silverlight和WPF看起來那么光彩照人,也不像Apollo計畫那么活力四射。但是,正是這一組合,讓微軟不由得發出“Silverlight最大的對手是JavaScript”的感慨。也正是憑藉著這一組合,Google開發出了GMap、GMail、GTalk等令人大開眼界的套用。出於自信,Google認為,未來RIA的平台標準已經確立了,那就是Web。

在琳琅滿目的實現方式中,JavaScript在其中巧妙地穿針引線,扮演著“黏合劑”的作用。JavaScript與各種瀏覽器外掛程式技術(Silverlight、ActiveX、Flash、Applet)均擁有互操作能力,無論這種外掛程式技術是主流的、還是生僻的,是傳統的、還是現代的。

JavaScript是唯一不需安裝任何外掛程式,便被各大主流Web瀏覽器支持的動態腳本,可謂擁有天然的跨平台性。未來之RIA,必是以JavaScript為核心!

本書的內容

征服RIA:基於JavaScript的Web客戶端開發全書共分為5篇。JavaScript基礎篇:介紹JavaScript的語法和基礎套用。如果不打算深究JavaScript幕後機制的話,運用本篇的知識便能勝任一般的JavaScript開發了。JavaScript高級篇:揭示JavaScript的運行機理和高級套用,如面向對象編程、函式式編程和元編程。Ajax篇:Ajax是上帝賜予JavaScript的禮物。憑藉著Ajax,JavaScript擁有了異步調度服務端業務邏輯的能力。本篇除介紹Ajax原理和通用框架之外,還分別為從事Java和。NET開發的程式設計師安排了適合他們的DWR、Atlas框架。Ext篇,增值篇等內容。

本書旨在向讀者推介以JavaScript為核心的RIA開發。讀者將能從本書中發現,JavaScript如何整合各種技術流派,開發出名副其實的RIA:具有複雜用戶界面,以Ajax方式異步調度服務端業務邏輯、自行組裝所需的用戶界面,同時突破Web瀏覽器的限制,具備長連線和離線能力。

全書共分30章、1個附錄。

如何使用本書

本書共分為5篇:

JavaScript基礎篇:介紹JavaScript的語法和基礎套用。如果不打算深究JavaScript幕後機制的話,運用本篇的知識便能勝任一般的JavaScript開發了。

JavaScript高級篇:揭示JavaScript的運行機理和高級套用,如面向對象編程、函式式編程和元編程。

Ajax篇:Ajax是上帝賜予JavaScript的禮物。憑藉著Ajax,JavaScript擁有了異步調度服務端業務邏輯的能力。本篇除介紹Ajax原理和通用框架之外,還分別為從事Java和.NET開發的程式設計師安排了適合他們的DWR、Atlas框架。

Ext篇:能否提供複雜用戶界面,是RIA的一個重要判定標準。在本書中,筆者把這一重任交給了Ext。希望讀者能夠基於Ext開發出不輸給桌面程式的Web套用。

增值篇:增值篇是本書的華彩樂章。在這一篇中,讀者們將看到JavaScript如何遊刃有餘地整合各種技術流派,包括Flash、Applet、Silverlight、ActiveX等,如何開發反向Ajax程式、Comet程式和具備離線能力的程式。

請讀者關註上述的本書內容組織方式,基於這一方式,造成同類知識有時會分散在不同章節中的現象。而造成這一現象的深層次原因,則在於RIA技術選型實在太廣泛了。希望讀者能夠融會貫通。

例如Function對象。在JavaScript基礎篇中僅僅把Function作為JavaScript語法中的一個知識點,而在JavaScript高級篇中則應該將其理解為JavaScript高級編程的精髓所在。

又例如反向Ajax和Comet模式這一對具有內在聯繫的概念。在“適用於Java的Ajax框架——DWR”一章中首次引出反向Ajax這一概念;在“Comet(Server Push)模式”一章中再度實踐了一次反向Ajax;而在“用JavaScript操作ActiveX外掛程式”和“JavaScript與ActionScript的互操作”兩章中,利用ActiveX和Flash技術再次分別實現了Comet模式。

在RIA和JavaScript開發領域,不存在深奧的理論,有的只是動手實踐的快樂。筆者和同事楊先亭是懷著輕鬆愉悅的心情完成本書的,也祝大家閱讀愉快!

最後,在兩句略具調侃韻味的口號聲中結束本文。

全世界計算機,聯合起來!

以JavaScript為核心,奪取RIA開發的更大勝利!

塗傳濱

2008年12月27日於廈門

目 錄 JavaScript基礎篇

第1章 JavaScript基礎

1.1 JavaScript概述 2

1.1.1 JavaScript的特點 2

1.1.2 JavaScript的局限性 3

1.2 從網頁中引用JavaScript 5

1.2.1 定義腳本語言的類型 5

1.2.2 調用外部腳本檔案 6

1.3 創建JavaScript檔案 7

1.4 JavaScript注釋 9

第2章 JavaScript語法

2.1 JavaScript變數 11

2.1.1 在腳本中定義變數 11

2.1.2 變數類型 13

2.1.3 數據類型之間的轉換 13

2.1.4 存取變數 14

2.2 JavaScript函式 15

2.2.1 定義函式 15

2.2.2 輸入參數 16

2.2.3 函式輸出值 18

2.3 JavaScript運算符 18

2.3.1 概述 19

2.3.2 算術運算符 19

2.3.3 賦值運算符 21

2.3.4 比較運算符 22

2.3.5 邏輯運算符 23

2.3.6 位運算符 23

2.3.7 運算順序 24

2.4 條件與循環語句 25

2.4.1 條件語句的定義 25

2.4.2 條件語句 26

2.4.3 循環語句的定義 28

2.4.4 循環語句 29

第3章 事件與對象

3.1 事件句柄 32

3.1.1 事件句柄的定義 32

3.1.2 常用事件句柄 33

3.1.3 其他事件 36

3.1.4 動態添加事件回響 42

3.2 JavaScript對象 43

3.2.1 什麼是對象 43

3.2.2 創建對象 44

3.2.3 JavaScript內置的瀏覽器對象 45

3.2.4 對象方法劫持 46

第4章 常用對象

4.1 JavaScript數組 49

4.1.1 數組的含義 49

4.1.2 定義和運算元組 50

4.1.3 Array對象的屬性 51

4.1.4 Array對象的方法 52

4.1.5 關聯數組 60

4.1.6 數組套用舉例——記憶腳本動作 60

4.2 數學和日期對象 63

4.2.1 數學對象 63

4.2.2 數學對象的屬性 63

4.2.3 數學對象的方法 65

4.2.4 日期對象 68

4.3 字元串 75

4.3.1 字元串對象簡介 75

4.3.2 字元串對象的屬性 75

4.3.3 字元串對象的方法 77

4.3.4 正則表達式 86

第5章 JavaScript與瀏覽器

5.1 document對象 91

5.1.1 document對象簡介 91

5.1.2 document對象的屬性 92

5.1.3 document對象的方法 102

5.1.4 訪問本地檔案系統 103

5.2 window對象 105

5.2.1 window對象簡介 105

5.2.2 window對象的屬性 106

5.2.3 window對象的方法 112

5.3 JavaScript與表單 121

5.3.1 表單存取 121

5.3.2 表單元素的屬性 122

5.3.3 表單元素的方法 125

5.3.4 表單的提交 126

5.4 JavaScript與框架 128

5.4.1 框架簡介 128

5.4.2 框架的選項 131

5.4.3 定位框架 132

5.4.4 操作框架 133

目錄 JavaScript高級篇

第6章 JavaScript面向對象編程

6.1 對象的多態性 136

6.1.1 自定義對象的多態性 137

6.1.2 內置對象的多態性 137

6.2 對象的創建 138

6.2.1 使用內置對象 139

6.2.2 使用JSON符號 139

6.2.3 自定義對象構造 139

6.3 對象的繼承 140

6.3.1 原型鏈繼承 141

6.3.2 使用apply、call方法 141

6.3.3 對象實例間的繼承 143

6.4 對象成員的可見性 143

第7章 JavaScript數據類型

7.1 數據類型 146

7.1.1 Number 147

7.1.2 String 147

7.1.3 Boolean 148

7.1.4 Undefined 148

7.1.5 null 148

7.1.6 複合類型 149

7.2 數據類型轉換 149

7.2.1 轉換為Number 149

7.2.2 轉換為String 150

7.2.3 轉換為Boolean 150

7.3 數據的傳遞 151

7.3.1 值傳遞 151

7.3.2 引用傳遞 152

第8章 JavaScript函式對象

8.1 JavaScript Function對象 153

8.1.1 Function對象的屬性和方法 153

8.1.2 定義Function 156

8.2 閉包 157

8.2.1 閉包的套用 157

8.2.2 避免閉包引發的問題 158

8.3 函式式編程 160

8.3.1 函式式編程的思想 160

8.3.2 函式式編程的原理 160

8.3.3 函式式編程的套用 161

8.4 元編程 163

8.4.1 元編程的思想 163

8.4.2 元編程的套用 163

第9章 JavaScript運行機制

9.1 作用域鏈(Scope Chian) 165

9.1.1 從var說起 165

9.1.2 Scope Chain是什麼 167

9.2 原型鏈(Prototype Chain) 168

9.3 兩個隱式對象 169

9.3.1 this 169

9.3.2 Global 170

第10章 JavaScript正則表達式

10.1 正則表達式基礎 172

10.1.1 元字元 172

10.1.2 元字元操作優先權順序 174

10.1.3 貪婪匹配與非貪婪匹配 175

10.1.4 分組 175

10.1.5 反向引用 176

10.2 RegExp和正則表達式對象 176

10.2.1 RegExp對象 176

10.2.2 正則表達式對象 178

10.3 NFA和DFA正則表達式引擎 179

目錄 Ajax篇

第11章 Ajax概述

11.1 Ajax的由來 182

11.2 傳統的Web運用 183

11.3 Ajax的工作原理 184

11.4 Ajax的優點與缺陷 184

第12章 Ajax用到的技術

12.1 HTML與XHTML 185

12.1.1 HTML、XHTML與Ajax 185

12.1.2 HTML基礎 186

12.1.3 XHTML基礎 189

12.2 XML 191

12.3 JSON 192

12.3.1 JSON與Ajax 192

12.3.2 JSON基礎 193

12.4 CSS 194

12.4.1 CSS與Ajax 194

12.4.2 使用CSS的方法 194

12.4.3 CSS語法 195

12.5 JavaScript 197

12.6 DOM與DHTML 197

12.6.1 DOM、DHTML與Ajax 197

12.6.2 操作HTML、XHTML文檔 198

12.6.3 操作XML文檔 201

12.7 HTTP 203

12.8 XmlHttpRequest對象 205

12.8.1 XmlHttpRequest對象與Ajax 205

12.8.2 XmlHttpRequest對象簡介 205

第13章 Ajax開發簡略

13.1 如何使用Ajax 207

13.1.1 初始化對象 207

13.1.2 指定回響函式 208

13.1.3 發出HTTP請求 209

13.1.4 處理伺服器返回的信息 210

13.2 字元亂碼處理 211

13.2.1 字元集 212

13.2.2 字元編碼 214

13.2.3 實例 215

13.3 prototype.js 217

13.3.1 通用性方法 217

13.3.2 Ajax對象 219

13.4 MooTools 221

第14章 適用於Java的Ajax 框架

14.1 DWR簡介 225

14.2 DWR的回調機制 226

14.3 DWR的異常機制 227

14.4 DWR核心 228

14.5 DWR的配置 229

14.5.1 Web.xml的配置 229

14.5.2 dwr.xml的配置 230

14.5.3 DWR的WebContext 234

14.6 DWR套用實例 235

14.7 利用DWR實現反向Ajax 243

第15章 適用於.NET的Ajax 框架

15.1 在Visual Studio 2005中手工開發Ajax套用 248

15.2 在Visual Studio 2005中設定Atlas框架環境 252

15.3 Atlas例程 252

目錄 Ext篇

第16章 Ext概述

16.1 組件模型 258

16.1.1 組件的創建 259

16.1.2 組件的渲染 260

16.1.3 組件的銷毀 260

16.2 容器模型 261

16.3 布局模型 261

16.4 Ext核心 262

16.4.1 Ext 262

16.4.2 Observable 266

16.4.3 MixedCollection 269

16.4.4 總結 271

第17章 Ext數據操作

17.1 數據傳輸 272

17.2 數據處理 277

17.2.1 數據訪問代理Ext.data.DataProxy 277

17.2.2 數據解析器Ext.data.DataReader 278

17.3 數據模型 279

第18章 Ext組件

18.1 所有組件的始祖Ext.Component 282

18.1.1 Xtype 283

18.1.2 Ext的UI組件庫 283

18.1.3 Ext.Component的主要屬性 284

18.1.4 Ext.Component的主要方法 285

18.2 容器組件的始祖Ext.BoxComponent 288

18.2.1 Ext.Container 288

18.2.2 Ext.Panel 289

18.3 表格相關組件 292

18.3.1 GridPanel 292

18.3.2 TabPanel 295

18.4 選單相關組件 302

18.4.1 TreePanel 302

18.4.2 ToolBar 304

18.4.3 Menu 305

18.5 表單相關組件 307

18.5.1 FormPanel 307

18.5.2 BasicForm 308

18.5.3 Field 310

18.5.4 FieldSet 311

18.6 視窗相關組件 311

18.6.1 Window 311

18.6.2 MessageBox 314

18.7 Ext組件小結 317

第19章 Ext布局

19.1 Ext.Element 320

19.2 Ext.EventManager 322

19.3 Ext.DomQuery 324

19.4 布局管理器 325

19.4.1 ContainerLayout 326

19.4.2 FitLayout 326

19.4.3 TableLayout 327

19.4.4 AnchorLayout 329

19.4.5 BorderLayout 330

19.4.6 ColumnLayout 332

19.4.7 Accordion 333

19.4.8 CardLayout 335

19.4.9 AbsoluteLayout 337

19.4.10 FormLayout 338

目錄 增值篇

第20章 基於JavaScript的 ASP開發 342

第21章 用JavaScript操作Silverlight 365

第22章 Windows平台上的HTML組件與腳本宿主 373

第23章 用JavaScript製作 COM組件 387

第24章 用JavaScript操作ActiveX外掛程式 392

第25章 Java與JavaScript 的互操作 409

第26章 JavaScript與ActionScript的互操作 429

第27章 Comet(Server Push)模式 448

第28章 基於Google Gears 開發離線套用 456

第29章 用XSLT轉換XML 數據島 470

第30章 JavaScript開發工具箱 481

附錄A Gadgets開發概覽 497

相關詞條

相關搜尋

熱門詞條

聯絡我們