[發(fā)明專(zhuān)利]一種頁(yè)面樣式處理方法、裝置、存儲(chǔ)介質(zhì)及計(jì)算機(jī)設(shè)備

在審

• 申請(qǐng)?zhí)枺?/td>: 202010196625.5
• 申請(qǐng)日: 2020-03-19
• 公開(kāi)（公告）號(hào): CN111523067A
• 公開(kāi)（公告）日: 2020-08-11
• 發(fā)明（設(shè)計(jì)）人: 許朗朗
• 申請(qǐng)（專(zhuān)利權(quán)）人: 北京辰森世紀(jì)科技股份有限公司
• 主分類(lèi)號(hào): G06F16/957
• 分類(lèi)號(hào): G06F16/957;G06F16/958
• 代理公司: 北京中強(qiáng)智尚知識(shí)產(chǎn)權(quán)代理有限公司 11448
• 代理人: 黃耀威

本發(fā)明公開(kāi)了一種頁(yè)面樣式處理方法、裝置、存儲(chǔ)介質(zhì)及計(jì)算機(jī)設(shè)備，涉及信息技術(shù)領(lǐng)域，主要目的在于能夠?qū)崿F(xiàn)父組件的樣式信息覆蓋子組件的樣式信息，保證頁(yè)面樣式的覆蓋邏輯與頁(yè)面開(kāi)發(fā)邏輯相同，無(wú)需開(kāi)發(fā)人員編寫(xiě)額外修改代碼，降低頁(yè)面開(kāi)發(fā)工作量，從而能夠提升頁(yè)面開(kāi)發(fā)的效率。所述方法包括：獲取頁(yè)面元素的樣式信息，以及頁(yè)面元素所在的父組件的樣式信息；根據(jù)頁(yè)面元素的樣式信息和父組件的樣式信息，生成頁(yè)面元素的覆蓋樣式標(biāo)識(shí)信息；并利用父到子組件方向的屬性傳遞函數(shù)，將覆蓋樣式標(biāo)識(shí)信息傳遞給頁(yè)面元素所在的子組件；在子組件利用覆蓋樣式標(biāo)識(shí)信息對(duì)類(lèi)選擇器賦值后，完成父組件的樣式覆蓋頁(yè)面元素的樣式。本發(fā)明適用于頁(yè)面樣式處理。

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

本發(fā)明涉及信息技術(shù)領(lǐng)域，特別是涉及一種頁(yè)面樣式處理方法、裝置、存儲(chǔ)介質(zhì)及計(jì)算機(jī)設(shè)備。

背景技術(shù)

隨著信息技術(shù)的不斷進(jìn)步，基于組件化的前端頁(yè)面開(kāi)發(fā)開(kāi)始出現(xiàn)，其能夠使得開(kāi)發(fā)者能夠開(kāi)發(fā)出可在網(wǎng)站上循環(huán)利用的功能頁(yè)面。在組件化開(kāi)發(fā)前端項(xiàng)目時(shí)，隨著項(xiàng)目越來(lái)越龐大，管理各個(gè)組件之間的層疊樣式表(Cascading Style Sheets，CSS)變得不可控，由于CSS全局生效的特性，很容易出現(xiàn)因CSS重名而導(dǎo)致組件的樣式無(wú)法正常顯示的問(wèn)題。

目前，通常是通過(guò)在項(xiàng)目打包時(shí)隨機(jī)生成樣式標(biāo)識(shí)信息，并使用隨機(jī)生成的樣式標(biāo)識(shí)信息對(duì)組件進(jìn)行命名的方式，以解決不同組件之間重名的問(wèn)題。但是，在頁(yè)面樣式處理時(shí)，通常父組件的樣式信息需要針對(duì)性覆蓋子組件的樣式信息。然而，CSS針對(duì)頁(yè)面樣式的覆蓋邏輯與頁(yè)面開(kāi)發(fā)的邏輯不同，即CSS針對(duì)頁(yè)面樣式的覆蓋邏輯是由內(nèi)到外，需要將子組件的樣式傳遞給父組件，頁(yè)面開(kāi)發(fā)的邏輯是由外到內(nèi)，若想實(shí)現(xiàn)頁(yè)面樣式的覆蓋，需要開(kāi)發(fā)人員編寫(xiě)額外的代碼，修改子組件傳遞內(nèi)聯(lián)參數(shù)的邏輯，從而導(dǎo)致頁(yè)面開(kāi)發(fā)的效率較低。

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

有鑒于此，本發(fā)明提供一種頁(yè)面樣式處理方法、裝置、存儲(chǔ)介質(zhì)及計(jì)算機(jī)設(shè)備，主要目的在于能夠通過(guò)生成的覆蓋樣式標(biāo)識(shí)信息對(duì)子組件的類(lèi)選擇器賦值，實(shí)現(xiàn)父組件的樣式信息覆蓋子組件的樣式信息，能夠保證頁(yè)面樣式的覆蓋邏輯與頁(yè)面開(kāi)發(fā)的邏輯相同，無(wú)需開(kāi)發(fā)人員編寫(xiě)額外的修改代碼，能夠降低頁(yè)面開(kāi)發(fā)工作量，從而能夠提升頁(yè)面開(kāi)發(fā)的效率。

依據(jù)本發(fā)明一個(gè)方面，提供了一種頁(yè)面樣式處理方法，包括：

獲取頁(yè)面元素的樣式信息，以及所述頁(yè)面元素所在的父組件的樣式信息；

根據(jù)所述頁(yè)面元素的樣式信息和所述父組件的樣式信息，生成所述頁(yè)面元素的覆蓋樣式標(biāo)識(shí)信息；并利用父到子組件方向的屬性傳遞函數(shù)，將所述覆蓋樣式標(biāo)識(shí)信息傳遞給所述頁(yè)面元素所在的子組件；

在所述子組件利用所述覆蓋樣式標(biāo)識(shí)信息對(duì)類(lèi)選擇器賦值后，完成所述父組件的樣式覆蓋所述頁(yè)面元素的樣式。

可選地，所述根據(jù)所述頁(yè)面元素的樣式信息和所述父組件的樣式信息，生成所述頁(yè)面元素的覆蓋樣式標(biāo)識(shí)信息，包括：

根據(jù)所述頁(yè)面元素的樣式信息、所述父組件的樣式信息和預(yù)設(shè)樣式標(biāo)識(shí)生成算法，隨機(jī)生成所述頁(yè)面元素的樣式標(biāo)識(shí)信息和所述父組件的樣式標(biāo)識(shí)信息；

根據(jù)所述頁(yè)面元素的樣式標(biāo)識(shí)信息、所述父組件的樣式標(biāo)識(shí)信息和預(yù)設(shè)覆蓋樣式標(biāo)識(shí)生成算法，生成所述頁(yè)面元素的覆蓋樣式標(biāo)識(shí)信息。

進(jìn)一步地，所述根據(jù)所述頁(yè)面元素的樣式標(biāo)識(shí)信息、所述父組件的樣式標(biāo)識(shí)信息和預(yù)設(shè)覆蓋樣式標(biāo)識(shí)生成算法，生成所述頁(yè)面元素的覆蓋樣式標(biāo)識(shí)信息，包括：

將所述頁(yè)面元素的樣式標(biāo)識(shí)信息合并添加到所述父組件的樣式標(biāo)識(shí)信息的后面；

將合并后的樣式標(biāo)識(shí)信息，確定為所述頁(yè)面元素的覆蓋樣式標(biāo)識(shí)信息。

進(jìn)一步地，所述頁(yè)面元素的樣式標(biāo)識(shí)信息通過(guò)樣式哈希值表示，所述根據(jù)所述頁(yè)面元素的樣式信息、所述父組件的樣式信息和預(yù)設(shè)樣式標(biāo)識(shí)生成算法，隨機(jī)生成所述頁(yè)面元素的樣式標(biāo)識(shí)信息，包括：