CN106681770A - 一种复合组件中子组件属性的动态修改方法及装置 - Google Patents

Abstract

本发明公开了一种复合组件中子组件属性的动态修改方法及装置，包括：确定待修改属性的子组件，生成与子组件对应的个性化值；将个性化值存入复合组件的个性化属性值；对复合组件中的子组件进行渲染时，若检测到个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作；可见，在对复合组件进行渲染时，通过将复合组件中本身设置的子组件的属性和动态注入的属性进行融合，然后传递给渲染函数进行处理，就可以动态修改子组件属性的能力，可以解决灵活设置子组件的属性，使得子组件的属性即可以在设计期设计，也可以在运行期设计，可以满足更多的业务场景。

Description

一种复合组件中子组件属性的动态修改方法及装置

技术领域

本发明涉及复合组件属性修改技术领域，更具体地说，涉及一种复合组件中子组件属性的动态修改方法及装置。

背景技术

复合组件是一种前端组件，是将多个组件组合而成的一种组件。目前，将各个子组件组合成一个复合组件之后，复合组件就看做是一个独立的组件，其开放的属性经常根据做组件时的业务场景来确定，当遇到新的业务场景时，如果想修改某个子组件的属性，但是并没有对外开放，使得复合组件的灵活性受到限制。例如：假设有一个复合组件物料规格型号组件，选择物料之后会自动将规格型号携带显示出来。在设计时，标签的属性名叫做物料，满足出厂时的需求，并且此名称没有属性开放出来可以修改，在客户现场，客户可能想将此标签修改为仓储物料，就无法进行修改，需要重新对组件做相关调整才行。可见，由于子组件的属性不能修改，所以只能满足固定业务场景，灵活性差，在别的业务场景中使用该组件时，复合组件需要重新修改才能使用，导致使用成本和维护成本升高。

因此，如何修改复合组件中子组件的属性，减少使用成本和维护成本，是本领域技术人员需要解决的问题。

发明内容

本发明的目的在于提供一种复合组件中子组件属性的动态修改方法及装置，以实现修改复合组件中子组件的属性，减少使用成本和维护成本。

为实现上述目的，本发明实施例提供了如下技术方案：

一种复合组件中子组件属性的动态修改方法，包括：

确定待修改属性的子组件，生成与所述子组件对应的个性化值；

将所述个性化值存入复合组件的个性化属性值；

对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作。

其中，所述将所述个性化值存入复合组件的个性化属性值，包括：

将所述个性化值以JSON结构存入复合组件的个性化属性值。

其中，所述确定待修改属性的子组件，生成与所述子组件对应的个性化值，包括：

判断待修改属性的子组件是否标记了ref属性；

若是，则生成与待修改属性的子组件的ref属性对应的个性化值。

其中，所述对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作，包括：

对复合组件中的子组件进行渲染时，根据待渲染子组件的ref属性，判断所述个性化属性值中是否存在与待渲染子组件对应的个性化值；

若存在，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再通过渲染函数对待渲染子组件执行渲染操作；

若不存在，则直接通过渲染函数对待渲染子组件执行渲染操作。

一种复合组件中子组件属性的动态修改装置，包括：

个性化值生成模块，用于确定待修改属性的子组件，生成与所述子组件对应的个性化值；

存储模块，用于将所述个性化值存入复合组件的个性化属性值；

个性化值融合模块，用于对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合；

渲染模块，用于将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，执行渲染操作。

其中，所述存储模块将所述个性化值以JSON结构存入复合组件的个性化属性值。

其中，所述个性化值生成模块包括：

属性判断单元，用于判断待修改属性的子组件是否标记了ref属性；

个性化值生成单元，用于在待修改属性的子组件标记了ref属性时，生成与待修改属性的子组件的ref属性对应的个性化值。

其中，所述个性化值融合模块包括：

个性化值判断单元，用于对复合组件中的子组件进行渲染时，根据待渲染子组件的ref属性，判断所述个性化属性值中是否存在与待渲染子组件对应的个性化值；

融合单元，用于在所述个性化属性值中存在与待渲染子组件对应的个性化值时，将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合；

所述渲染模块，用于将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，通过渲染函数对待渲染子组件执行渲染操作；在所述个性化属性值中不存在与待渲染子组件对应的个性化值时，直接通过渲染函数对待渲染子组件执行渲染操作。

通过以上方案可知，本发明实施例提供的一种复合组件中子组件属性的动态修改方法，包括：确定待修改属性的子组件，生成与所述子组件对应的个性化值；将所述个性化值存入复合组件的个性化属性值；对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作；

可见，在本方案中，在对复合组件进行渲染时，通过将复合组件中本身设置的子组件的属性和动态注入的属性进行融合，然后传递给渲染函数进行处理，就可以动态修改子组件属性的能力，可以解决灵活设置子组件的属性，使得子组件的属性即可以在设计期设计，也可以在运行期设计，可以满足更多的业务场景；本发明还公开了一种复合组件中子组件属性的动态修改装置，同样能实现上述技术效果。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例公开的一种复合组件中子组件属性的动态修改方法流程示意图；

图2为本发明实施例公开的一种复合组件中子组件属性的动态修改装置结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例公开了一种复合组件中子组件属性的动态修改方法及装置，以实现修改复合组件中子组件的属性，减少使用成本和维护成本。

参见图1，本发明实施例提供的一种复合组件中子组件属性的动态修改方法，包括：

S101、确定待修改属性的子组件，生成与所述子组件对应的个性化值；

其中，所述确定待修改属性的子组件，生成与所述子组件对应的个性化值，包括：

判断待修改属性的子组件是否标记了ref属性；

若是，则生成与待修改属性的子组件的ref属性对应的个性化值。

具体的，复合组件的最大优势就是可以进一步的抽象出更多的符合业务场景的可复用的组件，加快产品的开发速度，提供开发能力和交付能力。但通常来说，复合组件都具有较为复杂的结构特性，从页面结构的层面来看，可能嵌套多个子组件，每个子组件可能嵌套在不同的容器，这样就使得复合组件的结构是层次性的，可能A子组件在第一层，B子组件在第二层，C子组件在第三层，但复合组件与业务场景息息相关，每个复合组件开放的属性、事件都与当时的业务场景相关，这些对外开放的接口决定了复合组件所提供的能力，但复合组件不可能将所有子组件的属性和事件都开放出来，主要为满足当时的业务场景为准，即使当时考虑了扩展性，也未必能满足另外业务场景下需要的组件形态。

但是在运行期，复合组件的渲染是递归进行的，也就是每一个复合组件都会调用统一的渲染方法进行展示处理。如果在渲染的时候我们可以动态的注入组件的属性和事件，就可以动态的修改组件的外观和能力，因此在渲染的时候我们可以增加一个扩展点，每次渲染一个组件时，将复合组件中本身设置的子组件的属性和动态注入的属性进行融合，然后传递给渲染函数进行处理，就可以动态修改子组件属性的能力。

但子组件的结构是层次性的，不可能将结构存储起来，因此动态的设置子组件是扁平化存储的，每个子组件都应该与父组件建立关系，参见本实施例提供的组件结构：

在本实施例中通过ref属性建立当前组件与父组件的关系；需要说明的是，在本实施例的关系建立不使用id的原因是id重复的可能性较大，即使id是通过复合组件的id合并计算而来，也会随着组件层级的加深而导致复杂性提升，因此使用简单的ref属性来建立关联，只有标记了ref属性的组件才可以动态的设置其属性。因此在本方案中，生成与子组件对应的个性化值之前，需要判断待修改属性的子组件是否标记了ref属性，如果标价了ref属性，则生成与待修改属性的子组件的ref属性对应的个性化值。

S102、将所述个性化值存入复合组件的个性化属性值；

其中，所述将所述个性化值存入复合组件的个性化属性值，包括：

将所述个性化值以JSON结构存入复合组件的个性化属性值。

具体的，当确定子组件的个性化值后，则将个性化值以最简单的JSON结构进行数据的保存，并且是只对需要动态修改的子组件才会做个性化存储，上述待修改组件的个性化值存放在复合组件的个性化属性值中。

S103、对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作。

其中，所述对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作，包括：

对复合组件中的子组件进行渲染时，根据待渲染子组件的ref属性，判断所述个性化属性值中是否存在与待渲染子组件对应的个性化值；

若存在，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再通过渲染函数对待渲染子组件执行渲染操作；

若不存在，则直接通过渲染函数对待渲染子组件执行渲染操作。

具体的，在运行期渲染时，从复合组件的个性化属性值查找是否存在与待渲染子组件对应的个性化值，如果存在，则和复合组件中的值进行融合再做渲染。这样就可以保证子组件的属性即使未开放属性，也可以动态的修改。

下面通过一个具体实施例对现有技术中存在的问题进行描述：

假设有两个组件分别是label组件和input组件，包含的属性参见表1及表2：

表1

表2

现在要做一个组件，叫做material物料组件，他包含了两个label和一个input，结构如下：

组件Material对外的属性参见表3：

表3

需要注意的是，组件material开放的属性，并没有包含input的class属性和type属性，也没有包含label的class属性，当使用material组件时，只能设置它的id，class，value等属性，input和lable的其他属性无法控制，也就是现有技术中，无法对复合组件未开放的属性进行修改，下面通过一个具体实施例对本方案进行详细描述：

假设物料组件中包含了两个label组件，还有一个input组件。假设填写了一个LeTV遥控板物料，现有技术的存储为：

这样的话，如果想将第一个label的标题修改为仓储物料，input的设置为红色背景，因为这两个组件属于materail的子组件，并且没有开放的属性可以进行设置，现有的技术无法做到这一点；因此在本方案中，待修改的子组件为lable组件的text属性，和input组件的class属性，并且通过上述组件结构可知，lable组件的ref属性值为1，input组件的ref属性值为2，则lable组件和input组件生成的对应的个性化值为：

可见，在本方案中增加了对ref＝1的lable组件的text属性的设置，增加了对ref＝2的input组件的class属性的设置。当运行期渲染的时候，现有技术的渲染顺序如下：

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

|----label渲染【渲染第一个标签】

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

|----label渲染【渲染第二个标签】

而本方案中的在复合组件的个性化属性值中增加了对ref＝1的lable组件的text属性的设置，增加了对ref＝2的input组件的class属性的设置，因此本方案的渲染过程如下：

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

|----label渲染【渲染第一个标签，但会融合ref＝1的label组件的text属性之后才渲染】

|----input渲染【渲染输入框，但会融合ref＝2的label组件的class属性之后才渲染】

|----label渲染【渲染第二个标签】

综上可见，在本发明中通过子组件的个性化属性与复合组件建立关系，通过建立这种关系，就可以通过插入点的方式抽象出组件的变化性并进行扩展，从而提升复合组件灵活性，满足多个场景的应用，保证了复合组件维护的简洁性，使得可以通过插入点的方式对组件进行扩展，隔离了变化性。

下面对本发明实施例提供的修改装置进行介绍，下文描述的修改装置与上文描述的修改方法可以相互参照。

参见图2，本发明实施例提供的一种复合组件中子组件属性的动态修改装置，包括：

个性化值生成模块100，用于确定待修改属性的子组件，生成与所述子组件对应的个性化值；

存储模块200，用于将所述个性化值存入复合组件的个性化属性值；

个性化值融合模块300，用于对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合；

渲染模块400，用于将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，执行渲染操作。

基于上述实施例，所述存储模块将所述个性化值以JSON结构存入复合组件的个性化属性值。

基于上述实施例，所述个性化值生成模块包括：

属性判断单元，用于判断待修改属性的子组件是否标记了ref属性；

个性化值生成单元，用于在待修改属性的子组件标记了ref属性时，生成与待修改属性的子组件的ref属性对应的个性化值。

基于上述实施例，所述个性化值融合模块包括：

个性化值判断单元，用于对复合组件中的子组件进行渲染时，根据待渲染子组件的ref属性，判断所述个性化属性值中是否存在与待渲染子组件对应的个性化值；

融合单元，用于在所述个性化属性值中存在与待渲染子组件对应的个性化值时，将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合；

所述渲染模块，用于将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，通过渲染函数对待渲染子组件执行渲染操作；在所述个性化属性值中不存在与待渲染子组件对应的个性化值时，直接通过渲染函数对待渲染子组件执行渲染操作。

本发明实施例提供的一种复合组件中子组件属性的动态修改方法，包括：确定待修改属性的子组件，生成与所述子组件对应的个性化值；将所述个性化值存入复合组件的个性化属性值；对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作；

可见，在本方案中，在对复合组件进行渲染时，通过将复合组件中本身设置的子组件的属性和动态注入的属性进行融合，然后传递给渲染函数进行处理，就可以动态修改子组件属性的能力，可以解决灵活设置子组件的属性，使得子组件的属性即可以在设计期设计，也可以在运行期设计，可以满足更多的业务场景；本发明还公开了一种复合组件中子组件属性的动态修改装置，同样能实现上述技术效果。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (8)

1.一种复合组件中子组件属性的动态修改方法，其特征在于，包括：

确定待修改属性的子组件，生成与所述子组件对应的个性化值；

将所述个性化值存入复合组件的个性化属性值；

对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作。

2.根据权利要求1所述的动态修改方法，其特征在于，所述将所述个性化值存入复合组件的个性化属性值，包括：

将所述个性化值以JSON结构存入复合组件的个性化属性值。

3.根据权利要求1或2所述的动态修改方法，其特征在于，所述确定待修改属性的子组件，生成与所述子组件对应的个性化值，包括：

判断待修改属性的子组件是否标记了ref属性；

若是，则生成与待修改属性的子组件的ref属性对应的个性化值。

4.根据权利要求3所述的动态修改方法，其特征在于，所述对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再执行渲染操作，包括：

对复合组件中的子组件进行渲染时，根据待渲染子组件的ref属性，判断所述个性化属性值中是否存在与待渲染子组件对应的个性化值；

若存在，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，再通过渲染函数对待渲染子组件执行渲染操作；

若不存在，则直接通过渲染函数对待渲染子组件执行渲染操作。

5.一种复合组件中子组件属性的动态修改装置，其特征在于，包括：

个性化值生成模块，用于确定待修改属性的子组件，生成与所述子组件对应的个性化值；

存储模块，用于将所述个性化值存入复合组件的个性化属性值；

个性化值融合模块，用于对复合组件中的子组件进行渲染时，若检测到所述个性化属性值中存在与待渲染子组件对应的个性化值，则将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合；

渲染模块，用于将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，执行渲染操作。

6.根据权利要求5所述的动态修改装置，其特征在于，

所述存储模块将所述个性化值以JSON结构存入复合组件的个性化属性值。

7.根据权利要求5或6所述的动态修改装置，其特征在于，所述个性化值生成模块包括：

属性判断单元，用于判断待修改属性的子组件是否标记了ref属性；

个性化值生成单元，用于在待修改属性的子组件标记了ref属性时，生成与待修改属性的子组件的ref属性对应的个性化值。

8.根据权利要求7所述的动态修改装置，其特征在于，所述个性化值融合模块包括：

个性化值判断单元，用于对复合组件中的子组件进行渲染时，根据待渲染子组件的ref属性，判断所述个性化属性值中是否存在与待渲染子组件对应的个性化值；

融合单元，用于在所述个性化属性值中存在与待渲染子组件对应的个性化值时，将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合；

所述渲染模块，用于将待渲染子组件的复合组件默认值与待渲染子组件的个性化值进行融合后，通过渲染函数对待渲染子组件执行渲染操作；在所述个性化属性值中不存在与待渲染子组件对应的个性化值时，直接通过渲染函数对待渲染子组件执行渲染操作。