本發(fā)明涉及復(fù)合組件屬性修改技術(shù)領(lǐng)域，更具體地說，涉及一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法及裝置。

背景技術(shù)：

復(fù)合組件是一種前端組件，是將多個(gè)組件組合而成的一種組件。目前，將各個(gè)子組件組合成一個(gè)復(fù)合組件之后，復(fù)合組件就看做是一個(gè)獨(dú)立的組件，其開放的屬性經(jīng)常根據(jù)做組件時(shí)的業(yè)務(wù)場景來確定，當(dāng)遇到新的業(yè)務(wù)場景時(shí)，如果想修改某個(gè)子組件的屬性，但是并沒有對外開放，使得復(fù)合組件的靈活性受到限制。例如：假設(shè)有一個(gè)復(fù)合組件物料規(guī)格型號組件，選擇物料之后會(huì)自動(dòng)將規(guī)格型號攜帶顯示出來。在設(shè)計(jì)時(shí)，標(biāo)簽的屬性名叫做物料，滿足出廠時(shí)的需求，并且此名稱沒有屬性開放出來可以修改，在客戶現(xiàn)場，客戶可能想將此標(biāo)簽修改為倉儲物料，就無法進(jìn)行修改，需要重新對組件做相關(guān)調(diào)整才行?？梢?，由于子組件的屬性不能修改，所以只能滿足固定業(yè)務(wù)場景，靈活性差，在別的業(yè)務(wù)場景中使用該組件時(shí)，復(fù)合組件需要重新修改才能使用，導(dǎo)致使用成本和維護(hù)成本升高。

因此，如何修改復(fù)合組件中子組件的屬性，減少使用成本和維護(hù)成本，是本領(lǐng)域技術(shù)人員需要解決的問題。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于提供一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法及裝置，以實(shí)現(xiàn)修改復(fù)合組件中子組件的屬性，減少使用成本和維護(hù)成本。

為實(shí)現(xiàn)上述目的，本發(fā)明實(shí)施例提供了如下技術(shù)方案：

一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法，包括：

確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值；

將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值；

對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再執(zhí)行渲染操作。

其中，所述將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值，包括：

將所述個(gè)性化值以JSON結(jié)構(gòu)存入復(fù)合組件的個(gè)性化屬性值。

其中，所述確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值，包括：

判斷待修改屬性的子組件是否標(biāo)記了ref屬性；

若是，則生成與待修改屬性的子組件的ref屬性對應(yīng)的個(gè)性化值。

其中，所述對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再執(zhí)行渲染操作，包括：

對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，根據(jù)待渲染子組件的ref屬性，判斷所述個(gè)性化屬性值中是否存在與待渲染子組件對應(yīng)的個(gè)性化值；

若存在，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作；

若不存在，則直接通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作。

一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改裝置，包括：

個(gè)性化值生成模塊，用于確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值；

存儲模塊，用于將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值；

個(gè)性化值融合模塊，用于對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合；

渲染模塊，用于將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，執(zhí)行渲染操作。

其中，所述存儲模塊將所述個(gè)性化值以JSON結(jié)構(gòu)存入復(fù)合組件的個(gè)性化屬性值。

其中，所述個(gè)性化值生成模塊包括：

屬性判斷單元，用于判斷待修改屬性的子組件是否標(biāo)記了ref屬性；

個(gè)性化值生成單元，用于在待修改屬性的子組件標(biāo)記了ref屬性時(shí)，生成與待修改屬性的子組件的ref屬性對應(yīng)的個(gè)性化值。

其中，所述個(gè)性化值融合模塊包括：

個(gè)性化值判斷單元，用于對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，根據(jù)待渲染子組件的ref屬性，判斷所述個(gè)性化屬性值中是否存在與待渲染子組件對應(yīng)的個(gè)性化值；

融合單元，用于在所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值時(shí)，將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合；

所述渲染模塊，用于將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作；在所述個(gè)性化屬性值中不存在與待渲染子組件對應(yīng)的個(gè)性化值時(shí)，直接通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作。

通過以上方案可知，本發(fā)明實(shí)施例提供的一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法，包括：確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值；將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值；對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再執(zhí)行渲染操作；

可見，在本方案中，在對復(fù)合組件進(jìn)行渲染時(shí)，通過將復(fù)合組件中本身設(shè)置的子組件的屬性和動(dòng)態(tài)注入的屬性進(jìn)行融合，然后傳遞給渲染函數(shù)進(jìn)行處理，就可以動(dòng)態(tài)修改子組件屬性的能力，可以解決靈活設(shè)置子組件的屬性，使得子組件的屬性即可以在設(shè)計(jì)期設(shè)計(jì)，也可以在運(yùn)行期設(shè)計(jì)，可以滿足更多的業(yè)務(wù)場景；本發(fā)明還公開了一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改裝置，同樣能實(shí)現(xiàn)上述技術(shù)效果。

附圖說明

為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實(shí)施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為本發(fā)明實(shí)施例公開的一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法流程示意圖；

圖2為本發(fā)明實(shí)施例公開的一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改裝置結(jié)構(gòu)示意圖。

具體實(shí)施方式

下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

本發(fā)明實(shí)施例公開了一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法及裝置，以實(shí)現(xiàn)修改復(fù)合組件中子組件的屬性，減少使用成本和維護(hù)成本。

參見圖1，本發(fā)明實(shí)施例提供的一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法，包括：

S101、確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值；

其中，所述確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值，包括：

判斷待修改屬性的子組件是否標(biāo)記了ref屬性；

若是，則生成與待修改屬性的子組件的ref屬性對應(yīng)的個(gè)性化值。

具體的，復(fù)合組件的最大優(yōu)勢就是可以進(jìn)一步的抽象出更多的符合業(yè)務(wù)場景的可復(fù)用的組件，加快產(chǎn)品的開發(fā)速度，提供開發(fā)能力和交付能力。但通常來說，復(fù)合組件都具有較為復(fù)雜的結(jié)構(gòu)特性，從頁面結(jié)構(gòu)的層面來看，可能嵌套多個(gè)子組件，每個(gè)子組件可能嵌套在不同的容器，這樣就使得復(fù)合組件的結(jié)構(gòu)是層次性的，可能A子組件在第一層，B子組件在第二層，C子組件在第三層，但復(fù)合組件與業(yè)務(wù)場景息息相關(guān)，每個(gè)復(fù)合組件開放的屬性、事件都與當(dāng)時(shí)的業(yè)務(wù)場景相關(guān)，這些對外開放的接口決定了復(fù)合組件所提供的能力，但復(fù)合組件不可能將所有子組件的屬性和事件都開放出來，主要為滿足當(dāng)時(shí)的業(yè)務(wù)場景為準(zhǔn)，即使當(dāng)時(shí)考慮了擴(kuò)展性，也未必能滿足另外業(yè)務(wù)場景下需要的組件形態(tài)。

但是在運(yùn)行期，復(fù)合組件的渲染是遞歸進(jìn)行的，也就是每一個(gè)復(fù)合組件都會(huì)調(diào)用統(tǒng)一的渲染方法進(jìn)行展示處理。如果在渲染的時(shí)候我們可以動(dòng)態(tài)的注入組件的屬性和事件，就可以動(dòng)態(tài)的修改組件的外觀和能力，因此在渲染的時(shí)候我們可以增加一個(gè)擴(kuò)展點(diǎn)，每次渲染一個(gè)組件時(shí)，將復(fù)合組件中本身設(shè)置的子組件的屬性和動(dòng)態(tài)注入的屬性進(jìn)行融合，然后傳遞給渲染函數(shù)進(jìn)行處理，就可以動(dòng)態(tài)修改子組件屬性的能力。

但子組件的結(jié)構(gòu)是層次性的，不可能將結(jié)構(gòu)存儲起來，因此動(dòng)態(tài)的設(shè)置子組件是扁平化存儲的，每個(gè)子組件都應(yīng)該與父組件建立關(guān)系，參見本實(shí)施例提供的組件結(jié)構(gòu)：

在本實(shí)施例中通過ref屬性建立當(dāng)前組件與父組件的關(guān)系；需要說明的是，在本實(shí)施例的關(guān)系建立不使用id的原因是id重復(fù)的可能性較大，即使id是通過復(fù)合組件的id合并計(jì)算而來，也會(huì)隨著組件層級的加深而導(dǎo)致復(fù)雜性提升，因此使用簡單的ref屬性來建立關(guān)聯(lián)，只有標(biāo)記了ref屬性的組件才可以動(dòng)態(tài)的設(shè)置其屬性。因此在本方案中，生成與子組件對應(yīng)的個(gè)性化值之前，需要判斷待修改屬性的子組件是否標(biāo)記了ref屬性，如果標(biāo)價(jià)了ref屬性，則生成與待修改屬性的子組件的ref屬性對應(yīng)的個(gè)性化值。

S102、將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值；

其中，所述將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值，包括：

將所述個(gè)性化值以JSON結(jié)構(gòu)存入復(fù)合組件的個(gè)性化屬性值。

具體的，當(dāng)確定子組件的個(gè)性化值后，則將個(gè)性化值以最簡單的JSON結(jié)構(gòu)進(jìn)行數(shù)據(jù)的保存，并且是只對需要?jiǎng)討B(tài)修改的子組件才會(huì)做個(gè)性化存儲，上述待修改組件的個(gè)性化值存放在復(fù)合組件的個(gè)性化屬性值中。

S103、對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再執(zhí)行渲染操作。

其中，所述對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再執(zhí)行渲染操作，包括：

對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，根據(jù)待渲染子組件的ref屬性，判斷所述個(gè)性化屬性值中是否存在與待渲染子組件對應(yīng)的個(gè)性化值；

若存在，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作；

若不存在，則直接通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作。

具體的，在運(yùn)行期渲染時(shí)，從復(fù)合組件的個(gè)性化屬性值查找是否存在與待渲染子組件對應(yīng)的個(gè)性化值，如果存在，則和復(fù)合組件中的值進(jìn)行融合再做渲染。這樣就可以保證子組件的屬性即使未開放屬性，也可以動(dòng)態(tài)的修改。

下面通過一個(gè)具體實(shí)施例對現(xiàn)有技術(shù)中存在的問題進(jìn)行描述：

假設(shè)有兩個(gè)組件分別是label組件和input組件，包含的屬性參見表1及表2：

表1

表2

現(xiàn)在要做一個(gè)組件，叫做material物料組件，他包含了兩個(gè)label和一個(gè)input，結(jié)構(gòu)如下：

組件Material對外的屬性參見表3：

表3

需要注意的是，組件material開放的屬性，并沒有包含input的class屬性和type屬性，也沒有包含label的class屬性，當(dāng)使用material組件時(shí)，只能設(shè)置它的id，class，value等屬性，input和lable的其他屬性無法控制，也就是現(xiàn)有技術(shù)中，無法對復(fù)合組件未開放的屬性進(jìn)行修改，下面通過一個(gè)具體實(shí)施例對本方案進(jìn)行詳細(xì)描述：

假設(shè)物料組件中包含了兩個(gè)label組件，還有一個(gè)input組件。假設(shè)填寫了一個(gè)LeTV遙控板物料，現(xiàn)有技術(shù)的存儲為：

這樣的話，如果想將第一個(gè)label的標(biāo)題修改為倉儲物料，input的設(shè)置為紅色背景，因?yàn)檫@兩個(gè)組件屬于materail的子組件，并且沒有開放的屬性可以進(jìn)行設(shè)置，現(xiàn)有的技術(shù)無法做到這一點(diǎn)；因此在本方案中，待修改的子組件為lable組件的text屬性，和input組件的class屬性，并且通過上述組件結(jié)構(gòu)可知，lable組件的ref屬性值為1，input組件的ref屬性值為2，則lable組件和input組件生成的對應(yīng)的個(gè)性化值為：

可見，在本方案中增加了對ref＝1的lable組件的text屬性的設(shè)置，增加了對ref＝2的input組件的class屬性的設(shè)置。當(dāng)運(yùn)行期渲染的時(shí)候，現(xiàn)有技術(shù)的渲染順序如下：

|--material渲染【渲染寬度，高度，背景色】

|----label渲染【渲染第一個(gè)標(biāo)簽】

|----input渲染【渲染輸入框】

|----label渲染【渲染第二個(gè)標(biāo)簽】

而本方案中的在復(fù)合組件的個(gè)性化屬性值中增加了對ref＝1的lable組件的text屬性的設(shè)置，增加了對ref＝2的input組件的class屬性的設(shè)置，因此本方案的渲染過程如下：

|--material渲染【渲染寬度，高度，背景色】

|----label渲染【渲染第一個(gè)標(biāo)簽，但會(huì)融合ref＝1的label組件的text屬性之后才渲染】

|----input渲染【渲染輸入框，但會(huì)融合ref＝2的label組件的class屬性之后才渲染】

|----label渲染【渲染第二個(gè)標(biāo)簽】

綜上可見，在本發(fā)明中通過子組件的個(gè)性化屬性與復(fù)合組件建立關(guān)系，通過建立這種關(guān)系，就可以通過插入點(diǎn)的方式抽象出組件的變化性并進(jìn)行擴(kuò)展，從而提升復(fù)合組件靈活性，滿足多個(gè)場景的應(yīng)用，保證了復(fù)合組件維護(hù)的簡潔性，使得可以通過插入點(diǎn)的方式對組件進(jìn)行擴(kuò)展，隔離了變化性。

下面對本發(fā)明實(shí)施例提供的修改裝置進(jìn)行介紹，下文描述的修改裝置與上文描述的修改方法可以相互參照。

參見圖2，本發(fā)明實(shí)施例提供的一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改裝置，包括：

個(gè)性化值生成模塊100，用于確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值；

存儲模塊200，用于將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值；

個(gè)性化值融合模塊300，用于對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合；

渲染模塊400，用于將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，執(zhí)行渲染操作。

基于上述實(shí)施例，所述存儲模塊將所述個(gè)性化值以JSON結(jié)構(gòu)存入復(fù)合組件的個(gè)性化屬性值。

基于上述實(shí)施例，所述個(gè)性化值生成模塊包括：

屬性判斷單元，用于判斷待修改屬性的子組件是否標(biāo)記了ref屬性；

個(gè)性化值生成單元，用于在待修改屬性的子組件標(biāo)記了ref屬性時(shí)，生成與待修改屬性的子組件的ref屬性對應(yīng)的個(gè)性化值。

基于上述實(shí)施例，所述個(gè)性化值融合模塊包括：

個(gè)性化值判斷單元，用于對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，根據(jù)待渲染子組件的ref屬性，判斷所述個(gè)性化屬性值中是否存在與待渲染子組件對應(yīng)的個(gè)性化值；

融合單元，用于在所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值時(shí)，將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合；

所述渲染模塊，用于將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作；在所述個(gè)性化屬性值中不存在與待渲染子組件對應(yīng)的個(gè)性化值時(shí)，直接通過渲染函數(shù)對待渲染子組件執(zhí)行渲染操作。

本發(fā)明實(shí)施例提供的一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改方法，包括：確定待修改屬性的子組件，生成與所述子組件對應(yīng)的個(gè)性化值；將所述個(gè)性化值存入復(fù)合組件的個(gè)性化屬性值；對復(fù)合組件中的子組件進(jìn)行渲染時(shí)，若檢測到所述個(gè)性化屬性值中存在與待渲染子組件對應(yīng)的個(gè)性化值，則將待渲染子組件的復(fù)合組件默認(rèn)值與待渲染子組件的個(gè)性化值進(jìn)行融合后，再執(zhí)行渲染操作；

可見，在本方案中，在對復(fù)合組件進(jìn)行渲染時(shí)，通過將復(fù)合組件中本身設(shè)置的子組件的屬性和動(dòng)態(tài)注入的屬性進(jìn)行融合，然后傳遞給渲染函數(shù)進(jìn)行處理，就可以動(dòng)態(tài)修改子組件屬性的能力，可以解決靈活設(shè)置子組件的屬性，使得子組件的屬性即可以在設(shè)計(jì)期設(shè)計(jì)，也可以在運(yùn)行期設(shè)計(jì)，可以滿足更多的業(yè)務(wù)場景；本發(fā)明還公開了一種復(fù)合組件中子組件屬性的動(dòng)態(tài)修改裝置，同樣能實(shí)現(xiàn)上述技術(shù)效果。

本說明書中各個(gè)實(shí)施例采用遞進(jìn)的方式描述，每個(gè)實(shí)施例重點(diǎn)說明的都是與其他實(shí)施例的不同之處，各個(gè)實(shí)施例之間相同相似部分互相參見即可。

對所公開的實(shí)施例的上述說明，使本領(lǐng)域?qū)I(yè)技術(shù)人員能夠?qū)崿F(xiàn)或使用本發(fā)明。對這些實(shí)施例的多種修改對本領(lǐng)域的專業(yè)技術(shù)人員來說將是顯而易見的，本文中所定義的一般原理可以在不脫離本發(fā)明的精神或范圍的情況下，在其它實(shí)施例中實(shí)現(xiàn)。因此，本發(fā)明將不會(huì)被限制于本文所示的這些實(shí)施例，而是要符合與本文所公開的原理和新穎特點(diǎn)相一致的最寬的范圍。