本发明专利技术涉及系统性能优化领域，揭露一种前端组件化开发方法，包括：构建父网页页面及多个子网页页面，建立每个所述子网页页面与所述父网页页面之间的通信链路，根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。本发明专利技术还提出一种前端组件化开发装置、设备以及存储介质。本发明专利技术可以提高网页解决问题的效率。页解决问题的效率。页解决问题的效率。
【技术实现步骤摘要】
前端组件化开发方法、装置、电子设备及可读存储介质
[0001]本专利技术涉及系统性能优化领域，尤其涉及一种前端组件化开发方法、装置、电子设备及可读存储介质。
技术介绍
[0002]前端开发是创建web页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
[0003]传统前端界面的多个web页面之间常常因为技术栈的架构版本不统一，会出现多个web页面之间难以兼容的问题，除此之外，当用户输入指令代码时，由于多个web页面消息无法共通，导致无法同时在多个web页面进行同步处理用户输入的指令及代码，从而导致网页处理问题的效率降低。
技术实现思路
[0004]本专利技术提供一种前端组件化开发方法、装置、电子设备及计算机可读存储介质，其目的在于提高网页解决问题的效率。
[0005]为实现上述目的，本专利技术提供的一种前端组件化开发方法，包括：
[0006]构建父网页页面及多个子网页页面；
[0007]建立每个所述子网页页面与所述父网页页面之间的通信链路；
[0008]根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
[0009]可选地，所述构建父网页页面及多个子网页页面，包括：
[0010]构建所述父网页框架的DOM树与影子DOM树以及每个所述子网页框架的DOM树与影子DOM树；
[0011]设置所述父网页框架的DOM树的页面规则，得到父页面规则，及设置所述子网页框架的DOM树的页面规则，得到子页面规则；
[0012]利用所述父页面规则构建父页面规则文档，以及利用子页面规则构建子页面规则文档；
[0013]将所述父页面规则文档中的字节内容转换成字符，并根据所述父页面规则组合成多个属性
‑
属性值对，并将父网页框架中多个所述属性
‑
属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树；
[0014]将所述子页面规则文档中的字节内容转换成字符，并根据所述子页面规则组合成多个属性
‑
属性值对，并将子网页框架中多个所述属性
‑
属性值对转换成树节点后链接至所述子网页框架的DOM树以及子网页框架的影子DOM树，得到所述子网页框架的完整影子DOM
树；
[0015]根据所述父网页框架的完整影子DOM树，利用预设页面绘制工具绘制所述父网页框架的页面，得到父网页页面，并根据所述子网页框架的完整影子DOM树，利用所述页面绘制工具绘制子网页框架的页面，得到子网页页面。
[0016]可选地，所述将父网页框架中多个所述属性
‑
属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树，包括：
[0017]将所述父网页框架的属性
‑
属性值对转化为所述父网页框架的影子DOM树中的CSS树节点；
[0018]配置所述父网页框架的影子DOM树中每个树节点的CSS样式；
[0019]根据所述父网页框架的影子DOM树的每个树节点与CSS树节点的对应关系，将对应的CSS树节点链接至所述父网页框架的影子DOM树的树节点，得到所述父网页框架的完整影子DOM树。
[0020]可选地，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
[0021]获取所述子网页页面的网页链接；
[0022]按照预设高度，对所述父网页页面进行页面分块，得到网页块；
[0023]根据所述网页链接，将所述子网页页面按比例缩小填充进所述网页块中，实现所述子网页页面与所述父网页页面的数据通信，得到通信链路。
[0024]可选地，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
[0025]响应所述子网页页面的传输请求，在所述子网页页面中创建需求请求，并将所述需求请求发送给所述父网页页面；
[0026]所述父网页页面响应所述需求请求，将需求数据传输给所述子网页页面，完成所述通信链路的构建。
[0027]可选地，所述采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，包括：
[0028]当任意一个所述子网页页面接收到所述用户输入的搜索信息时，所述子网页页面触发预定义的事件指令，将所述搜索信息传输至所述父网页页面；
[0029]所述父网页页面接收所述搜索信息，并根据所述搜索信息发出事件处理指令给其余子网页页面。
[0030]可选地，所述使得所述父网页页面形成组件化同步服务架构之后，所述方法还包括：
[0031]实时监视每个所述子网页页面的实际高度；
[0032]当所述子网页页面出现内容遮挡问题时，利用所述通信链路对所述子网页实际高度进行调整。
[0033]为了解决上述问题，本专利技术还提供一种前端组件化开发装置，所述装置包括：
[0034]页面构建模块，用于构建父网页页面及多个子网页页面；
[0035]通信链路构建模块，用于建立每个所述子网页页面与所述父网页页面之间的通信链路；
[0036]同步服务架构构建模块，用于根据所述通信链路，采用消息监听的形式，在每个所
述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
[0037]为了解决上述问题，本专利技术还提供一种电子设备，所述电子设备包括：
[0038]存储器，存储至少一个计算机程序；及
[0039]处理器，执行所述存储器中存储的计算机程序以实现上述所述的前端组件化开发方法。
[0040]为了解决上述问题，本专利技术还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的前端组件化开发方法。
[0041]本专利技术提出的前端组件化开发方法、装置、电子设备及计算机可读存储介质通过构建父网页页面及多个子网页页面，建立每个所述子网页页面与所述父网页页面之间的通信链路，并根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构，能够同步处理用户输入的指令及代码，从而提高网页处理问题的效率。
附图说明
[0042]图1为本专利技术一实施例提供的前端组件化开发方法的流程示意图；
[0043]图2为本专利技术一实施例提供的前端组件化开发装置的模块示意图；
[0044]图3为本专利技术一实施例提供的实现前端组件化开发方法的电子设备的内部结构示意图；...
【技术保护点】
【技术特征摘要】
1.一种前端组件化开发方法，其特征在于，所述方法包括：构建父网页页面及多个子网页页面；建立每个所述子网页页面与所述父网页页面之间的通信链路；根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。2.如权利要求1所述的前端组件化开发方法，其特征在于，所述构建父网页页面及多个子网页页面，包括：构建所述父网页框架的DOM树与影子DOM树，以及构建每个所述子网页框架的DOM树与影子DOM树；设置所述父网页框架的DOM树的页面规则，得到父页面规则，及设置所述子网页框架的DOM树的页面规则，得到子页面规则；利用所述父页面规则构建父页面规则文档，以及利用子页面规则构建子页面规则文档；将所述父页面规则文档中的字节内容转换成字符，并根据所述父页面规则组合成多个属性
‑
属性值对，并将父网页框架中多个所述属性
‑
属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树；将所述子页面规则文档中的字节内容转换成字符，并根据所述子页面规则组合成多个属性
‑
属性值对，并将子网页框架中多个所述属性
‑
属性值对转换成树节点后链接至所述子网页框架的DOM树以及子网页框架的影子DOM树，得到所述子网页框架的完整影子DOM树；根据所述父网页框架的完整影子DOM树，利用预设页面绘制工具绘制所述父网页框架的页面，得到父网页页面，并根据所述子网页框架的完整影子DOM树，利用所述页面绘制工具绘制子网页框架的页面，得到子网页页面。3.如权利要求2所述的前端组件化开发方法，其特征在于，所述将父网页框架中多个所述属性
‑
属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树，包括：将所述父网页框架的属性
‑
属性值对转化为所述父网页框架的影子DOM树中的CSS树节点；配置所述父网页框架的影子DOM树中每个树节点的CSS样式；根据所述父网页框架的影子DOM树的每个树节点与CSS树节点的对应关系，将对应的CSS树节点链接至所述父网页框架的影子DOM树的树节点，得到所述父网页框架的完整影子DOM树。4.如权利要...
【专利技术属性】
技术研发人员：翁艺逢，段鹏，刘海东，
申请(专利权)人：招商局金融科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。