日常軟件開發(fā)中，總是能看到一些詮釋項目軟件結(jié)構(gòu)的圖表。

圖表主要的主要作用是幫助項目上的人員能夠理解正在構(gòu)建的軟件架構(gòu)，建立一個共同的愿景云矫。當(dāng)我們開發(fā)一個新功能時，能夠參考已經(jīng)建立起來的架構(gòu)汗菜，以后的開發(fā)過程中向原有的架構(gòu)靠攏让禀。圖表的存在也可以讓新人快速理解項目架構(gòu)，也能夠幫助向非開發(fā)人員解釋項目架構(gòu)陨界。

但是常常在圖表中會有一些不容易理解的點巡揍，例如不同的顏色，不同的線條菌瘪，不同的線框腮敌，分別代表了什么意思。

所以用圖表來可視化軟件俏扩，需要注意下面這些：

• 清晰明確的表示圖表中每一種顏色代表的意思糜工。

• 清晰明確的表示不同的圖表元素的意義，例如不同形狀的元素动猬、虛線啤斗、實線、各種線框等等赁咙。

• 清晰明確的表示圖表元素之間的關(guān)系钮莲，不要遺漏了。

• 不要使用模糊或太過抽象的術(shù)語彼水。

• 不要遺漏了技術(shù)選擇崔拥。

• 層次不要太混亂。

• 不要包含太多的細(xì)節(jié)凤覆。

• 不要遺漏了語境或邏輯起點链瓦。

為了清晰明了的表達(dá)圖表的含義，給圖表添加一個簡單的圖例（解釋顏色編碼盯桦、線條樣式慈俯、形狀等）是很有用的辦法，圖例的主要意義就是讓團(tuán)隊保持一致的標(biāo)記拥峦，避免歧義贴膘。

簡單模型 - 適用于面向?qū)ο笳Z言編程的軟件系統(tǒng)

image.png

面向?qū)ο笳Z言編程的軟件系統(tǒng)一般由多個容器構(gòu)成，一個容器又由多個組件構(gòu)成略号，一個組件由一個或多個類實現(xiàn)刑峡。

對于類/組件/容器/系統(tǒng)的解釋：

• 類：在面向?qū)ο笙到y(tǒng)中洋闽，類是軟件系統(tǒng)中的最小單元。
• 組件：組件是由至少一個類組成的邏輯群組突梦。
• 容器：容器指的是能夠在它內(nèi)部執(zhí)行組件或者駐留數(shù)據(jù)的東西诫舅，一般容器都是可執(zhí)行文件，容器和容器之間的通信需要遠(yuǎn)程接口宫患，例如SOAP網(wǎng)絡(luò)服務(wù)刊懈、RESTful接口等等。
• 系統(tǒng)：系統(tǒng)是能夠提供價值的最高抽象層次娃闲。

通過一個簡單模型來了解系統(tǒng)以后俏讹，要如何在項目中更加精確的表示整個架構(gòu)，就可以采用C4模型畜吊。

C4模型

C4 分別是上下文（Context）泽疆、容器（Container）、組件（Component）和代碼（Code）層次的圖表玲献，可以用這些圖表來描述不同級別的軟件架構(gòu)殉疼，每種圖表都有著不同的受眾。這個就有點像世界地圖捌年、國家地圖瓢娜、省地圖、市區(qū)街道地圖礼预，逐層遞進(jìn)眠砾，展示里面的內(nèi)容，而每種地圖的關(guān)注點也不同托酸。

語境圖/上下文 (Context)

語境圖（有些參考文章里面翻譯的是上下文）褒颈，它展示的是系統(tǒng)大局景觀的廣角視圖，主要包括關(guān)鍵的系統(tǒng)依賴和參與者励堡，關(guān)注的重點是人和系統(tǒng)谷丸。

在畫語境圖時，要明確的標(biāo)出：

• 我們構(gòu)建的軟件系統(tǒng)是什么应结？
• 誰用這個系統(tǒng)刨疼？
• 如何融入已有的IT環(huán)境？

例子：
銀行的個人客戶使用互聯(lián)網(wǎng)銀行系統(tǒng)查看有關(guān)銀行賬戶的信息并進(jìn)行支付鹅龄】剑互聯(lián)網(wǎng)銀行系統(tǒng)使用銀行現(xiàn)有的大型機銀行系統(tǒng)來執(zhí)行此操作，并使用銀行現(xiàn)有的電子郵件系統(tǒng)向客戶發(fā)送電子郵件扮休。
圖中的顏色表示哪些軟件系統(tǒng)已經(jīng)存在（灰色）以及待構(gòu)建的系統(tǒng)（藍(lán)色）迎卤。【此例子來源于網(wǎng)絡(luò)】

image.png

容器圖(Container)

首先明確容器的概念肛炮，容器指的是組成軟件系統(tǒng)的邏輯上的可執(zhí)行文件或者過程止吐。容器之間的通信一般是進(jìn)程間的通信。

所以畫一個容器的時候要包含：

• 名稱：容器的邏輯名稱（如“面向互聯(lián)網(wǎng)的Web服務(wù)器”侨糟、“數(shù)據(jù)庫”等）碍扔。
• 技術(shù)：容器的技術(shù)選擇（如ApacheTomcat7等）。
• 職責(zé)：容器職責(zé)的高層次聲明或清單秕重。

之后就是畫各個容器之間的通信：

• 容器之間交互的目的（如“讀/寫數(shù)據(jù)”不同、“發(fā)送報告“等）；
• 容器之間的通信方法（如Web服務(wù)溶耘、REST二拐、Java遠(yuǎn)程方法調(diào)用、Java消息服務(wù)）凳兵；
• 容器之間的通信方式（如同步百新、異步、批量等）庐扫；
• 容器之間的協(xié)議和端口號（如HTTP饭望、HTTPS、SOAP/HTTP形庭、SMTP铅辞、FTP等）。

例子：
互聯(lián)網(wǎng)銀行系統(tǒng)（虛線框）由五個容器組成：服務(wù)器端 Web 應(yīng)用程序萨醒、客戶端單頁面應(yīng)用程序斟珊、移動應(yīng)用程序、服務(wù)器端 API 應(yīng)用程序和數(shù)據(jù)庫富纸。
Web 應(yīng)用程序是一個 Java/Spring MVC Web 應(yīng)用程序囤踩，它僅提供靜態(tài)內(nèi)容（HTML、CSS 和 JavaScript）晓褪，包括組成單頁應(yīng)用程序的內(nèi)容高职。
單頁面應(yīng)用程序是一個運行在客戶網(wǎng)絡(luò)瀏覽器中的 Angular 應(yīng)用程序，提供所有的網(wǎng)上銀行功能辞州。
或者怔锌，客戶可以使用跨平臺 Xamarin 移動應(yīng)用程序訪問互聯(lián)網(wǎng)銀行的部分功能。單頁應(yīng)用程序和移動應(yīng)用程序都調(diào)用 JSON/HTTPS API变过，這是由服務(wù)器端運行的另一個 Java/Spring MVC 應(yīng)用程序提供的埃元。
API 應(yīng)用程序從數(shù)據(jù)庫中獲取用戶信息（關(guān)系數(shù)據(jù)庫模式）。API 應(yīng)用程序還使用專有的 XML/HTTPS 接口與現(xiàn)有的大型機銀行系統(tǒng)進(jìn)行通信媚狰，以獲取有關(guān)銀行賬戶或交易的信息岛杀。如果需要向客戶發(fā)送電子郵件，API 應(yīng)用程序還會調(diào)用現(xiàn)有的電子郵件系統(tǒng)崭孤±噜停【此例子來源于網(wǎng)絡(luò)】

image.png

通過上面這個容器圖可以讓人了解高層次的技術(shù)選擇糊肠，了解不同容器之間的交互，展示了之前的語境圖和之后的組件圖的連接遗锣，對軟件開發(fā)者和支持/運營人員很有用货裹。

組件圖(Component)

組件圖就是將單個容器放大，它可以讓你清晰的看到容器的關(guān)鍵邏輯組件精偿、組件之間的層級關(guān)系和依賴弧圆。
所以組件圖要標(biāo)明：

• 名稱：組件的名稱
• 技術(shù)：對組件的技術(shù)選擇
• 職責(zé)：對組件職責(zé)的高層次的聲明

例子：
下面是一個虛擬的網(wǎng)上銀行系統(tǒng)的組件圖示例，顯示了 API 應(yīng)用程序中的一些組件（而不是全部）笔咽。兩個 Spring MVC REST 控制器為 JSON/HTTPS API 提供訪問點搔预，每個控制器隨后使用其他組件訪問數(shù)據(jù)庫和大型機銀行系統(tǒng)中的數(shù)據(jù)∫蹲椋【此例子來源于網(wǎng)絡(luò)】

image.png

類圖/代碼(Code)

類圖是一個可選的細(xì)節(jié)層次拯田。如果想解釋某個組件被怎樣實現(xiàn)，可以畫少量高層次UML類的圖甩十。一般是出于軟件的復(fù)雜性勿锅，團(tuán)隊的規(guī)模和經(jīng)驗的考慮才畫這個圖。

總結(jié)

C4模型是比較容易理解枣氧、也比較容易使用的工具溢十，可以通過C4模型來整理我們的架構(gòu)，不論是一開始就設(shè)計的架構(gòu)达吞，還是回顧性總結(jié)的架構(gòu)张弛，都很適用。然后在畫圖過程中酪劫，一定要注意圖表表達(dá)的含義沒有歧義吞鸭，達(dá)到團(tuán)隊內(nèi)部的一致性非常重要。

閱讀書籍：
[英]Simon Brown. 程序員必讀之軟件架構(gòu) (圖靈程序設(shè)計叢書) .
例子參考 用于軟件架構(gòu)的 C4 模型