博客地址：https://legacy.superbart.xyz/writing/XDYou%20SAD.html

整體架構(gòu)設(shè)計

由于本程序是一個信息查詢工具，其基本是圍繞數(shù)據(jù)運(yùn)轉(zhuǎn)的，所以我打算使用倉庫架構(gòu)。這個圖作為一個大致的示例。

? ?

但光靠一個“倉庫”是無法維護(hù)本程序如此多類型的信息的，你現(xiàn)實中的倉庫還得找個管理院呢。因此我借鑒了構(gòu)件系統(tǒng)的想法，把倉庫里面的東西分成以下幾個“部件”。

? ?

倉庫結(jié)構(gòu)解決了我們?nèi)绾喂芾砦覀儚?fù)雜的數(shù)據(jù)，但是我們的程序是一個 GUI 程序。也就是說，這個程序有兩個部分，一個是數(shù)據(jù)，一個是顯示數(shù)據(jù)的東西。數(shù)據(jù)相當(dāng)于倉庫，而 GUI 是用來向倉庫請求數(shù)據(jù)，并顯示數(shù)據(jù)的部分。倉庫返回數(shù)據(jù)的時候，肯定需要一些處理，這個東西就是控制器，是我們程序倉庫的一大組成 部分，我將會在下面講述。

這個架構(gòu)有個名稱，叫做 MVC 架構(gòu)，在此引入我在Flutter 介紹里面提到的東西：

我先給大家介紹 MVC 架構(gòu)，Model 模型，是說程序的功能?？刂破魇呛鸵晥DView進(jìn)行交流，View視圖就是顯示了。View 通過 Controller 獲取 Model 中的東西。 ? ?以下這段展示的是我程序?qū)?yīng)的模型各組成的部分。

? ? ?

這個架構(gòu)也可以看作是一種流水線結(jié)構(gòu)，其中控制器相當(dāng)于一種過濾器。接下來我會專門開一章簡介一下。

同時，我們可以看出我們程序的層級結(jié)構(gòu)，數(shù)據(jù)大致是從中心往外圍傳遞的。

? ?

控制器

我上文提到，控制器負(fù)責(zé)中轉(zhuǎn) GUI（也就是視圖）的請求，處理后端傳回來的數(shù)據(jù)。這個有兩種實現(xiàn)方式，分別是觀察式和控制器類式。

觀察式

第一個是觀察式，適用于數(shù)據(jù)單向流動，數(shù)據(jù)加工相對簡單的情況。這種情況下，這個部件的數(shù)據(jù)流動遵循標(biāo)準(zhǔn)的數(shù)據(jù)流架構(gòu)。這個過程中，由于數(shù)據(jù)的單向移動和最終 UI 的被動更新，我們可以認(rèn)為是 UI 觀察數(shù)據(jù)改變。在這種情況下，數(shù)據(jù)更新依賴于其他部件的更新請求是不是顧及到了這個部件，比如說主頁的全局刷新。

? ?

控制器類式

第二個是控制器類式，不僅適用于數(shù)據(jù)加工十分復(fù)雜的情況，而且適用于需要視圖發(fā)出更新請求的情況。在這個情況下，數(shù)據(jù)的流動不是單純的單向，而是雙向的。而且由于涉及到很多信息，還有很多部件都依賴于一個信息源，這個控制器使用一個類的方式實現(xiàn)比較合適。 ? ?在我的程序中，課表信息是用這個實現(xiàn)的，因為課表信息相當(dāng)綜合，而且很多視圖依賴于課表信息。 ? ?我的課表信息包括：

• 當(dāng)前周次信息

• 課程信息

• 課程的時間安排信息

• 根據(jù)上面兩個信息，預(yù)先計算好的按照時間排序的課表信息

• 當(dāng)前課程信息

依賴課表信息的視圖有：

• 課程表窗口，這個只是單向接受課表信息

• 首頁的周次信息顯示，單向接受周次信息

• 首頁的當(dāng)前課程卡片，這個不僅可以展示當(dāng)前課程信息，還可以觸發(fā)重新加載

• 首頁重新加載包括重新加載課表

具體圖示請看下面總結(jié)圖中的課表相關(guān)部分。

自行管理狀態(tài)

雖然很多數(shù)據(jù)是遵循上面提到的控制器（數(shù)據(jù)流）系統(tǒng)。我程序有兩個數(shù)據(jù)是自行管理的，也就是說，他不需要上面提到的管道，而是自行管理。因為這些數(shù)據(jù)依賴于之前已經(jīng)獲取到的數(shù)據(jù)。我的程序有兩個部分是自行管理的：

• 查詢成績中，自行選擇科目計算均分，這個均分狀態(tài)是由成績查詢窗口維護(hù)的。查詢窗口維護(hù)一個成績數(shù)組，自己檢測選中的科目，然后計算顯示。

• 查詢打卡成績中，我們需要維護(hù)一個布爾變量，他用來決定顯示的是所有記錄還是成功記錄。顯然，這需要依賴于已經(jīng)返回的數(shù)據(jù)。大家可以類比為 js 里面對數(shù)組進(jìn)行 filter 操作。

上面兩章想了解更多，可以看Flutter 介紹文章中 Flutter 內(nèi)部的狀態(tài)管理章節(jié)。

總結(jié)

最后，我們根據(jù)分類，看出以下按照部件和數(shù)據(jù)流動看出來的布局。其中，橫線表示這兩個在程序中是緊密相關(guān)的，箭頭代表了數(shù)據(jù)流動的方向。紫色的是控制器，藍(lán)綠色的是最終的窗口。

? ?

我們程序的架構(gòu)是這樣的：

• 程序是圍繞數(shù)據(jù)運(yùn)轉(zhuǎn)的，所以總體上遵循倉庫架構(gòu)，其中倉庫分成若干組件。

• 各個組件有一條數(shù)據(jù)流的線性傳遞方式，控制器作為數(shù)據(jù)源，也就是倉庫，和最終顯示組件之間的過濾器和中轉(zhuǎn)站。

• 大致可以看作數(shù)據(jù)-控制器-界面的三層結(jié)構(gòu)。

SuperBart 2023-6-6