Pro JavaScript Techniques第一章: 現代javscript編程

Pro Javascript Techniques翻譯連載：說明和目錄

　　JavaScript的演化是漸進而穩固的。曆經過去十年的進程，JavaScript在人們的認知裏已經從一門簡單的玩物式的語言逐漸發展成為一門倍受推崇的編程語言，被全世界的公司和開發者用來構造種種精彩的應用。現代JavaScript編程語言一如既往地可靠、健壯，強大得令人難以置信。在本書中我進行的許多論述，將揭示是什麼使得現代JavaScript應用程序與從前有著那麼明顯的不同。本章中出現的許多概念遠不能算新奇，然而成千上萬聰明的程序員的認同促使它們的用途得以升華並最終形成今天的格局。既如此，我們這就來著眼現代JavaScript程序設計。

[ 本帖最後由 mozart0 於 2007-6-21 13:29 編輯 ]

one by one

　　
　　麵向對象的JavaScript
　　
　　從語言的視角來看，麵向對象的程序設計和麵向對象的JavaScript語言絕對不是什麼摩登的東西；JavaScript最開始就是被設計成一種徹底的麵向對象語言。然而，隨著JavaScript在其使用和接受的過程中的“逐步發展”，其它語言(如Ruby,Python,和Perl等)的程序員留意到了它並開始將他們的編程模式引入了JavaScript。

　　麵向對象的JavaScript代碼的外觀和內部運作都有別於其它具有對象能力的語言。在第二章我將深入論述使它如此獨特的方方麵麵，而在這裏，先來看一點基礎的東西以體會編寫現代JavaScript代碼的初步感覺。程序1-1中的兩個對象構造器的例子，演示了可用於學校課程的簡單的對象搭配。

程序1-1. 課程和課程表的麵向對象JavaScript表述


　　從程序1-1的代碼中你或許已經看出，大部分的麵向對象基本原則貫穿存在於其中，但它們是以不同於其它更常見的麵向對象語言的方式組織起來的。你可以創建對象構造器和方法，並存取對象屬性。程序1-2展示了在應用程序中使用上麵兩個類的一個示例。

程序1-2. 給用戶提供課程的列表


　　伴隨對廣大程序員對JavaScript的接受，設計良好的麵向對象代碼的使用也正日益普及。貫穿本書的始末，我將試圖展示我認為能夠最好地例示代碼設計與實現的不同的麵向對象的JavaScript代碼片段。

[ 本帖最後由 mozart0 於 2007-4-6 17:14 編輯 ]

one by one

　　測試你的代碼

　　建立起良好的麵向對象的基本代碼之後，開發專業品質的JavaScript代碼的第二個方麵是確保擁有一個強勁的代碼測試環境。當開發頻繁使用的或將由其它開發者維護的代碼時，嚴格調試的必要性會顯得尤為突出。為其它開發者提供一個堅實的測試基礎，是維持代碼開發活動的關鍵。
　　在第四章，你將會看到一些可用來形成良好的測試/使用框架的不同工具，以及對複雜應用程序的簡單調試。用於Firefox的插件Firebug就是其中一例。Firebug提供了許多的有用的工具，如錯誤控製台，HTTP請求日誌，調試，以及元素查看。圖1-1展示了Firebug調試一段代碼時的實況截屏。
[attach]32056[/attach]
　　圖1-1. Firefox Firebug插件運行時的截屏
　　
　　開發幹淨的、可測試的代碼的重要性怎麼強調都不會過分。一旦你開始開發一些幹淨的麵向對象代碼並將它們與合適的測試套件結合，相信你會傾向於同意這一點。

[ 本帖最後由 mozart0 於 2007-4-4 22:17 編輯 ]

one by one

　　為分發而進行的封裝
　　
　　開發現代的專業JavaScript代碼的最後一個方麵是為了代碼分發或在現實世界裏中使用而進行的封裝處理。隨著開始開發者們在其頁麵中使用越來越多的JavaScript代碼，衝突的可能性將會增加。如果兩個JavaScript庫裏都有一個名為data的變量或者按各的意圖添加事件，災難性的衝突和莫名其妙的錯誤可能就會出現。
　　開發者簡單地置入<script>指針無須任何變動就能正常工作的能力是開發一個成功的JavaScript庫的精詣所在。開發者用以保持代碼清潔和普遍兼容的的技術或解決方案有許多種。
　　使用命名空間是廣泛使用的保證代碼不與其它JavaScript代碼互相影響和抵觸的一種技術。這方麵一個極端的（但未必是最好或最有用的）運作中的例子就是Yahoo開發的任何人都可使用的用戶界麵庫。使用該庫的一個示例見程序1-3.

　　程序1-3. 使用重度名稱空間化的YahooUI庫給一個元素添加事件


　　然而，這種命名空間方法存在一個問題，即庫與庫之間在構造和使用的方式上缺乏內在的一致性。正是在這一點上，中心代碼倉庫如JSAN(JavaScript Archive Network)變得非常有用。JSAN提供一套代碼庫需遵從的一致規則，以及一種快捷導入代碼所依賴的其它庫的方式。圖1-2展示了JSAN的主分發中心的一個截屏。
　　[attach]32057[/attach]
　　圖1-2. 公共代碼倉庫JSAN的截屏

　　我將在第三章闡述開發清潔的可封裝代碼的細節。此外，其它常見的事故多發點如事件處理衝突，將在第六章論述。

[ 本帖最後由 mozart0 於 2007-4-4 22:18 編輯 ]

one by one

　　Unobtrusive DOM腳本編程
　　
　　基於一個優良的可測試的核心創建你的代碼和兼容的分發，是Unobtrusive DOM腳本編程的基本概念。編寫unobtrusive代碼意味著與你的HTML內容的徹底分離：數據來自服務器，而JavaScript代碼用來使其動態化。達到這一徹底分離的最重要的副作用就是你的代碼在不同的瀏覽器之間可以完美的升/降級。利用這一點，你可以提供高級的內容給支持它的瀏覽器，而在不支持的瀏覽器上從容隱藏之。
　　編寫現代的、Unobtrusive代碼包括兩個方麵：文檔對象模型(DOM)和JavaScript事件。本書中我對這兩個方麵都將作深入的解釋。

　　文檔對象模型

　　DOM是表示XML文檔的流行的方法。它未必是最快的、最輕便的、或者最易使用的，卻是是最普及的，絕大多數web開發語言（如Java，Perl，PHP，Ruby，Python，及Javascript)都實現了對它的支持。DOM旨在為開發者提供一種直觀的方式來導航於XML的層次結構中。
　　因為有效的HTML隻是XML的一個子集，保有一個方式來有效地解析和瀏覽DOM文檔對於簡化JavaScript開發來說是必不可少的。從根本上講，出現在JavaScript中的大多數的交互是發生在JavaScript與頁麵所包含的不同HTML元素之間的；DOM是使這此過程簡單化的卓越工具。程序1-4展示了使用DOM在頁內導航和查找不同的元素然後操作它們的一些例子。

　　程序1-4. 使用文檔對象模型定位並操縱不同的DOM元素


　　DOM是開發Unobtrusive　JavaScript代碼的第一步。借助簡單快速導航HTML文檔的能力，所有隨之而來的JavaScript/HTML交互將變得如此簡單。
　　
　　事件

　　事件將一個應用程序之內所有的用戶交互結合在一起。在一個設計良好的JavaScript應用程序裏，你將擁有數據源和它的視覺的表示(在HTML DOM內部)。為了同步這兩個方麵，你必須監視用戶的交互動作並試圖相應地更新用戶界麵。使用DOM和JavaScript事件的結合是使得現代web應用程序賴以工作的基本組合。
　　所有的現代瀏覽器都提供一係列的隻要特定交互動作發生即被觸發的事件，如用戶移動鼠標，敲擊鍵盤，或離開頁麵等等。使用這些事件，你可以注冊代碼到特定事件，一旦該事件發生，你的代碼就會被執行。程序1-5展示了這種交互的一個實例，該網頁中的<li>元素在用戶鼠標經過的時候會改變背景色。
　　
　　程序1-5. 使用DOM和事件來提供一些視覺效果


　　JavaScript事件是複雜多樣的。本書中的大多數代碼或應用程序都以某種方式利用了事件。第六章和附屬Ｂ完全專注於事件及其交互。

　　JavaScript與CSS

　　動態HTML建立在DOM和事件交互的基礎上。在核心層麵上，動態HTML表示發生在JavaScript和附著在DOM元素上的CSS信息的交互。
　　層疊式樣式表(CSS)作為布局的標準服務於簡單的不唐突的網頁，在最小化了用戶端兼容性問題的同時，提供給開發者以強大的可控製性。從根本上講，動態HTML就是探索JavaScript和CSS彼此交互作用時能夠達到什麼以及怎樣最好地利用該聯合達成令人印象深刻的效果。
　　更高級的交互示例如拖放元素和動畫效果見第七章。在那裏我將圍繞它們展開深入論述。

one by one

　　Ajax

　　Ajax，或曰異步Javascript與XML，是由Adaptive Path公司的創辦人之一兼董事長Jesse James Garrett在其論文"Ajax:Web應用程序的新途徑"(https://www.adaptivepath.com/publ ... archives/000385.php)中創造的一個術語。它描述了請求和提交額外的信息時發生於客戶和服務器之間的高級交互。
　　術語Ajax包括了許多種數據據通訊的可能組合，但它們都圍繞一個中心前提：附加的數據請求是在頁麵完全載入之後由客戶端向服務器發起的。這允許應用程序開發者超越緩慢的、傳統的應用程序流程，創建與用戶相關的額外交互。圖1-3是來自Garrett的Ajax論文的一個圖示，說明了應用程序中由於額外的請求發生在後台(而且用戶很可能並不知情)，交互的流程發生了怎樣的改變。
[attach]32125[/attach]　
　　圖1-3：來自文章"Ajax:Web應用程序的新途徑"的圖示，展示發生於客戶和服務器之間的先進的異步的交互

　　Garrett論文的最初發表，激起了用戶、開發者、設計者以及管理者們的興趣，使用高級交互的新型應用程序爆炸式地增長。諷刺的是，在這一興趣複蘇的同時，Ajax背後的技術卻是相當陳舊的(在2000年左右就有已有了商業上的應用)。然而最主要的不同在於，老的應用程序利用了瀏覽器特有的方式與服務器通訊（如僅ie具有的功能)。由於所有的現代瀏覽器都支持XMLHttpRequest(發送或從服務器接收數據的主要手段)，(見#12 cfs178的回複)，每個人都可以享受其益處。
　　如果說有一個公司走在了利用Ajax技術創建優秀應用程序的最前列，那無疑是Google。恰在最初的Ajax論文出現之前，它發布了一個高交互性的domo:Google Suggest。該demo可以實時地自動完成你所鍵入的查詢，這是舊式的頁麵重載不可能達到的功能。圖1-4是Google Suggest運行時的一個截屏。
[attach]32126[/attach]
　　圖1-4. Google Suggest，早於Garrett的Ajax論文的利用了異步XML技術的應用程序

　　除此而外，Google的另一個革命性的應用程序為Google Map，用戶在其地圖上移動將會實時地看到相關的局部結果。這一程序通過使用Ajax技術而提供的速度和可用性的水平是其它任何可用的地圖程序所無法比擬的，結果徹底地變革了在線地圖市場。圖1-5是Google Map的截屏.
[attach]32127[/attach]
　　圖1-5. Google Maps，利用了一些Ajax技術來動態載入特定區域信息

[ 本帖最後由 mozart0 於 2007-4-8 12:22 編輯 ]

one by one

　　
　　瀏覽器支持

　　JavaScript開發所麵臨的不幸事實是，因為與實現和支持它的瀏覽器關聯過於緊密，它受到當前最流行瀏覽器的支配。由於用戶未必會使用對JavaScript支持得最好的瀏覽器，我們被迫對哪些是最重要的功能作出抉擇。
　　許多開發者已經開始做的是去掉對那些導致過多開發障礙的瀏覽器的支持。因為它們用戶群的規模和還是因為它們擁有你喜歡的功能而考慮對瀏覽器的支持，需要仔細的權衡。
　　最近Yahoo發布了一個可用來擴展你的web應用程序的JavaScript庫。連同那個庫，它還發布了一些供web開發者遵從的指導方針。以我之見，從中產生的最重要的文檔是Yahoo支持與不支持的各種瀏覽器的官方的列表。盡管任何人或任何公司都可以做類似的事情，一份由互聯上訪問最頻繁的網站所提供的文檔，其價值絕對無法估量。
　　Yahoo開發了一個分級的瀏覽器支持策略，對瀏覽器指定特定的級別並依據其功能為它提供不同的內容。Yahoo給瀏覽器三個級別：A,X和C:
　　A級瀏覽器是得到完全支持和測試的，Yahoo的所有程序都能有保障在其中運行。
　　X級瀏覽器是Yahoo認可但是沒能徹底測試的準A級瀏覽器，或者是嶄新的從未遇到過的瀏覽器。X級瀏覽器被期望能處理高級的內容，與Ａ級瀏覽器等同對待。
　　C級瀏覽器是已知的“劣質的”瀏覽器，不支持運行Yahoo應用程序所必須的功能。由於Yahoo應用程序完全Unobtrusive(即使沒有JavaScript它們也能繼續工作)，這些瀏覽器隻需處理不含JavaScript的功能性的內容。
　　順便一提，Yahoo的瀏覽器級別選擇竟與我的不謀而合，這使得它尤其富有吸引力。在這本書裏，我大量地使用了術語“現代瀏覽器”，當我用這一措詞的時候，我指的Yahoo瀏覽器分級表評定為A級的任瀏覽器。給定一組賴以工作的一致的功能，減少因避免瀏覽器的不兼容而帶來的痛苦，學習和開發的經曆將會變得更加有趣。
　　我極力推薦你們去通讀瀏覽器分級的支持文檔(見https://developer.yahoo.com/yui/articles/gbs/gbs.html，該文檔包含了圖1-6所示的瀏覽器支持表)，感受一下Yahoo力圖實現的是什麼。通過將些信息公之於web開發的大眾，Yahoo正在給出一條無價的“黃金標準”讓其它所有人去靠攏，這是很了不起的。
[attach]32139[/attach]
　　圖1-6. Yahoo提供的瀏覽器分組支持表

　　更多的關於瀏覽器支持情況的信息請參看本書的附錄C，那裏對每種瀏覽器的缺點和長處都有深入的論討。或多或少地，你會發現所有的A級瀏覽器都走在發展的最前列，提供了遠遠超出你的開發所需要的功能。
　　當選擇你希望支持哪些瀏覽器時，最終結果實際上可以歸結為你的應用程序支持的一組功能。如果你想要支持NS4或IE5（舉個例子來說），則勢必嚴格地限製你可以在程序中使用的功能的數量，因為它們缺乏對現代編程技術的支持。
　　盡管如此，了解哪些瀏覽器是現代的允許你利用其中可用的強大的功能並給你一個可供將來的開發所依據的穩固的基礎。這一穩固的開發基礎可由以下幾種功能所定義：
　　核心Javascript 1.5: 最近、最廣泛接受的JavaScript版本。它全麵支持麵向對象的JavaScript。IE5.0不支持全部的1.5，這是開發者們不願意支持它的主要原因。
　　XML文檔對象模型（DOM）2:用來訪問HTML和XML文檔的的標準方案。這絕對是編寫高效率的程序不可或缺的。
　　XMLHttpRequest: Ajax技術的支柱——用來發起HTTP請求的一個簡單層。所有的瀏覽器默認都支持這一對象，除了IE5.0-6.0；而它們也都支持用ActiveX初始化功能相當的對象。
　　CSS: 網頁設計的基本需求。這似乎像是一個額外的需求，但是擁有CSS對web應用程序開發者來說是必不可少的。由於每一種現代瀏覽器都支持CSS，大多數問題的發生通常歸結為呈現方麵的差異。這正是IE for Mac較少被頻繁支持的主要原因。
　　以上這些瀏覽器功能的結合構成了開發JavaScript web應用程序的支柱。所有的現代瀏覽器都以某種方式支持以上列舉的功能。本書論述的所有內容都基於這一假設：你所使用的瀏覽器最起碼能支持它們。