從圖形狀態(tài)切換理解 Parse 與狀態(tài)驅(qū)動模式面向初學(xué)者 | 無代碼純思路目錄先看一個場景什么是 Parse為什么圖形能自動變色一個數(shù)字裝下很多個狀態(tài)為什么不用一個狀態(tài)屬性而是散落的 9 個三個轉(zhuǎn)換器各管一攤從頭到尾走一遍總結(jié)先看一個場景想象你在操作一個檢測軟件畫布上有很多矩形圖形。當(dāng)發(fā)生以下情況時圖形外觀會變化鼠標(biāo)點(diǎn)擊圖形 → 邊框變虛線檢測結(jié)果 OK → 背景變綠色檢測結(jié)果 NG → 背景變紅色正在掃描 → 背景變橙色既沒選中也沒狀態(tài) → 默認(rèn)實(shí)線邊框問題來了程序怎么知道一個圖形當(dāng)前是什么狀態(tài)然后自動切換顏色什么是 ParseParse 讀懂一份數(shù)據(jù)翻譯成另一種格式。生活類比原始數(shù)據(jù)翻譯后看體溫計(jì)水銀柱“38.5 度”看紅綠燈亮紅燈“?！弊x成績單“張三 數(shù)學(xué) 85”{名字:“張三”, 科目:“數(shù)學(xué)”, 成績:85}程序里的 Parse 完全一樣輸入一堆碎片信息 → 輸出一個有意義的整體為什么圖形能自動變色第一步ViewModel 告訴外界我有什么屬性每個圖形對象對外暴露一組屬性全是是/否這個圖形被選中了嗎 → 是 / 否 這個圖形被鼠標(biāo)懸停了嗎 → 是 / 否 這個圖形正在被掃描嗎 → 是 / 否 這個圖形掃描完了嗎 → 是 / 否 這個圖形正在重建嗎 → 是 / 否 這個圖形重建完了嗎 → 是 / 否 這個圖形正在檢測嗎 → 是 / 否 這個圖形檢測結(jié)果 OK → 是 / 否 這個圖形檢測結(jié)果 NG → 是 / 否總共 9 個問題每個答案不是是就是否。第二步WPF 的多路綁定把這些答案打包送出WPF 有一個機(jī)制叫MultiBinding多路綁定它能把多個屬性同時、按順序送給一個處理函數(shù)MultiBinding 說我把 9 個屬性的值打包成一個數(shù)組你按順序拿—— 第一個位置 → 是否選中 第二個位置 → 是否懸停 第三個位置 → 是否掃描 ... 第九個位置 → 是否 NG第三步Parse 函數(shù)把是/否轉(zhuǎn)換成狀態(tài)對象收到的就是一堆 true / false比如[true, false, true, false, false, false, false, false, false]Parse 的工作讀懂這些 true/false 分別表示什么把它們合并成一個復(fù)合狀態(tài)。[true, false, true, ...] ↓ 這個圖形被選中了 正在掃描中第四步轉(zhuǎn)換器根據(jù)狀態(tài)決定顏色Parse 輸出的狀態(tài)交給不同的轉(zhuǎn)換器Parse 輸出的狀態(tài) │ ┌────────────────┼────────────────┐ 邊框轉(zhuǎn)換器 背景轉(zhuǎn)換器 描邊轉(zhuǎn)換器 決定線型 決定背景色 決定描邊色每個轉(zhuǎn)換器做的事情就是查表如果狀態(tài)里有NG → 給紅色 如果狀態(tài)里有正在檢測 → 給青色 如果狀態(tài)里有選中 → 給虛線 如果什么都沒有 → 給實(shí)線默認(rèn)色有優(yōu)先級NG OK 檢測中 掃描中 懸停 選中 默認(rèn)。一個數(shù)字裝下很多個狀態(tài)你會問一個圖形同時選中又正在掃描又結(jié)果 NG怎么存用位標(biāo)記技巧把每個狀態(tài)分配一個二進(jìn)制位選中 → 第 0 位 懸停 → 第 1 位 掃描中 → 第 2 位 檢測中 → 第 5 位 結(jié)果 OK → 第 6 位 結(jié)果 NG → 第 7 位 ...一個 int 有 32 位足夠裝下所有狀態(tài)。一個圖形選中 掃描中 NG → 第 0 位置 1、第 2 位置 1、第 7 位置 1 → 最終存成一個整數(shù)查詢時很簡單狀態(tài)里有沒有 NG→ 看看第 7 位是不是 1。特殊處理OK 和 NG 互斥一個檢測結(jié)果不可能同時 OK 又 NG。所以加一條規(guī)則如果傳入OK → 先加上 OK 標(biāo)記再擦掉 NG 標(biāo)記 如果傳入NG → 先加上 NG 標(biāo)記再擦掉 OK 標(biāo)記后寫入的會覆蓋前一個?；A(chǔ)語法課堂如果你是初學(xué)者下面這些寫法可能會讓你困惑。我們用人話解釋一下。位運(yùn)算|、|、、~這組符號用來操控位標(biāo)記狀態(tài)。加標(biāo)記|OR或我有一個狀態(tài) 選中第 0 位是 1 我想再加正在掃描 選中 | 正在掃描 結(jié)果 選中 正在掃描兩個 1|的作用是只要任意一邊的位是 1結(jié)果就是 1。所以適合往上加標(biāo)記。|是|的簡寫狀態(tài) 狀態(tài) | 正在掃描 ← 完整寫法 狀態(tài) | 正在掃描 ← 簡寫效果一樣就像x x 5可以簡寫成x 5。查標(biāo)記AND與想知道狀態(tài)里有沒有NG 狀態(tài) NG → 如果結(jié)果不為 0說明有 NG的作用是只有兩邊的位都是 1結(jié)果才是 1。狀態(tài) 選中 | NG 第 0 位和第 10 位是 1 狀態(tài) NG 非零 → 有 NG 狀態(tài) OK 0 → 沒有 OK擦除標(biāo)記~配合NOT取反想擦掉狀態(tài)里的OK標(biāo)記 狀態(tài) 狀態(tài) (~OK)~把 OK 的二進(jìn)制位全部翻轉(zhuǎn)原來 OK 對應(yīng)位是 1翻轉(zhuǎn)后變成 0原來別的位是 0翻轉(zhuǎn)后全是 1。然后用去與一下OK 對應(yīng)的位會變成 0被擦掉其他位保持不變。OK 0001000000 假設(shè) OK 占第 6 位 ~OK 1110111111 除了第 6 位其他全是 1 狀態(tài) ~OK → OK 對應(yīng)的位被清 0其他位原樣保留三元表達(dá)式條件 ? 是 : 否這是if-else的迷你版if (條件) { 取值A(chǔ); } else { 取值B; } 等價于條件 ? 取值A(chǔ) : 取值B通常用來做防御防止傳入的值是 null 導(dǎo)致崩潰傳入值可能是 null → 如果是 null用 false 代替 傳入值可能是 abc → 不是 bool也用 false 代替 傳入值 true → 正常使用is bool 變量名模式匹配這個東西同時干了三件事某個值 is bool s第幾步干什么舉例①判斷這個值是不是 bool 類型null 不是 / “abc” 不是 / true 是②如果是把值存到變量 s 里s true③如果否s 不存在整個表達(dá)式為 false—變量名沒有含義叫 s、flag、x 都行用完就扔。極簡寫法某個值 is true不需要起變量名直接判斷是不是 true。null 和 false 都會被視為不是 true。WPF MultiBinding 怎么傳參數(shù)WPF 會把 XAML 里綁定的屬性按順序打包成數(shù)組XAML 寫的順序 第 1 個綁定 → 數(shù)組[0] 第 2 個綁定 → 數(shù)組[1] 第 3 個綁定 → 數(shù)組[2]下標(biāo)就是綁定的序號。轉(zhuǎn)換器收到的就是一個object[]里面每個位置對應(yīng)一個綁定的屬性值。注意東西類型是object而不是bool。因?yàn)?WPF 的綁定系統(tǒng)在傳值時不檢查類型什么值都能塞進(jìn)去null、字符串、數(shù)字……都可能。所以轉(zhuǎn)換器里必須做類型判斷。一句話總結(jié)這堆語法符號作用一句話加標(biāo)記加標(biāo)記簡寫查標(biāo)記“看看某一位是不是 1”~取反“除了這一位其他全變” ~擦標(biāo)記“把某一位清零”? :三元“迷你 if-else”is bool s模式匹配“判斷 取值 防御”數(shù)組[下標(biāo)]取值“第幾個綁定的屬性”為什么不用一個狀態(tài)屬性而是散落的 9 個理想的設(shè)計(jì)是ViewModel 直接暴露一個狀態(tài)屬性而不是 9 個散落的 true/false。// 理想 圖形.當(dāng)前狀態(tài) 選中 | 掃描中 | 結(jié)果OK // 實(shí)際情況 圖形.是否選中 true 圖形.是否掃描中 true 圖形.是否結(jié)果OK true ...為什么沒按理想來因?yàn)檫@些 true/false 屬性不只是為 UI 顏色服務(wù)的。它們還要被業(yè)務(wù)邏輯直接讀取如果選中了 → 啟用刪除按鈕 如果正在掃描 → 禁用編輯這些業(yè)務(wù)判斷直接讀是否選中比查位標(biāo)記要直觀。所以屬性先以散落的 bool 形式存在后來要給 UI 加自動變色功能時用 MultiBinding 打了個補(bǔ)丁。這是真實(shí)項(xiàng)目中常見的歷史選擇——不是最優(yōu)方案但改動成本高于收益。按長度分組的潛在問題Parse 函數(shù)里有一段按傳了多少個屬性做分組判斷的邏輯。這種寫法有一個隱患如果一個圖形只綁了是否選中這一個屬性長度1那么是否選中的狀態(tài)會被靜默跳過永遠(yuǎn)解析不到。現(xiàn)在沒出 bug純粹因?yàn)樗杏玫竭@個轉(zhuǎn)換器的圖形都恰好綁了至少兩個屬性但并沒有任何機(jī)制保證這一點(diǎn)。三個轉(zhuǎn)換器各管一攤轉(zhuǎn)換器管什么怎么判斷邊框轉(zhuǎn)換器實(shí)線/虛線/無線只看選中和懸停背景轉(zhuǎn)換器填充色按 NG OK 檢測中 掃描 懸停 優(yōu)先級描邊轉(zhuǎn)換器邊框顏色同背景邏輯但用不透明顏色同一個狀態(tài)值三個轉(zhuǎn)換器分別讀自己關(guān)心的部分互不干擾。從頭到尾走一遍1. 用戶點(diǎn)擊一個圖形 → 圖形.是否選中 true 2. WPF 檢測到屬性變化 → 把 9 個屬性值打包[true, false, false, ...] 3. Parse 處理 → 讀第一個位置true → 打上選中標(biāo)記 → 讀其他位置都是 false → 不加標(biāo)記 → 輸出狀態(tài) 選中 4. 邊框轉(zhuǎn)換器拿到選中 → 查表選中 → 虛線 5. 背景轉(zhuǎn)換器拿到選中 → 按優(yōu)先級查表不是 NG不是 OK不是檢測...是選中 → 透明色 6. 描邊轉(zhuǎn)換器拿到選中 → 選中 → 返回默認(rèn)描邊色 7. 畫布刷新 → 圖形邊框變虛線用戶看到視覺反饋整個過程無需手寫任何如果 xx 就把顏色設(shè)為 yy的代碼全部由轉(zhuǎn)換器自動處理?？偨Y(jié)Parse 讀懂原始數(shù)據(jù)翻譯成結(jié)構(gòu)化信息。像體溫計(jì)把水銀柱翻譯成38.5 度。MultiBinding 把多個屬性同時打包送給一個處理函數(shù)。像快遞員一次性取走 9 個包裹。位標(biāo)記 一個整數(shù)裝下多個是/否。每個狀態(tài)占一個二進(jìn)制位加一起就是一個整數(shù)。轉(zhuǎn)換器 查表決策。輸入狀態(tài) → 按優(yōu)先級查表 → 輸出對應(yīng)的顏色/線型。散落的 9 個 bool 是歷史選擇。不是最優(yōu)但改動成本高于收益。整個模式的本質(zhì)散落的 bool 值數(shù)據(jù) ↓ Parse 結(jié)構(gòu)化狀態(tài)語義 ↓ Converter 視覺表現(xiàn)顏色/線型數(shù)據(jù) → 語義 → 表現(xiàn)三層分離各不越界。