多应用之间组件复用的方法和装置与流程

1.本发明涉及计算机技术领域，尤其涉及一种多应用之间组件复用的方法和装置。


背景技术：

2.在平时开发过程中，会遇到如下场景：一个项目a中有一些需要开发的功能模块(或业务组件)在其他项目b中已存在，但是，由于不同项目所使用的技术栈(某项工作或某个职位需要掌握的一系列技能组合的统称)不同，而导致这个功能模块无法被多个项目复用。在该场景下，为了减少代码量，一般会通过webpack等模块打包工具将该功能模块与其所在的项目b进行打包得到一个应用，并通过接口调用的方式来调用该应用以将该功能模块引入项目a中。
3.在实现本发明过程中，发明人发现现有技术中至少存在如下问题：
4.通过入口打包这样的做法进行功能模块的共享，会导致同一个项目的各个业务组件之间的状态无法很好的共享，因此，无法完全实现组件的复用。


技术实现要素：

5.有鉴于此，本发明实施例提供一种多应用之间组件复用的方法和装置，能够使得不同开发框架等技术栈开发出来的组件可以复用，从而实现了减少代码量和开发工作量。
6.为实现上述目的，根据本发明实施例的一个方面，提供了一种多应用之间组件复用的方法。
7.一种多应用之间组件复用的方法，包括：使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；响应于组件引用请求，根据所述引用路由从所述远程仓库中下载封装后的组件；通过引用方式传参的方式调用所述封装后的组件以进行组件复用。
8.可选地，使用可复用的用户接口组件对待复用的组件进行封装包括：创建一个函数来指定所述待复用的组件的功能；根据应用需求创建自定义元素，并设置所述自定义元素的显示位置；生成组件调用接口以完成封装。
9.可选地，还包括：将应用包括的所有组件的状态数据放置在页面最顶端的同一个文档对象化模型下，不同的组件通过事件冒泡的方式以实现组件状态共享。
10.可选地，将应用包括的所有组件的状态数据放置在页面最顶端的同一个文档对象化模型下包括：在页面最顶端的文档对象化模型中定义一个祖先根节点，作为状态数据的挂载点；将应用包括的所有组件的状态数据放置在所述祖先根节点下。
11.可选地，所述组件引用请求包括组件标识；根据所述引用路由从所述远程仓库中下载封装后的组件之前，还包括：根据所述组件标识从缓存节点服务器中查找对应的组件，以及，确定所述缓存节点服务器中不存在对应的组件；根据所述引用路由从所述远程仓库中下载封装后的组件之后，还包括：将下载的封装后的组件保存在缓存节点服务器中。
12.可选地，将下载的封装后的组件保存在缓存节点服务器中包括：把所述缓存节点
服务器中的所有组件合并成单个文件进行保存。
13.可选地，所述可复用的用户接口组件为web components。
14.根据本发明实施例的另一方面，提供了一种多应用之间组件复用的装置。
15.一种多应用之间组件复用的装置，包括：组件封装模块，用于使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；组件下载模块，用于响应于组件引用请求，根据所述引用路由从所述远程仓库中下载封装后的组件；组件调用模块，用于通过引用方式传参的方式调用所述封装后的组件以进行组件复用。
16.可选地，所述组件封装模块还用于：创建一个函数来指定所述待复用的组件的功能；根据应用需求创建自定义元素，并设置所述自定义元素的显示位置；生成组件调用接口以完成封装。
17.可选地，所述装置还包括状态处理模块，用于：将应用包括的所有组件的状态数据放置在页面最顶端的同一个文档对象化模型下，不同的组件通过事件冒泡的方式以实现组件状态共享。
18.可选地，所述状态处理模块还用于：在页面最顶端的文档对象化模型中定义一个祖先根节点，作为状态数据的挂载点；将应用包括的所有组件的状态数据放置在所述祖先根节点下。
19.可选地，所述组件引用请求包括组件标识；所述组件下载模块还用于：在根据所述引用路由从所述远程仓库中下载封装后的组件之前，根据所述组件标识从缓存节点服务器中查找对应的组件，以及，确定所述缓存节点服务器中不存在对应的组件；在根据所述引用路由从所述远程仓库中下载封装后的组件之后，将下载的封装后的组件保存在缓存节点服务器中。
20.可选地，所述组件下载模块还用于：把所述缓存节点服务器中的所有组件合并成单个文件进行保存。
21.可选地，所述可复用的用户接口组件为web components。
22.根据本发明实施例的又一方面，提供了一种多应用之间组件复用的电子设备。
23.一种多应用之间组件复用的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所提供的多应用之间组件复用的方法。
24.根据本发明实施例的再一方面，提供了一种计算机可读介质。
25.一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的多应用之间组件复用的方法。
26.上述发明中的一个实施例具有如下优点或有益效果：通过使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；响应于组件引用请求，根据引用路由从远程仓库中下载封装后的组件；通过引用方式传参的方式调用封装后的组件以进行组件复用，实现了在不对待复用的组件进行入口打包的情况下，使用可复用的用户接口组件对待复用的组件进行封装，使得不同开发框架等技术栈开发出来的组件可以复用，从而实现了减少代码量和开发工作量。
27.上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
28.附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
29.图1是根据本发明实施例的多应用之间组件复用的方法的主要步骤示意图；
30.图2是本发明实施例的组件共享原理示意图；
31.图3是根据本发明实施例的多应用之间组件复用的装置的主要模块示意图；
32.图4是本发明实施例可以应用于其中的示例性系统架构图；
33.图5是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
34.以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
35.在同一个系统中，a项目的需求在b项目中可能已有现成的组件或者页面，那么，为了减少代码量以及开发工作量，就需要将a项目的需求和b项目融合在一起。然而，现实开发过程中，由于每个项目的技术栈不一样(例如：a项目和b项目所使用的开发框架不同)，那么，就无法直接实现将项目a和项目b融合在一起，无法实现两个项目中的相同组件的复用。为了解决该技术问题，本发明提供了一种多应用之间组件复用的方法，可以解决不同项目融合在一起时，相同的公共组件的复用以及状态的共享。
36.图1是根据本发明实施例的多应用之间组件复用的方法的主要步骤示意图。如图1所示，本发明实施例的多应用之间组件复用的方法主要包括如下的步骤s101至步骤s103。
37.步骤s101：使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；
38.步骤s102：响应于组件引用请求，根据引用路由从远程仓库中下载封装后的组件；
39.步骤s103：通过引用方式传参的方式调用封装后的组件以进行组件复用。
40.在开发的过程中，由于业务线的需求，开发的应用可能会需要其他团队的协作，但是每个团队的项目技术栈不太一样或者应用的颗粒度不一样，因此无法做到开发的功能组件直接复用。本发明通过上述的步骤s101至步骤s103，即可在不对待复用的组件进行入口打包的情况下，使用可复用的用户接口组件对待复用的组件进行封装，使得不同开发框架等技术栈开发出来的组件可以复用，从而实现了减少代码量和开发工作量。
41.图2是本发明实施例的组件共享原理示意图。在本发明的实施例中，由于一个应用可能依赖于不同的技术栈的多个组件，那么为了实现跨应用的组件共享，本发明首先建立了一个基于微服务的待复用组件的模块仓库，把能共享的组件统一放在远程仓库中；然后在整个系统中引入需要使用的组件，定义好路由引用调用。应用对组件的引入过程：引入模块
→
向远程仓库发送请求
→
下载组件
→
在系统中加载。
42.到此组件就可以正常使用了，但是不同框架开发出来的组件差异性非常大，想要融合在一个应用中使用难度很大，为了解决该问题，本发明通过可复用的用户接口组件web components来实现组件的共享使用。
43.web components可以将开发的可复用的组件以web组件的形式展现出来，目前大多数的前端开发技术栈框架都支持web components的使用。web components为可复用的组件提供了强大的封装，会对外公开一些方法或接口api，当要访问web components的命令式api时，直接使用ref(让参数按照引用传递)与dom节点(dom节点是指在xml文档中的每个成分都是一个节点)进行交互即可，即：通过引用方式传参的方式来调用封装后的组件。
44.根据本发明的实施例，使用可复用的用户接口组件对待复用的组件进行封装具体可以包括：
45.创建一个函数来指定该待复用的组件的功能；
46.根据应用需求创建自定义元素，并设置该自定义元素的显示位置；
47.生成组件调用接口以完成封装。
48.web components在对组件进行封装时，也可以进行定制化功能实现，它提供了自定义元素，影子dom和html模版等。具体地，在对组件进行封装时，具体流程如下：
49.1、创建一个函数来指定组件的功能；
50.2、使用customelements.define()方法来注册新定义的元素，并传递一些属性和需要继承的元素等，从而实现了创建自定义元素；
51.3、可以设置在页面任何位置使用该自定义元素；
52.4、影子dom和html模版也可以使用，以用于对组件的代码进行隐藏等操作。
53.利用web components的形式可以让不同技术栈的组件融合在一起使用，但是同一个应用内部的多个组件之间，需要共享状态来实现具体的功能。为了实现组件状态的共享，根据本发明的实施例，将应用包括的所有组件的状态数据放置在页面最顶端的同一个文档对象化模型(dom tree)下，不同的组件通过事件冒泡的方式以实现组件状态共享。具体地，将应用包括的所有组件的状态数据放置在页面最顶端的同一个文档对象化模型下包括：
54.在页面最顶端的文档对象化模型中定义一个祖先根节点，作为状态数据的挂载点；
55.将应用包括的所有组件的状态数据放置在所述祖先根节点下。
56.在具体实现时，可以通过定义一个祖先根节点作为所有组件的状态数据的挂载点，当某个组件的状态数据发生变更后，会生成一个事件，然后通过事件传播的形式传播到祖先根节点。而各个组件均将其状态数据挂载了祖先根节点，通过对祖先根节点的监听，即可获取到所有组件的状态变更，这样就不会限制组件的位置，也就是说组件在任何位置都能状态共享。在渲染的过程中，仍然可以去控制不同技术栈的组件的生命周期的运行，不会破坏事件的传播，通过这样的封装即可让组件的状态数据通过事件冒泡传播的形式共享。
57.根据本发明的其中一个实施例，组件引用请求包括组件标识；并且，在根据所述引用路由从远程仓库中下载封装后的组件之前，还包括：根据组件标识从缓存节点服务器中查找对应的组件，以及，确定缓存节点服务器中不存在对应的组件。另外，根据引用路由从远程仓库中下载封装后的组件之后，还包括：将下载的封装后的组件保存在缓存节点服务器中。
58.在具体应用中，如果一个页面需要依赖很多组件，那么，当从组件远程仓库中下载组件时，就有可能会出现一些性能问题，为了进行性能优化，本发明中在组件请求的过程中增加了一层node服务(即：缓存节点服务器)，在请求的过程中将所有下载的组件保存到
node服务器硬盘上，然后下次请求该组件的时候就会直接去返回静态资源了，从而减小了带给服务器的压力。其中，在将组件保存到node服务器时，可以将该多个组件合并成单个文件保存在node服务器硬盘上，以减少内存的占用。
59.图3是根据本发明实施例的多应用之间组件复用的装置的主要模块示意图。如图3所示，本发明实施例的多应用之间组件复用的装置300主要包括组件封装模块301、组件下载模块302和组件调用模块303。
60.组件封装模块301，用于使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；
61.组件下载模块302，用于响应于组件引用请求，根据所述引用路由从所述远程仓库中下载封装后的组件；
62.组件调用模块303，用于通过引用方式传参的方式调用所述封装后的组件以进行组件复用。
63.根据本发明的一个实施例，组件封装模块301还可以用于：
64.创建一个函数来指定所述待复用的组件的功能；
65.根据应用需求创建自定义元素，并设置所述自定义元素的显示位置；
66.生成组件调用接口以完成封装。
67.根据本发明的另一个实施例，多应用之间组件复用的装置300还包括状态处理模块(图中未示出)，用于：将应用包括的所有组件的状态数据放置在页面最顶端的同一个文档对象化模型下，不同的组件通过事件冒泡的方式以实现组件状态共享。
68.根据本发明的又一个实施例，状态处理模块还可以用于：在页面最顶端的文档对象化模型中定义一个祖先根节点，作为状态数据的挂载点；将应用包括的所有组件的状态数据放置在所述祖先根节点下。
69.根据本发明的又一个实施例，所述组件引用请求包括组件标识；组件下载模块302还可以用于：在根据所述引用路由从所述远程仓库中下载封装后的组件之前，根据所述组件标识从缓存节点服务器中查找对应的组件，以及，确定所述缓存节点服务器中不存在对应的组件；在根据所述引用路由从所述远程仓库中下载封装后的组件之后，将下载的封装后的组件保存在缓存节点服务器中。
70.根据本发明的又一个实施例，组件下载模块302还可以用于：把所述缓存节点服务器中的所有组件合并成单个文件进行保存。
71.根据本发明的再一个实施例，所述可复用的用户接口组件为web components。
72.根据本发明实施例的技术方案，通过使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；响应于组件引用请求，根据引用路由从远程仓库中下载封装后的组件；通过引用方式传参的方式调用封装后的组件以进行组件复用，实现了在不对待复用的组件进行入口打包的情况下，使用可复用的用户接口组件对待复用的组件进行封装，使得不同开发框架等技术栈开发出来的组件可以复用，从而实现了减少代码量和开发工作量。
73.图4示出了可以应用本发明实施例的多应用之间组件复用的方法或多应用之间组件复用的装置的示例性系统架构400。
74.如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405。
网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
75.用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。终端设备401、402、403上可以安装有各种前端和客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。
76.终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
77.服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的组件复用请求等数据进行分析，并使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；响应于组件引用请求，根据所述引用路由从所述远程仓库中下载封装后的组件；通过引用方式传参的方式调用所述封装后的组件以进行组件复用等处理，并将处理结果(例如可复用的组件
‑‑
仅为示例)反馈给终端设备。
78.需要说明的是，本发明实施例所提供的多应用之间组件复用的方法一般由服务器405执行，相应地，多应用之间组件复用的装置一般设置于服务器405中。
79.应该理解，图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
80.下面参考图5，其示出了适于用来实现本发明实施例的终端设备或服务器的计算机系统500的结构示意图。图5示出的终端设备或服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
81.如图5所示，计算机系统500包括中央处理单元(cpu)501，其可以根据存储在只读存储器(rom)502中的程序或者从存储部分508加载到随机访问存储器(ram)503中的程序而执行各种适当的动作和处理。在ram 503中，还存储有系统500操作所需的各种程序和数据。cpu 501、rom 502以及ram 503通过总线504彼此相连。输入/输出(i/o)接口505也连接至总线504。
82.以下部件连接至i/o接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至i/o接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。
83.特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(cpu)501执行时，执行本发明的系统中限定的上述功能。
84.需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不
限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd
‑
rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。
85.附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
86.描述于本发明实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括组件封装模块、组件下载模块和组件调用模块。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，组件封装模块还可以被描述为“用于使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由的模块”。
87.作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；响应于组件引用请求，根据所述引用路由从所述远程仓库中下载封装后的组件；通过引用方式传参的方式调用所述封装后的组件以进行组件复用。
88.根据本发明实施例的技术方案，通过使用可复用的用户接口组件对待复用的组件进行封装，并放置在远程仓库中，生成引用路由；响应于组件引用请求，根据引用路由从远程仓库中下载封装后的组件；通过引用方式传参的方式调用封装后的组件以进行组件复用，实现了在不对待复用的组件进行入口打包的情况下，使用可复用的用户接口组件对待复用的组件进行封装，使得不同开发框架等技术栈开发出来的组件可以复用，从而实现了
减少代码量和开发工作量。
89.上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。