react-native 一種簡明構建複雜三元運算邏輯的方法
react native不使用Redux、Flex的情形下,rn區別於網頁程式設計的一個不同點在於,使用者介面的樣式構建可能不再需要套用既定的樣式表了。rn幾乎沒有什麼太多的樣式繼承的情況下,程式碼分兩個地方寫起來,頻繁測試時滾動編輯器頁面實在令人感到惱火,真的不如直接寫在虛擬dom行間來的快。此外,依據狀態機的不同,變換個多個個別的樣式時,樣式陣列內多個大括號、樣式變數的語感糟糕,不如依據狀態機的要求直接變換個別樣式的值。
那麼問題來了,樣式邏輯複雜時,全部樣式邏輯以三元形式寫成一行,構建起來複雜,而且實在不具有可讀性。對於解決方法,有兩類:第一種是使用即時執行的函式或方法,其中,即時函式需要寫在行間,各類語法關鍵詞滿天飛,而方法需要傳入相關構建虛擬dom元件相關的變數。而且二者都需要即時執行,都可行,但總體依然很不精簡,心煩啊。
那麼還是用三元吧,既有邏輯可用,變數直接可用,直接即時執行,但這次我們要把三元變通格式寫一寫,混為一行實在糟糕。
標準的三元是這樣寫:
條件?條件成立:條件不成立;
三元的疊加可以這樣:
條件1?(條件2?條件2成立:條件2不成立):( 條件3?條件3成立:條件3不成立);
但以上這樣的疊加可讀性差,可以如此變通:
這樣,相比一行一坨,清晰了許多,編譯也能夠通過。條件1 ?(條件2 ?條件2成立 :條件2不成立) :( 條件3 ?條件3成立 :條件3不成立);
事實上,在真正做一個複雜元件時,我們需要的邏輯更為複雜,遠不止兩層邏輯,而且可能參差不齊,
條件長度不一,也不是滿二叉樹樹形結構。
那麼如何構建複雜的三元運算樹邏輯呢?可以分四步走,示例如下:
步驟1
首先,理清業務邏輯,寫成註釋,寫明白,比如我在一個專案中,對於文字顏色的邏輯寫成如下:
這樣的邏輯,就是一個非滿二叉樹邏輯。其中,M-N這樣的寫法意思是,第M個條件,M相同時為一組,N=1時條件成立(三元判斷的前件),N=0時條件不成立(三元判斷的後件)。換行縮排是子條件。1-1本日曆要求年月 2-1選中 ('white') 2-0未選中 4-1當天 ('white') 4-0非當天 6-1週末 ('#a33') 6-0非週末 ('#555') 1-0非日曆要求本年月 3-1選中 ('white') 3-0未選中 5-1當天 ('white') 5-0非當天 7-1週末 ('#caa') 7-0非週末 ('lightgrey')
步驟2
其次,書寫從1到7各個條件,如下:
1 day.year == currentCalendarYear && day.month == currentCalendarMonth
2 this.state.selectedYear== day.year&&this.state.selectedMonth== day.month&&this.state.selectedDate== day.date
3 this.state.selectedYear== day.year&&this.state.selectedMonth== day.month&&this.state.selectedDate== day.date
4 day.date==currentDate && day.month==currentMonth && day.year==currentYear
5 day.date==currentDate && day.month==currentMonth && day.year==currentYear
6 day.day==0 || day.day==6
7 day.day==0 || day.day==6
儘管某些行的邏輯較長但好在分離出來,有存放地點可查可改
步驟3
(1)
?(2)
?(2-1)
:(4)
?(4-1)
:(6)
?(6-1)
:(6-0)
:(3)
?(3-1)
:(5)
?(5-1)
:(7)
?(7-1)
:(7-0)
其中,單獨括號裡單獨的數字是一個獨立的條件、括號裡數字後帶的斜線指代相應的條件判斷的前後件。
這樣,三元具有了可執行性,並具有了一定的可讀性。步驟4
最後,繫結步驟1中的資料和步驟2中的條件,情況如下:
(day.year == currentCalendarYear && day.month == currentCalendarMonth)
?(this.state.selectedYear== day.year&&this.state.selectedMonth== day.month&&this.state.selectedDate== day.date)
?('white')
:(day.date==currentDate && day.month==currentMonth && day.year==currentYear)
?('white')
:(day.day==0 || day.day==6)
?('#a33')
:('#555')
:(this.state.selectedYear== day.year&&this.state.selectedMonth== day.month&&this.state.selectedDate== day.date)
?('white')
:(day.date==currentDate && day.month==currentMonth && day.year==currentYear)
?('white')
:(day.day==0 || day.day==6)
?('#caa')
:('lightgrey')
觀察可見,綁上資料後的程式碼真是亂做一團不能直視,但好在執行沒有任何問題,而且步驟1、2、3相對清晰有一定的條理。
這樣,就實現了程式化構建一個可用的相對複雜的三元運算邏輯。