面板可配置化 變數 樣式分離

2021-09-11 12:58:40 字數 991 閱讀 7318

之前**開發了乙個版本,抽是抽出來了,但是變數只抽出了幾個顏色,沒什麼價值(上個版本開發過程),

這次我又進行了一次迭代,現在是乙個較成熟的版本了。整體理一下思路,可以總結為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...