CN112306461A - 通用前端组件实现方法、装置及存储介质 - Google Patents

Abstract

本发明实施方式提供一种通用前端组件实现方法，属于软件技术领域。所述方法包括：通过重写的方式继承目标组件内的部分或所有的方法和属性，形成重写组件；定义外部接口，所述外部接口用于提供给外部以调用所述重写组件内的属性和\或方法；采用自定义标签封装定义后的重写组件，形成通用组件；当开发中需要引用所述通用组件以实现所述通用组件对应的功能时，通过引用所述通用组件的所述自定义标签进行调用。同时还提供了一种通用前端组件实现装置。本发明的该实施例适用于WEB前端的组件编写环境，并能降低前端组件的开发成本和维护成本。

Description

通用前端组件实现方法、装置及存储介质

技术领域

本发明涉及软件技术领域，具体地涉及一种通用前端组件实现方法，及一种通用前端组件实现装置、一种通用前端组件库以及对应的存储介质。

背景技术

Web前端技术发展迅速，技术先进、体验更好的前端组件框架层出不穷，业务需求也变化频繁。现有的前端组件实现方案一般会选择某一第三方组件库集成，前端应用与所选用的组件库是强依赖关系，前端组件库的升级和迭代需要前端业务应用同步改造。由于多处地方都可能引用相同的目标组件，在需要替换该目标组件或者扩展该目标组件时，要对每一处使用这段目标组件的地方作更改，具有较高的开发成本和维护成本。

目前的前端项目中，都是在页面中直接引用第三方目标组件，即有多少个页面要用这个组件，就写多少段相同的代码片段。对于需要更改该目标组件时，就会非常麻烦，需要修改多处地方，导致开发成本高。

由此可见，现有编写代码方式存在如下缺点：第三方目标组件与项目代码耦合程度高，不利于项目代码的扩展；想要替换第三方组件时，需要更改每一处使用了该目标组件的地方，开发和维护成本巨大，而且很影响系统的稳定性。

发明内容

本发明实施方式的目的是提供一种通用前端组件的实现方法及装置，以至少解决目前前端项目中引用现有目标组件时存在的封装、复用及扩展问题。

为了实现上述目的，在本发明第一方面，提供一种通用前端组件实现方法，所述方法包括：

通过重写的方式继承目标组件内的部分或所有的方法和属性，形成重写组件；

定义外部接口，所述外部接口用于提供给外部以调用所述重写组件或扩充后重写组件内的属性和\或方法；

采用自定义标签封装定义后的重写组件或定义后的扩充后重写组件，形成通用组件；

当开发中需要引用所述通用组件以实现所述通用组件对应的功能时，通过引用所述通用组件的所述自定义标签进行调用。

可选的，当存在功能变化需求时，对所述重写组件内的属性和\或方法进行扩充，形成扩充后重写组件；并通过以下步骤替换原定义外部接口和标签封装，形成通用组件：

定义外部接口，所述外部接口用于提供给外部以调用所述扩充后重写组件内的属性和\或方法；

采用自定义标签封装定义后的扩充后重写组件，形成通用组件。

可选的，所述对重写组件的属性和\或方法进行扩充，形成扩充后重写组件，包括：

在所述重写组件外部新增属性和\或方法，以扩充所述重写组件的功能，形成扩充后重写组件。

可选的，所述在重写组件外部新增属性和\或方法，包括：

将新增的属性和\或方法的名称与所述重写组件内的属性和\或方法的名称设置为相同，以覆盖所述重写组件内同名的属性和\或方法。

可选的，所述方法还包括：通过改变新增的属性和\或方法，以改变所述通用组件的功能。

可选的，所述方法还包括：当所述通用组件中与所述目标组件相关的内容需要更新时，采用新通用组件替换所述通用组件；所述新通用组件包括更新后的目标组件内容，以及与所述通用组件相同的自定义标签。

可选的，若所述外部接口需要被更新，所述更新通过以下方式实现：所述外部接口中的属性通过重新赋值进行更新，所述外部接口中的方法通过在所述通用组件中增加消息传递函数进行更新。

在本发明的第二方面，还提供一种通用前端组件实现装置，所述装置包括：存储器和处理器；

所述存储器，用于存储程序指令；

所述处理器，用于调用所述存储器中存储的所述程序指令以实现如前述的通用前端组件实现方法。

在本发明的第三方面，还提供一种通用前端组件库，所述通用前端组件库包括若干前述的通用前端组件，所述通用前端组件通过前述的方法实现，并以提供调用标签的方式以供前端进行调用。

在本发明的第四方面，还提供一种机器可读存储介质，所述机器可读存储介质上存储有指令，该指令在被控制器执行时能够使得所述控制器执行前述的通用前端组件实现方法。

本发明提供的通用前端组件实现方法，具有以下优点：通过用自定义标签组件封装目标组件的方式，将新生成的标签组件暴露给外部使用，当需要修改组件或者更换目标组件时，只需更改自定义的标签组件中的代码，就能实现全局的替换并使得更改生效。该方法提升了代码编写中的便捷程度，减小了组件修改对整个系统的影响，同时减少了开发成本和维护成本。

本发明实施方式的其它特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本发明实施方式的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明实施方式，但并不构成对本发明实施方式的限制。在附图中：

图1是本发明一种实施方式提供的通用组件实现方法的步骤流程图；

图2是本发明一种实施方式提供的通用组件的结构示意图。

具体实施方式

以下结合附图对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

在本发明实施方式中，在未作相反说明的情况下，使用的方位词如“上、下、顶、底”通常是针对附图所示的方向而言的或者是针对竖直、垂直或重力方向上而言的各部件相互位置关系描述用词。

图1是本发明一种实施方式提供的通用组件实现方法的步骤流程图，如图1所示，一种通用前端组件实现方法，所述方法包括：

通过重写的方式继承目标组件内的部分或所有的方法和属性，形成重写组件；

定义外部接口，所述外部接口用于提供给外部以调用所述重写组件内的属性和\或方法；

采用自定义标签封装定义后的重写组件，形成通用组件；

当开发中需要引用所述通用组件以实现所述通用组件对应的功能时，通过引用所述通用组件的所述自定义标签进行调用。

如此，能够将现有组件库中的目标组件进行一定的封装，使其成为通用组件后再进行使用。在开发过程中，当现有组件被使用时，能够不重复写入现有组件的软件代码，而是通过调用该软件代码的对应的标签来实现，仅用少量的代码就能实现对现有组件的功能调用，并减少了目标组件与整体代码的耦合性，能够进行方便地对前端页面中的组件进行扩展和替换。

具体的，组件是实现特定功能的一段代码，现有的前端组件实现方案是选择现有的组件库，该组件库可能是由第三方组件库集成的。在目前的前端开发中在需要组件的地方，通过引用该组件的代码来实现。而本发明的实施例先将目标组件适配为通用组件后，能够通过调用通用组件的标签来调用目标组件，以实现该组件的功能。

该方法还包括配置所述通用组件的外部接口，所述外部接口用于提供给外部以调用所述通用组件内部的属性和\或方法。

现有技术中，如果是在对一个已有的组件进行扩展和重写，或者是利用一个已有的组件对多个组件进行组合，那么，此时产出的组件是和原组件强耦合。此处的强耦合是指原组件中的属性和方法会被产出组件完全拥有的，外部也可以调用，这是不可控制的。此方法减少了调用过程中的灵活性。而本实施方式中组件定义方可以控制需要暴露给外部调用的属性或者方法，其主要也是通过新增代码中的自定义属性和方法来实现的。用户可在新增代码中自行定义需要暴露给外部的属性和方法，以提供一个外部接口供调用。将自定义属性赋值给目标组件的属性，这样便可以控制新组件需暴露给外部的属性。

该新增代码不仅包括若干自定义的属性和方法，还包括了通用组件的标签，该标签成为了该通用组件的标识，能够通过引用通用组件的标签来调用该通用组件，是实现该通用组件中的原目标组件的功能。以下为现有目标组件适配为通用组件的代码示例：

在本发明的一种实施方式中，当存在功能变化需求时，对所述重写组件内的属性和\或方法进行扩充，形成扩充后重写组件；并通过以下步骤替换原定义外部接口和标签封装，形成通用组件：

定义外部接口，所述外部接口用于提供给外部以调用所述扩充后重写组件内的属性和\或方法；采用自定义标签封装定义后的扩充后重写组件，形成通用组件。

在通用组件中定义自己的属性和方法，其代码示例如下：

当对原第三方组件中的功能的需求发生变化时，仅通过对原重写组件进行扩充，以对应地实现对通用组件的功能扩充，用于满足具体场合的功能需要。对扩充后的重写组件，同样地进行定义外部接口和标签封装的步骤，以得到一个通用组件。并同样的，当开发中需要引用所述通用组件以实现所述通用组件对应的功能时，通过引用所述通用组件的所述自定义标签进行调用。本实施方式的优点在于能够根据现实需求对重写组件进行扩充，以实现满足新功能需求的新的通用组件，避免了大幅改动组件代码。

在本发明的一种实施方式中，所述对重写组件的属性和\或方法进行扩充，形成扩充后重写组件，包括：

在所述重写组件外部新增属性和\或方法，以扩充所述重写组件的功能，形成扩充后重写组件。

在本发明的一种实施方式中，所述方法还包括：所述在重写组件外部新增属性和\或方法，包括：将新增的属性和\或方法的名称与所述重写组件内的属性和\或方法的名称设置为相同，以覆盖所述重写组件内同名的属性和\或方法。

以上实施方式举出了一种通用组件的实现方法。继承是将目标组件的属性或已有的方法不作任何修改，通过新的组件重新暴露给外部使用，保持原有的属性名或方法名和使用方式、所具备的功能；重写是修改原有的属性或方法，使暴露给外部使用的属性或方法具备和原目标组件的属性或方法不同的功能，以适应业务的需要。通过以上封装和改写的步骤，能够使原来的目标组件的引用更为灵活，功能的扩展更为简单。当需要对写组件内的属性和\或方法进行覆盖时，写入新增的属性和\或方法，并将将新增的属性和\或方法的名称与所述重写组件内的属性和\或方法的名称设置为相同，即能够覆盖重写组件内的属性和\或方法。通过通用组件发生标签调用时，优先调用新增的属性和\或方法。

图2是本发明一种实施方式提供的通用组件的结构示意图(图2中仅给出了完全继承的方式，且属性和方法的数量不构成限定)，如图2所示：通用组件中的功能能够根据实际的需要进行扩展和改变，其扩展和改变可以通过新增代码或者目标组件的改变来实现。以下分别从通用组件中的新增代码和目标组件的两个方面的改动进行分别说明。

所述方法还包括：通过改变新增的属性和\或方法，以改变所述通用组件的功能。

如前述，通用组件中能够定义自己的属性和方法，即props:{属性代码}和methods:{方法代码}，通过增加其中的属性代码和和\或方法代码，能够增加其对应的功能，或者通过改动其中的属性代码和和\或方法代码，能够改动其对应的功能。例如：将自定义方法(方法名为：handleConfirm)，与目标组件的方法(方法名为：confirm)绑定，并在methods:{方法代码}中增加如下代码：

handleConfirm(value,index){

this.currentValue＝false

this.toast(′选择成功′)

this.$emit(′confirm′,{value,index})

}

在每个引用了该通用组件的页面中绑定confirm方法，在confirm方法被调用后，都会执行新增的代码this.toast(′选择成功′)，由此实现对原方法的扩充。

在本发明的一种实施方式中，所述方法还包括：当所述通用组件中与所述目标组件相关的内容需要更新时，采用新通用组件替换所述通用组件；所述新通用组件包括更新后的目标组件内容，以及与所述通用组件相同的自定义标签。

当目标组件发生变动或更新时，本发明的实施例也无需去对引用该目标组件的所有地方进行对应的修改。而是通过在封装此目标组件的通用组件中进行相应的修改即可。具体的，将新目标组件按前述方法适配为新的通用组件，但是还是采用原通用组件的标签，那么在通过标签引用的前端程序中，无需修改即自然替换为同样标签的新的通用组件，由此实现全局的替换并使得更改生效，其便捷程度显著提升，减小了对整个系统的影响，因此减少了开发和维护的成本。

可选的，若所述外部接口需要被更新，所述更新通过以下方式实现：所述外部接口中的属性通过重新赋值进行更新，所述外部接口中的方法通过在所述通用组件中增加消息传递函数进行更新。

本实施例中，外部接口中的属性和方法除了在定义外部接口时进行确定外，还能够在使用过程中对外部接口进行更新。用自定义标签封装目标组件；为自定义的标签定义好需要暴露给外部使用属性或者方法。而在新组件中对目标组件方法作绑定，并在绑定方法通过$emit等消息传递函数的方式，重新暴露一个方法给外部，可以实现对目标组件原方法的功能扩充。

在本发明提供的一种实施方式中，还提供一种通用前端组件实现装置，所述装置包括：存储器和处理器；所述存储器，用于存储程序指令所述处理器，用于调用所述存储器中存储的所述程序指令以实现如前述的通用前端组件实现方法。此处所述装置通常为PC，具有程序执行功能和运行WEB前端的开发功能，能够提供前述的组件的开发环境，在代码开发或代码修改阶段，通过前述的通用前端组件实现方法，得到通用组件来提升开发效率。

在本发明提供的一种实施方式中，还提供了一种通用前端组件库，所述组件库的组件通过前述的方法实现，并以提供调用标签的方式以供前端进行调用。如前所述，现有的三方开发的前端组件库均是提供了代码程序的形式，并没有提供一种灵活方便的引用方式。而本发明此处提供的通用前端组件库，集成了原有组件的代码，提供了原代码对应的功能，同时还提供了调用标签这种灵活方便的引用方式，能够方便开发者的使用，显著提供开发效率。

在本发明提供的一种实施方式中，还提供一种机器可读存储介质，所述机器可读存储介质上存储有指令，该指令在被控制器执行时能够使得所述控制器执行前述的通用前端组件实现方法。

本发明上述技术方案能够适用于WEB前端的目标组件编写环境，并能降低前端目标组件的开发成本和维护成本。

以上结合附图详细描述了本发明的可选实施方式，但是，本发明实施方式并不限于上述实施方式中的具体细节，在本发明实施方式的技术构思范围内，可以对本发明实施方式的技术方案进行多种简单变型，这些简单变型均属于本发明实施方式的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本发明实施方式对各种可能的组合方式不再另行说明。

本领域技术人员可以理解实现上述实施方式的方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序存储在一个存储介质中，包括若干指令用以使得单片机、芯片或处理器(processor)执行本发明各个实施方式所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明实施方式的思想，其同样应当视为本发明实施方式所公开的内容。

Claims (10)

1.一种通用前端组件的实现方法，其特征在于，所述方法包括：

通过重写的方式继承目标组件内的部分或所有的方法和属性，形成重写组件；

定义外部接口，所述外部接口用于提供给外部以调用所述重写组件内的属性和\或方法；

采用自定义标签封装定义后的重写组件，形成通用组件；

当开发中需要引用所述通用组件以实现所述通用组件对应的功能时，通过引用所述通用组件的所述自定义标签进行调用。

2.根据权利要求1所述的方法，其特征在于，当存在功能变化需求时，对所述重写组件内的属性和\或方法进行扩充，形成扩充后重写组件；并通过以下步骤替换原定义外部接口和标签封装，形成通用组件：

定义外部接口，所述外部接口用于提供给外部以调用所述扩充后重写组件内的属性和\或方法；

采用自定义标签封装定义后的扩充后重写组件，形成通用组件。

3.根据权利要求2所述的方法，所述对重写组件的属性和\或方法进行扩充，形成扩充后重写组件，包括：

在所述重写组件外部新增属性和\或方法，以扩充所述重写组件的功能，形成扩充后重写组件。

4.根据权利要求3所述的方法，其特征在于，所述在重写组件外部新增属性和\或方法，包括：

将新增的属性和\或方法的名称与所述重写组件内的属性和\或方法的名称设置为相同，以覆盖所述重写组件内同名的属性和\或方法。

5.根据权利要求3所述的方法，其特征在于，所述方法还包括：通过改变新增的属性和\或方法，以改变所述通用组件的功能。

6.根据权利要求1或2所述的方法，其特征在于，所述方法还包括：当所述通用组件中与所述目标组件相关的内容需要更新时，采用新通用组件替换所述通用组件；所述新通用组件包括更新后的目标组件内容，以及与所述通用组件相同的自定义标签。

7.根据权利要求1或2所述的方法，其特征在于，若所述外部接口需要被更新，所述更新通过以下方式实现：所述外部接口中的属性通过重新赋值进行更新，所述外部接口中的方法通过在所述通用组件中增加消息传递函数进行更新。

8.一种通用前端组件实现装置，其特征在于，所述装置包括：存储器和处理器；

所述存储器，用于存储程序指令；

所述处理器，用于调用所述存储器中存储的所述程序指令以实现如权利要求1至6中任一项权利要求所述的通用前端组件实现方法。

9.一种通用前端组件库，其特征在于，所述通用前端组件库包括若干通用前端组件；所述通用前端组件通过权利要求1至6中任一项权利要求所述的方法实现，并以提供调用标签的方式以供前端进行调用。

10.一种机器可读存储介质，其特征在于，所述机器可读存储介质上存储有指令，该指令在被控制器执行时能够使得所述控制器执行权利要求1至6中任一项权利要求所述的方法。

Images