? ? ? ? ? ? ?界面設(shè)計(jì)中的“設(shè)計(jì)”與“實(shí)現(xiàn)”，本節(jié)的UI架構(gòu)屬于“實(shí)現(xiàn)”部分。
1.GUI設(shè)計(jì)模式（Design patterns for GUIs）
（1）視圖樹（View tree）
①定義：GUI結(jié)構(gòu)是一個(gè)視圖樹。視圖是一個(gè)對(duì)象，顯示在屏幕的某個(gè)區(qū)域，可以是一個(gè)控件或者其他元素。
②視圖樹的使用：
????????輸出：GUI通過改變視圖樹來改變輸出；重繪算法自動(dòng)重繪受影響的視圖
????????輸入：GUI將監(jiān)聽器綁定到視圖，來接收鍵盤和鼠標(biāo)的輸入
????????布局：自動(dòng)布局算法通過遍歷樹來計(jì)算視圖的位置和大小
③輸入處理：
????????輸入處理程序與視圖相關(guān)聯(lián)，被稱為監(jiān)聽器（listeners）、事件處理程序、訂閱器、觀察器等
（2）監(jiān)聽模式（Listener Pattern）
①（上面提到的）GUI輸入處理是監(jiān)聽模式的一種
②事件源產(chǎn)生一系列離散事件（例如鼠標(biāo)事件）
③監(jiān)聽器注冊(cè)對(duì)事件源感興趣的事件，也可以取消訂閱
④當(dāng)一個(gè)事件發(fā)生時(shí)，事件源將事件分發(fā)給所有綁定的監(jiān)聽器
（3）模型視圖（Model-view）
①目的：分離前后端
輸出：由視圖樹表示
輸入：由綁定在視圖上的監(jiān)聽器處理
后臺(tái)（又稱模型）：保存用戶界面正在展示和編輯的數(shù)據(jù)
②模型-視圖-控制器模式（Model-View-Controller Pattern，簡(jiǎn)稱MVC）
模型（Model）維護(hù)應(yīng)用程序狀態(tài)
視圖（View）顯示數(shù)據(jù)
控制器（Controller）處理輸入
文章來源：http://www.zghlxwxcb.cn/news/detail-453212.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-453212.html
③模型視圖的優(yōu)點(diǎn)
????????[1]責(zé)任分離：一個(gè)模塊只負(fù)責(zé)一個(gè)功能? ? 模型Model-數(shù)據(jù)? 視圖View-輸入輸出
? ? ? ? [2]解耦(Decoupling)：視圖和模型彼此分離，可以獨(dú)立修改；模型可以被多個(gè)視圖復(fù)用；多個(gè)視圖可同時(shí)使用同一個(gè)模型；視圖也可以被其他模型復(fù)用
④控制器（Controller）和視圖（View）很難分離
? ? ? ? [1]控制器需要輸出：視圖必須給控制器提供功能可視性（eg滾動(dòng)條的拇指）還要對(duì)控制器狀態(tài)的反饋（eg按下的按鈕）
? ? ? ? [2]控制器和視圖共享的情況下誰來管理選擇：必須由視圖顯示；必須由控制器來更新和使用；通常不應(yīng)當(dāng)在模型中選擇，有些視圖需要獨(dú)立的選擇(例如，同一文檔上的兩個(gè)窗口)，其他視圖需要同步選擇(例如，表視圖和圖表視圖)
⑤小部件:緊密耦合的視圖和控制器
????????小部件是一個(gè)可重用的視圖對(duì)象，它同時(shí)管理輸出和輸入，有時(shí)被稱為組件(Java、Flex)或控件(Windows)，例如 滾動(dòng)條、按鈕、菜單條
2.GUI編程方式（Approaches to GUI programming）
面向過程的（procedural）：代碼表示，如何得到你想要的
聲明式的（declarative）：代碼表示，你想得到什么
直接操作（direct manipulation）：直接在操作界面創(chuàng)建你想要的（畫圖）
①標(biāo)記語言HTML? ?聲明性地指定視圖樹
②視圖樹操作JavaScript? 循序漸進(jìn)地改變視圖樹
③直接操作HTML編輯? AdobeDreamweaver
優(yōu)點(diǎn)和缺點(diǎn)：
①說明性編程更簡(jiǎn)潔，程序員只需知道怎么說，不需要知道如何實(shí)現(xiàn)
②說明性編程可能更難調(diào)試，不能設(shè)置斷點(diǎn)，不能單步調(diào)試，需要更多的試錯(cuò)
③說明性編程的規(guī)范使直接操作的創(chuàng)作工具成為可能，因?yàn)檎f明性編程的規(guī)范可以通過工具加載并保存，而過程性（程序性）編程不可以
到了這里，關(guān)于燕山大學(xué)——軟件用戶界面設(shè)計(jì)（五）UI架構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
