之前**開發了乙個版本,抽是抽出來了,但是變數只抽出了幾個顏色,沒什麼價值(上個版本開發過程),
這次我又進行了一次迭代,現在是乙個較成熟的版本了。整體理一下思路,可以總結為3步走和2層架構:
**是樣式的子集,想要做**的管理,首先要把涉及到的樣式都抽取出來,這裡只涉及到了 登入頁、考勤頁、頂部選單 3個部分。抽出來後放在assets/skin下。
也是分成了3個檔案管理
第二步: 抽取其中的變數
單抽出樣式來肯定不夠,要做配置化,需要從樣式中抽出變化的值作為變數來管理,並且統一命名。
如圖,也是對應3個section的3個檔案。
命名方式是 sectionname-blockname-cssname
抽取出變數之後的less檔案如下:
這樣以後就只需要改動配置檔案,而不需要修改樣式檔案了。
第三步,抽取公共變數
配置中有很多同樣的值,比如重複的顏色、重複的基礎路徑等。這些常量寫了很多次,萬一修改要修改n個地方,所以,我把這些散落的魔法值收集起來作為列舉值統一維護,使得配置變得更加的方便可控。
我抽取出了以下變數:
這裡的顏色的命名我是按照色相和亮度來命名的,按照色相分為 紅、橙、黃、紅橙等,然後再加上深淺、亮暗的區分。雖然不是那麼準確,但是能夠簡單區分了。
通過以上3個步驟,**的可配置化就完成了。以後如果要開發一套新的**,一般只需要改動配置就可以了。不過如果新**有別的樣式的更改,還是需要去修改樣式檔案,然後擴充配置變數的。隨著**開發的越來越多,配置也會越來越完善。
經過上面3個步驟我們抽取出了**樣式和**相關的配置變數,其實**的架構也就分了這兩層。
**是全部樣式的乙個子集,做到可配置需要3步:
確定好範圍之後,把樣式抽取出來單獨維護, 2.從中抽取抽變數來配置
把一些顏色等常量值做成列舉的形式
整體的**架構就分為**樣式和**配置兩層,架構圖見上文。
**鏈結
react的表頭可配置化
實現效果 table上面增加乙個按鈕,按鈕觸發乙個model頁面,裡面是checkbox元件,提供表頭欄位的選擇。選中那個字段,table呈現那個字段。從systemtablecolumn表中獲取表的每一字段的資訊 const listcolsbytable axios.get config.hos...
PostgreSQL 中的全域性可配置變數
在 postgresql 資料庫的 查詢代價計算中,會看到有如下的變數 seq page cost 順序讀頁代價 random page cost 隨機讀頁代價 等等。這些變數在資料庫安裝後我們可以通過兩種方式來修改並生效 1.在 psql 中通過 set show 命令,如 seq page co...
切面定義可配置化及重複註解
專案在這兩個方面進行了 1.切面自定義 一般地,切面都是這樣定義的,由於 pointcut無法通過 注入,所以這個類很難框架化,都需要在業務方法中寫,比較麻煩,下面記錄一種可以配置此值的方式。aspect component pointcut execution public top.jfunc.v...