[發(fā)明專利]一種修改WEB前端主題的方法

在審

• 申請?zhí)枺?/td>: 202010044096.7
• 申請日: 2020-01-15
• 公開（公告）號: CN111221515A
• 公開（公告）日: 2020-06-02
• 發(fā)明（設(shè)計）人: 宋巍
• 申請（專利權(quán)）人: 南京鼎震信息技術(shù)有限公司
• 主分類號: G06F8/20
• 分類號: G06F8/20
• 代理公司: 北京盛凡智榮知識產(chǎn)權(quán)代理有限公司 11616
• 代理人: 張塨

本發(fā)明提供一種修改WEB前端主題的方法，所述方法步驟如下：步驟一：通過主題切換入口輸入切換信號，通過演算函數(shù)進行演算；步驟二：通過演算函數(shù)的演算結(jié)果生成Class；步驟三：將生成的Class應(yīng)用于指定DOM元素；步驟四：對頁面Body進行輸出；步驟五：通過DOM元素過去主題Class；步驟六：對元素進行渲染，完成主題切換。采用一個關(guān)聯(lián)網(wǎng)站或者頁面主題切換事件的標(biāo)識，關(guān)聯(lián)主題色演算函數(shù)，通過網(wǎng)站基準(zhǔn)色和函數(shù)參數(shù)演算出一種主題色，并設(shè)定為入口Dom元素樣式，通過子元素嵌套邏輯，依次渲染Dom的子孫元素，渲染完成，主題切換完成。思路清晰，方法簡單，可執(zhí)行性強。

技術(shù)領(lǐng)域

本發(fā)明涉及WEB前端技術(shù)領(lǐng)域，尤其涉及一種修改WEB前端主題的方法。

背景技術(shù)

WEB前端伴隨著Vue和React等等一些框架的出現(xiàn)，開發(fā)方式發(fā)生了日新月異的變化。組件方面從早期的微軟Asp.Net的服務(wù)器渲染組件、JAVA體系的JSP模板控件，到基于Jquery的眾多框架(EasyUI、JqueryUI)組件，ExtJS，Dojo等等。雖然這些前端組件(或者叫做框架)層出不窮，但其基本思想是一致的，都是對瀏覽器端的Dom進行操作或者操作的優(yōu)化。在前端工程化開發(fā)大規(guī)模推廣的情況下，現(xiàn)在的新框架和之前的以jquery為主的前端開發(fā)模式已經(jīng)不是一個級別的了。一個信息系統(tǒng)軟件開發(fā)團隊人員的組成，尤其能看出這點，前端工程師越來越多，而且對前端的依賴越來越大。一個網(wǎng)站或者一個前端項目的主題切換功能實現(xiàn)，似乎對前端開發(fā)又造成了很大的困擾。

現(xiàn)有WEB前端主題切換主要方式為通過CSS、LESS等文件通過對項目中用到的所有Dom元素以及組件分別定義幾種主題樣式，通過加載不同主題對應(yīng)的CSS，后加載的CSS覆蓋默認(rèn)顯示樣式，即可進行主題切換。現(xiàn)有主題切換方案一般有兩種，一種是CSS換膚：生成多套主題CSS，在頁面加載時根據(jù)主題選擇加載指定CSS；另一種是LESS換膚：采用動態(tài)LESS機制，通過js動態(tài)編譯LESS變量修改CSS。但是上述手段存在以下問題：一是組件樣式編輯工作量很大，例如：頁面中每一個元素的CSS樣式都要設(shè)定主題顏色、字體顏色、邊框顏色樣式等等。二是網(wǎng)站擴展性開發(fā)成本高，新加的組件、頁面等都需要根據(jù)不同主題設(shè)定幾套CSS或者LESS樣式。三是調(diào)試、測試成本代價高。四是網(wǎng)站升級，維護成本高。因此，由于以上的技術(shù)缺陷，導(dǎo)致企業(yè)在前端網(wǎng)站上面的人力、物力等成本投資居高不下。

發(fā)明內(nèi)容

針對現(xiàn)有技術(shù)的不足，本發(fā)明的目的是提供一種修改WEB前端主題的方法，采用CSS的濾鏡屬性的顏色演算函數(shù)實現(xiàn)便捷、快速、低成本的主題切換功能，具體來說采用一個關(guān)聯(lián)網(wǎng)站或者頁面主題切換事件的標(biāo)識，關(guān)聯(lián)主題色演算函數(shù)，通過網(wǎng)站基準(zhǔn)色和函數(shù)參數(shù)演算出一種主題色，并設(shè)定為入口Dom元素樣式，通過子元素嵌套邏輯，依次渲染Dom的子孫元素，渲染完成，主題切換完成，思路清晰，方法簡單，可執(zhí)行性強。

本發(fā)明提供一種修改WEB前端主題的方法，所述方法步驟如下：

步驟一：通過主題切換入口輸入切換信號，通過演算函數(shù)進行演算；

步驟二：通過演算函數(shù)的演算結(jié)果生成Class；

步驟三：將生成的Class應(yīng)用于指定DOM元素；

步驟四：對頁面Body進行輸出；

步驟五：通過DOM元素過去主題Class；

步驟六：對元素進行渲染，完成主題切換。

進一步改進在于：所述步驟四中的頁面Body包含整體頁面內(nèi)容的DOM元素。

進一步改進在于：所述步驟一中演算函數(shù)包括以下步驟：步驟1：定義帶參函數(shù)；步驟2：通過對參數(shù)和獲取的基礎(chǔ)色進行演算；步驟3：通過演算結(jié)果輸出主題。