【正文】 Web頁面呈現(xiàn)效果和布局。 ?DOM（ Document Object Model）文檔對象模型，是對 HTML和 XML文檔操作的程序接口，提供兩種文檔的結(jié)構(gòu)描述，用于實現(xiàn)動態(tài)修改瀏覽器頁面。 ?XSLT（ Extensible Stylesheet Language Transformations）擴展樣式單轉(zhuǎn)換語言。用于將 XML 文檔轉(zhuǎn)換為另外形式的、可被瀏覽器識別的文檔，比如 HTML、 XHTML等。 ?XMLHttpRequest對象類，提供瀏覽器腳本發(fā)送 Http請求并獲取回執(zhí)的異步數(shù)據(jù)讀取操作。 ?JavaScript腳本語言， AJAX引擎是用 JavaScript編寫，可嵌入在瀏覽器中，用于動態(tài)連接，并實現(xiàn)相關(guān)的處理邏輯。 75 ?AJAX技術(shù)原理 ?傳統(tǒng)的 Web應(yīng)用處理方式： ?瀏覽器與服務(wù)器交互時，需要瀏覽器端觸發(fā)一個 HTTP請求到服務(wù)器，服務(wù)器對其進行處理后，再返回一個新的HTHL網(wǎng)頁到瀏覽器。這樣，每當(dāng)服務(wù)器處理提交的請求時 ,瀏覽器端基本是空閑的，并且，哪怕從服務(wù)器端得到的只是很簡單的一個數(shù)據(jù)，也都需要一個完整的 HTML頁的重寫。 ?AJAX的 Web應(yīng)用處理方式： ?在客戶端瀏覽器上添加 AJAX引擎，當(dāng)瀏覽器向服務(wù)器提交數(shù)據(jù)時，由 AJAX引擎收集數(shù)據(jù)，并通過XMLHttpRequest向服務(wù)器發(fā)送數(shù)據(jù)及處理請求，服務(wù)器處理完成后返回 XML，由 AJAX引擎再將 XML轉(zhuǎn)換為XHTML和 CSS標(biāo)準(zhǔn)格式顯示到瀏覽器，并負(fù)責(zé)更新瀏覽器界面。 AJAX引擎的結(jié)構(gòu)如圖 。 76 ? AJAX引擎的結(jié)構(gòu) ?AJAX引擎的主要任務(wù)： 收集數(shù)據(jù)并完成必要數(shù)據(jù)驗證 控制不需要提交的請求 異步數(shù)據(jù)交換的同步控制 輸出格式的轉(zhuǎn)換 頁面更新處理，以及控制刷新頁面 設(shè)計模式 設(shè)計模式： 是面向?qū)ο蟮能浖_發(fā)經(jīng)驗的總結(jié)， 其中包含了軟件設(shè)計中很多問題的解決方案和設(shè)計思路，是可直接利用的程序結(jié)構(gòu)。 按照以下要點討論設(shè)計模： ? 模式名稱：表達(dá)設(shè)計思想的簡單名字 ? 設(shè)計意圖：針對的問題和解決問題的思路 ? 實現(xiàn)效果：達(dá)到的實際效果及作用 ? 技術(shù)途徑：采用的技術(shù)方法和策略 77 設(shè)計模式分類： 設(shè)計模式 簡要說明 抽象工廠 (Abstract Factory) 提供創(chuàng)建相關(guān)的一組對象的接口，不需要指定它們的具體實現(xiàn) 構(gòu)造器 (Builder) 將對象的結(jié)構(gòu)與它的表示分離，可用同樣的結(jié)構(gòu)得到不同的表示 工廠方法 (Factory Method) 定義創(chuàng)建對象的接口，但由子類來決定實例化 原型 (Prototype) 用原形實例指定創(chuàng)建對象的種類，并通過拷貝原形來創(chuàng)建新的對象 單例 (Singleton) 保證一個類僅有一個實例，提供訪問它的全局訪問點 ① 構(gòu)造式：涉及對象創(chuàng)建過程的模式 78 設(shè)計模式 簡要說明 適配器 (Adapter) 為接口加載轉(zhuǎn)換接頭，以解決接口不兼容 橋接 (Bridge) 為未來的靈活變化，將分離的兩部分進行橋接 合成 (Composite) 將對象組成樹形“整體 部分”結(jié)構(gòu)，使單獨或復(fù)合對象的引用形式統(tǒng)一 裝飾器 (Decorator) 動態(tài)地為對象添加新的操作功能 外觀 (Facade) 統(tǒng)一子系統(tǒng)中不同的接口 享元 (Flyweight) 利用共享達(dá)到細(xì)粒度對象的集合引用 代理 (Proxy) 以相同的方式訪某對象的替代者 ② 結(jié)構(gòu)式：涉及對象類組合的模式 79 設(shè)計模式 簡要說明 責(zé)任鏈 (Chain of Responsibility) 將相關(guān)責(zé)任的對象形成鏈，使對它們的請求成為統(tǒng)一的鏈詢方式 命令 (Command Processor) 將請求封裝為獨立對象，可通過不同參數(shù)的實例對象得到不同的請求 解釋器(Interpreter) 應(yīng)對給定語言和文法的特定問題，建立語言解釋器基本方式 迭代器(Iterator) 封裝訪問聚合對象的操作成為獨立對象，可應(yīng)對不同的聚合對象訪問 中介 (Mediator) 使用中間對象，維持對象相互引用的關(guān)系，達(dá)到對象間的松散耦合 ③ 行為式：涉及對象之間交互操作的模式 80 備忘錄(Memento) 在不破壞封裝的前提下，獲得對象內(nèi)部狀態(tài)的訪問和控制權(quán)。 觀察者 (Observer) 建立對象與依賴它的對象之間的變化 通知機制。 狀態(tài) (state) 使對象在其內(nèi)部狀態(tài)發(fā)生變化時發(fā)生類似類行為的改變。 策略(Strategy/Policy) 定義可以替換的算法，使得算法的變化可以獨立于用戶。 模板方式(Template Method) 定義某個算法的計算過程框架，具體計算步驟到子類中加以實現(xiàn)，在不改變算法構(gòu)架的同時改變某些計算步驟的實現(xiàn)。 訪問者(Visitor) 表示作用于對象結(jié)構(gòu)中各元素的操作，從而在不改變元素類的情況下定義對它們的新的操作。 81 構(gòu)造型設(shè)計模式，提供在系統(tǒng)中 創(chuàng)建 獨立對象、 創(chuàng)建 組合對象， 創(chuàng)建 系列對象的基本方法。 構(gòu)造型模式中，始終圍繞的問題： 將結(jié)構(gòu)不同、功能不同的“產(chǎn)品”對象，用靈活的配置方式來創(chuàng)建，以適應(yīng)未來的變化。 討論的是 怎樣創(chuàng)建對象的 問題，在何時創(chuàng)建？由誰來創(chuàng)建？ 82 （ 1）抽象工廠 （ Abstract Factory） 模式 AbstractFactory createProductA() createProductB() ConcreteFactory2 createProductA() createProductB() ConcreteFactory1 createProductA() createProductB() AbstractProductA AbstractProductB ProductA1 ProductA2 ProductB1 ProductB2 Client 結(jié)構(gòu) 83 意圖 將系列產(chǎn)品的制造責(zé)任和過程封裝起來 ,因為系列產(chǎn)品有著相同的構(gòu)造部分和過程 ,但其中的實現(xiàn)又各不相同。 效果 客戶可根據(jù)應(yīng)用的不同，設(shè)計不同的制造過程，達(dá)到可以控制不同對象創(chuàng)建的目的。 途徑 利用多態(tài)性的動態(tài)綁定機制： 用抽象類描述系列產(chǎn)品的制造和過程； 用繼承來描述具體產(chǎn)品的實現(xiàn)； 在應(yīng)用中利用抽象類的各種操作設(shè)計系列產(chǎn)品的接口函數(shù)； 在用應(yīng)用中通過接口函數(shù)實現(xiàn)不同產(chǎn)品的統(tǒng)一建造過程。 84 抽象工廠 （ Abstract Factory） 示例 1 BFactory makeRoom() makeDoor() makeTop() OBFactory makeRoom() makeDoor() makeTop() Room CTop CDoor CRoom Client CBFactory makeRoom() makeDoor() makeTop() ORoom ODoor OTop Door Top 85 class BFactory //建筑材料抽象工廠類 { public: virtual room* makeroom( ){return new room。} virtual door* makedoor( ){return new door。} virtual top* maketop( ){return new top。} }。 class OBFacory: public BFactory //歐式建材工廠類 { room* makeroom( ){return new oroom。} door* makedoor( ){return new odoor。} top* maketop( ){return new otop。} }。 class CBFacory: public BFactory //中式建材工廠類 { room* makeroom( ){return new croom。} door* makedoor( ){return new cdoor。} top* maketop( ){return new ctop。} }。 86 void Build ( BFactory i) //建筑接口函數(shù) { room* room=i. makeroom( )。 door* door=( )。 top* top=( ) …… } 通過建筑接口 ， 實現(xiàn)建筑不同風(fēng)格的建筑物： main() { OBFacory OBBuild。 //歐式建材工廠實例 Build(OBBuild)。 //建造歐式建筑 CBFacory CBBuild。 //中式建材工廠實例 Build(CBBuild)。 //建造中式建筑 …… } 87 結(jié)構(gòu)型設(shè)計模式，涉及如何組織對象類，成為適用的更大結(jié)構(gòu)問題。 結(jié)構(gòu)型設(shè)計模式，主要針對希望靈活地實現(xiàn)新的功能的方法。 結(jié)構(gòu)型設(shè)計模式有很強的相似性，應(yīng)該注意區(qū)分它們的設(shè)計意圖，了解各自的優(yōu)勢和必須付出的代價。 構(gòu)式 設(shè)計模式 88 （ 1）適配器 （ Adapter） 模式 結(jié)構(gòu) Target Request() Adapter Request() Client AdapteeSpecificRequest() Adaptee SpecificRequest() adaptee 89 （ 2）橋（ Bridge）模式 結(jié)構(gòu) Abstraction Operation() ConcreteimplementorA OperationImp() Client impOperationImp() Implementor OperationImp() imp RefinedAbstraction ConcreteimplementorB OperationImp() Operation() 90