CN114064033A - 前端组件化开发方法、装置、电子设备及可读存储介质 - Google Patents
前端组件化开发方法、装置、电子设备及可读存储介质 Download PDFInfo
- Publication number
- CN114064033A CN114064033A CN202111362655.XA CN202111362655A CN114064033A CN 114064033 A CN114064033 A CN 114064033A CN 202111362655 A CN202111362655 A CN 202111362655A CN 114064033 A CN114064033 A CN 114064033A
- Authority
- CN
- China
- Prior art keywords
- webpage
- parent
- page
- sub
- web page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 62
- 238000011161 development Methods 0.000 title claims abstract description 37
- 238000004891 communication Methods 0.000 claims abstract description 67
- 238000012544 monitoring process Methods 0.000 claims abstract description 25
- 238000012545 processing Methods 0.000 claims abstract description 24
- 238000004590 computer program Methods 0.000 claims description 14
- 238000010276 construction Methods 0.000 claims description 11
- 230000005540 biological transmission Effects 0.000 claims description 7
- 238000000638 solvent extraction Methods 0.000 claims description 4
- 230000001360 synchronised effect Effects 0.000 claims description 4
- 238000005457 optimization Methods 0.000 abstract description 2
- 230000008569 process Effects 0.000 description 20
- 230000006870 function Effects 0.000 description 14
- BHPQYMZQTOCNFJ-UHFFFAOYSA-N Calcium cation Chemical compound [Ca+2] BHPQYMZQTOCNFJ-UHFFFAOYSA-N 0.000 description 6
- 230000000903 blocking effect Effects 0.000 description 6
- 230000000694 effects Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 5
- 238000007726 management method Methods 0.000 description 5
- 238000013473 artificial intelligence Methods 0.000 description 3
- 230000010365 information processing Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000035945 sensitivity Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及系统性能优化领域，揭露一种前端组件化开发方法，包括：构建父网页页面及多个子网页页面，建立每个所述子网页页面与所述父网页页面之间的通信链路，根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。本发明还提出一种前端组件化开发装置、设备以及存储介质。本发明可以提高网页解决问题的效率。
Description
技术领域
本发明涉及系统性能优化领域，尤其涉及一种前端组件化开发方法、装置、电子设备及可读存储介质。
背景技术
前端开发是创建web页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
传统前端界面的多个web页面之间常常因为技术栈的架构版本不统一，会出现多个web页面之间难以兼容的问题，除此之外，当用户输入指令代码时，由于多个web页面消息无法共通，导致无法同时在多个web页面进行同步处理用户输入的指令及代码，从而导致网页处理问题的效率降低。
发明内容
本发明提供一种前端组件化开发方法、装置、电子设备及计算机可读存储介质，其目的在于提高网页解决问题的效率。
为实现上述目的，本发明提供的一种前端组件化开发方法，包括：
构建父网页页面及多个子网页页面；
建立每个所述子网页页面与所述父网页页面之间的通信链路；
根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
可选地，所述构建父网页页面及多个子网页页面，包括：
构建所述父网页框架的DOM树与影子DOM树以及每个所述子网页框架的DOM树与影子DOM树；
设置所述父网页框架的DOM树的页面规则，得到父页面规则，及设置所述子网页框架的DOM树的页面规则，得到子页面规则；
利用所述父页面规则构建父页面规则文档，以及利用子页面规则构建子页面规则文档；
将所述父页面规则文档中的字节内容转换成字符，并根据所述父页面规则组合成多个属性-属性值对，并将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树；
将所述子页面规则文档中的字节内容转换成字符，并根据所述子页面规则组合成多个属性-属性值对，并将子网页框架中多个所述属性-属性值对转换成树节点后链接至所述子网页框架的DOM树以及子网页框架的影子DOM树，得到所述子网页框架的完整影子DOM树；
根据所述父网页框架的完整影子DOM树，利用预设页面绘制工具绘制所述父网页框架的页面，得到父网页页面，并根据所述子网页框架的完整影子DOM树，利用所述页面绘制工具绘制子网页框架的页面，得到子网页页面。
可选地，所述将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树，包括：
将所述父网页框架的属性-属性值对转化为所述父网页框架的影子DOM树中的CSS树节点；
配置所述父网页框架的影子DOM树中每个树节点的CSS样式；
根据所述父网页框架的影子DOM树的每个树节点与CSS树节点的对应关系，将对应的CSS树节点链接至所述父网页框架的影子DOM树的树节点，得到所述父网页框架的完整影子DOM树。
可选地，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
获取所述子网页页面的网页链接；
按照预设高度，对所述父网页页面进行页面分块，得到网页块；
根据所述网页链接，将所述子网页页面按比例缩小填充进所述网页块中，实现所述子网页页面与所述父网页页面的数据通信，得到通信链路。
可选地，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
响应所述子网页页面的传输请求，在所述子网页页面中创建需求请求，并将所述需求请求发送给所述父网页页面；
所述父网页页面响应所述需求请求，将需求数据传输给所述子网页页面，完成所述通信链路的构建。
可选地，所述采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，包括：
当任意一个所述子网页页面接收到所述用户输入的搜索信息时，所述子网页页面触发预定义的事件指令，将所述搜索信息传输至所述父网页页面；
所述父网页页面接收所述搜索信息，并根据所述搜索信息发出事件处理指令给其余子网页页面。
可选地，所述使得所述父网页页面形成组件化同步服务架构之后，所述方法还包括：
实时监视每个所述子网页页面的实际高度；
当所述子网页页面出现内容遮挡问题时，利用所述通信链路对所述子网页实际高度进行调整。
为了解决上述问题，本发明还提供一种前端组件化开发装置，所述装置包括：
页面构建模块，用于构建父网页页面及多个子网页页面；
通信链路构建模块，用于建立每个所述子网页页面与所述父网页页面之间的通信链路；
同步服务架构构建模块，用于根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：
存储器，存储至少一个计算机程序；及
处理器，执行所述存储器中存储的计算机程序以实现上述所述的前端组件化开发方法。
为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的前端组件化开发方法。
本发明提出的前端组件化开发方法、装置、电子设备及计算机可读存储介质通过构建父网页页面及多个子网页页面，建立每个所述子网页页面与所述父网页页面之间的通信链路，并根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构，能够同步处理用户输入的指令及代码，从而提高网页处理问题的效率。
附图说明
图1为本发明一实施例提供的前端组件化开发方法的流程示意图；
图2为本发明一实施例提供的前端组件化开发装置的模块示意图；
图3为本发明一实施例提供的实现前端组件化开发方法的电子设备的内部结构示意图；
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
本发明实施例提供一种前端组件化开发方法。所述前端组件化开发方法的执行主体包括但不限于服务端、终端等能够被配置为执行本申请实施例提供的该方法的电子设备中的至少一种。换言之，所述前端组件化开发方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端可以包括独立的服务器，也可以包括提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(ContentDelivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。
参照图1所示的本发明一实施例提供的前端组件化开发方法的流程示意图，在本发明实施例中，所述前端组件化开发方法包括：
S1、构建父网页页面及多个子网页页面。
本发明实施例首先构建一个父网页框架以及多个子网页框架，并对所述父网页框架以及所述子网页框架进行页面构建，得到所述父网页页面及多个子网页页面。其中，所述父网页框架是能够链接其他子网页的整体功能网页框架，及所述所述子网页框架是可存在于所述父网页框架中并具有一定功能的子功能网页框架。例如，将百度浏览器网页及361浏览器网页链接在一个页面框架中，所述页面框架就是父页面框架，所述百度浏览器网页及361浏览器网页是子网页框架。本发明实施例中，每个所述子网页框架都能够独立实现既定功能。
详细地，所述构建父网页页面及多个子网页页面，包括：
构建所述父网页框架的DOM树与影子DOM树，以及构建每个所述子网页框架的DOM树与影子DOM树；
设置所述父网页框架的DOM树的页面规则，得到父页面规则，及设置所述子网页框架的DOM树的页面规则，得到子页面规则；
利用所述父页面规则构建父页面规则文档，以及利用子页面规则构建子页面规则文档；
将所述父页面规则文档中的字节内容转换成字符，并根据所述父页面规则组合成多个属性-属性值对，并将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树；
将所述子页面规则文档中的字节内容转换成字符，并根据所述子页面规则组合成多个属性-属性值对，并将子网页框架中多个所述属性-属性值对转换成树节点后链接至所述子网页框架的DOM树以及子网页框架的影子DOM树，得到所述子网页框架的完整影子DOM树；
根据所述父网页框架的完整影子DOM树，利用预设页面绘制工具绘制所述父网页框架的页面，得到父网页页面，并根据所述子网页框架的完整影子DOM树，利用所述页面绘制工具绘制子网页框架的页面，得到子网页页面。
本发明实施例中，所述DOM树可以是用户独立编写的多个代码块，并利用所述代码块中的主体代码块以及嵌套代码块组成的多层树的关系结构，例如“我的电脑”主体代码块里面嵌套着“C盘”以及“D盘”等嵌套代码块，进一步地，每个盘里有着很多的文件夹，文件夹里又嵌套着文件夹，逐层打开文件的过程相当于从根节点遍历到叶子节点的过程，主体与嵌套体构成一棵结构关系树，即为DOM树。所述影子DOM树是隐藏在DOM树后的且可以完成DOM树中所包含的功能的一个多层树结构。
进一步地，所述将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树，包括：
将所述父网页框架的属性-属性值对转化为所述父网页框架的影子DOM树中的CSS树节点；
配置所述父网页框架的影子DOM树中每个树节点的CSS样式；
根据所述父网页框架的影子DOM树的每个树节点与CSS树节点的对应关系，将对应的CSS树节点链接至所述父网页框架的影子DOM树的树节点，得到所述父网页框架的完整影子DOM树。
本发明实施例中，所述CSS可以是一种用来表现HTML或XML等文件样式的计算机语言。
进一步地，所述将子网页中多个所述属性-属性值对转换成树节点后链接至所述子网页框架的DOM树以及子网页框架的影子DOM树，与上述将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树步骤相同，故此不赘述。
S2、建立每个所述子网页页面与所述父网页页面之间的通信链路。
本发明实施例中，所述通信链路可以是所述子网页页面与所述父网页页面进行数据共享的通道，进一步地，构建通信链路的双方需要具有共同的语言。
本发明一可选实施例中，可利用网页分块技术构建每个所述子网页页面与所述父网页页面之间的通信链路，其中，所述网页分块技术可以利用div加css实现。
详细地，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
获取所述子网页页面的网页链接；
按照预设高度，对所述父网页页面进行页面分块，得到网页块；
根据所述网页链接，将所述子网页页面按比例缩小填充进所述网页块中，实现所述子网页页面与所述父网页页面的数据通信，得到通信链路。
本发明一可选实施例中，所述预设高度可以是根据子网页数量及父网页总体高度进行限定的，如子网页数量为2，父网页总体高度为100，则可以限定所述子网页高度均为50。
本发明实施例中，通过网页分块技术将所述子网页页面镶嵌进所述父网页页面中，完成子网页页面与父网页页面之间通信链路的构建，方便用户在进行问题搜索的时候可同时在多个子网页中进行搜索，扩大了搜索范围，从而为提高了解决用户问题的概率。
除此之外，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，也可以包括：
响应所述子网页页面的传输请求，在所述子网页页面中创建需求请求，并将所述需求请求发送给所述父网页页面；
所述父网页页面响应所述需求请求，将需求数据传输给所述子网页页面，完成所述通信链路的构建。
本发明实施例中，所述传输请求可以是根据所述子网页页面接收到用户输入的信息，向所述父网页页面申请传输所述用户输入的信息的请求。所述需求请求可以是获取父网页页面中的数据的请求信息，用以同步处理用户输入的数据信息。
S3、根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
本发明实施例中，所述消息监听指的是所述父页面对所述用户在任意一个子页面输入的信息进行监视的过程。所述搜索信息可以是用户根据自身需求在任意一个所述子网页中进行搜索的相关消息。
本发明实施例中，通过信息监听的手段实现组件化同步，减少了用户搜索的延迟时间，提高了用户解决问题的效率。
详细地，所述采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，包括：
当任意一个所述子网页页面接收到所述用户输入的搜索信息时，所述子网页页面触发预定义的事件指令，将所述搜索信息传输至所述父网页页面；
所述父网页页面接收所述搜索信息，并根据所述搜索信息发出事件处理指令给其余子网页页面，从而实现所有子页面同步处理。
本发明实施例中，所述事件处理指令可以是父网页页面根据接收的所述搜索信息生成的搜索信息处理指令。
本发明一可选实施例中，当所述用户在百度浏览器页面中输入“钙元素对人体的作用”时，父网页页面通过消息监听的方式向另一子网页360浏览器页面发送“钙元素对人体的作用”的搜索指令，因此，在用户视觉上，所述百度浏览器页面与所述360浏览器页面同时处理“钙元素对人体的作用”这一搜索指令。
本发明另一可选实施例中，当所述子网页页面对同一搜索信息进行处理时，容易出现其中一个子网页页面出现八条解决方案，其余的子网页页面均只有五条解决方案，此时，解决方案较多的子网页页面容易出现解决方案被遮挡的情况。
因此，详细地，使得所述父网页页面形成组件化同步服务架构之后，所述方法还包括：
实时监视每个所述子网页页面的实际高度；
当所述子网页页面出现内容遮挡问题时，利用所述通信链路对所述子网页实际高度进行调整。
本发明实施例中，通过实时调整所述子网页页面的实际高度，优化了父网页页面，提高了用户的体验好感度。
本发明提出的前端组件化开发方法通过构建父网页页面及多个子网页页面，建立每个所述子网页页面与所述父网页页面之间的通信链路，并根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构，能够同步处理用户输入的指令及代码，从而提高网页处理问题的效率。
如图2所示，是本发明前端组件化开发装置的功能模块图。
本发明所述前端组件化开发装置100可以安装于电子设备中。根据实现的功能，所述前端组件化开发装置可以包括页面构建模块101、通信链路构建模块102及同步服务架构构建模块103，本发所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。
在本实施例中，关于各模块/单元的功能如下：
所述页面构建模块101用于构建父网页页面及多个子网页页面。
本发明实施例首先构建一个父网页框架以及多个子网页框架，并对所述父网页框架以及所述子网页框架进行页面构建，得到所述父网页页面及多个子网页页面。其中，所述父网页框架是能够链接其他子网页的整体功能网页框架，及所述所述子网页框架是可存在于所述主网页框架中并具有一定功能的子功能网页框架。例如，将百度浏览器网页及361浏览器网页链接在一个页面框架中，所述页面框架就是父页面框架，所述百度浏览器网页及361浏览器网页是子网页框架。本发明实施例中，每个所述子网页框架都能够独立实现既定功能。
详细地，所述构建父网页页面及多个子网页页面，包括：
构建所述父网页框架的DOM树与影子DOM树以及每个所述子网页框架的DOM树与影子DOM树；
设置所述父网页框架的DOM树的页面规则，得到父页面规则，及设置所述子网页框架的DOM树的页面规则，得到子页面规则；
利用所述父页面规则构建父页面规则文档，以及利用子页面规则构建子页面规则文档；
将所述父页面规则文档中的字节内容转换成字符，并根据所述父页面规则组合成多个属性-属性值对，并将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树；
将所述子页面规则文档中的字节内容转换成字符，并根据所述子页面规则组合成多个属性-属性值对，并将子网页框架中多个所述属性-属性值对转换成树节点后链接至所述子网页框架的DOM树以及子网页框架的影子DOM树，得到所述子网页框架的完整影子DOM树；
根据所述父网页框架的完整影子DOM树，利用预设页面绘制工具绘制所述父网页框架的页面，得到父网页页面，并根据所述子网页框架的完整影子DOM树，利用所述页面绘制工具绘制子网页框架的页面，得到子网页页面。
本发明实施例中，所述DOM树可以是用户独立编写的多个代码块，并利用所述代码块中的主体代码块以及嵌套代码块组成的多层树的关系结构，例如“我的电脑”主体代码块里面嵌套着“C盘”以及“D盘”等嵌套代码块，进一步地，每个盘里有着很多的文件夹，文件夹里又嵌套着文件夹，逐层打开文件的过程相当于从根节点遍历到叶子节点的过程，主体与嵌套体构成一棵结构关系树，即为DOM树。所述影子DOM树是隐藏在DOM树后的且可以完成DOM树中所包含的功能的一个多层树结构。
进一步地，所述将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树，得到所述父网页框架的完整影子DOM树，包括：
将所述父网页框架的属性-属性值对转化为所述父网页框架的影子DOM树中的CSS树节点；
配置所述父网页框架的影子DOM树中每个树节点的CSS样式；
根据所述父网页框架的影子DOM树的每个树节点与CSS树节点的对应关系，将对应的CSS树节点链接至所述父网页框架的影子DOM树的树节点，得到所述父网页框架的完整影子DOM树。
本发明实施例中，所述CSS可以是一种用来表现HTML或XML等文件样式的计算机语言。
进一步地，所述将子网页中多个所述属性-属性值对转换成树节点后链接至所述子网页框架的DOM树以及子网页框架的影子DOM树，与上述将父网页框架中多个所述属性-属性值对转换成树节点后链接至所述父网页框架的DOM树以及父网页框架的影子DOM树步骤相同，故此不赘述。
所述通信链路构建模块102用于建立每个所述子网页页面与所述父网页页面之间的通信链路。
本发明实施例中，所述通信链路可以是所述子网页页面与所述父网页页面进行数据共享的通道，进一步地，构建通信链路的双方需要具有共同的语言。
本发明一可选实施例中，可利用网页分块技术实现构建每个所述子网页页面与所述父网页页面之间的通信链路，其中所述网页分块技术可以利用div加css实现。
详细地，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
获取所述子网页页面的网页链接；
按照预设高度，对所述父网页页面进行页面分块，得到网页块；
根据所述网页链接，将所述子网页页面按比例缩小填充进所述网页块中，实现所述子网页页面与所述父网页页面的数据通信，得到通信链路。
本发明一可选实施例中，预设高度可以是根据子网页数量及父网页总体高度进行限定的，如子网页数量为2，父网页总体高度为100，则可以限定所述子网页高度均为50。
本发明实施例中，通过网页分块技术将所述子网页页面镶嵌进所述父网页页面中，完成子网页页面与父网页页面之间通信链路的构建，方便用户在进行问题搜索的时候可同时在多个子网页中进行搜索，扩大了搜索范围，从而为提高了解决用户问题的概率。
除此之外，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，也可以包括：
响应所述子网页页面的传输请求，在所述子网页页面中创建需求请求，并将所述需求请求发送给所述父网页页面；
所述父网页页面响应所述需求请求，将需求数据传输给所述子网页页面，完成所述通信链路的构建。
本发明实施例中，所述传输请求可以是根据所述子网页页面接收到用户输入的信息，向所述父网页页面申请传输所述用户输入的信息的请求。所述需求请求可以是获取父网页页面中的数据的请求信息，用以同步处理用户输入的数据信息。
所述同步服务架构构建模块103用于根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
本发明实施例中，所述消息监听指的是所述父页面对所述用户在任意一个子页面输入的信息进行监视的过程。所述搜索信息可以是用户根据自身需求在任意一个所述子网页中进行搜索的相关消息。
本发明实施例中，通过信息监听的手段实现组件化同步，减少了用户搜索的延迟时间，提高了用户解决问题的效率。
详细地，所述采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，包括：
当任意一个所述子网页页面接收到所述用户输入的搜索信息时，所述子网页页面触发预定义的事件指令，将所述搜索信息传输至所述父网页页面；
所述父网页页面接收所述搜索信息，并根据所述搜索信息发出事件处理指令给其余子网页页面，从而实现所有子页面同步处理。
本发明实施例中，所述事件处理指令可以是父网页页面根据接收的所述搜索信息生成的搜索信息处理指令。
本发明一可选实施例中，当所述用户在百度浏览器页面中输入“钙元素对人体的作用”时，父网页页面通过消息监听的方式向另一子网页360浏览器页面发送“钙元素对人体的作用”的搜索指令，因此，在用户视觉上，所述百度浏览器页面与所述360浏览器页面同时处理“钙元素对人体的作用”这一搜索指令。
本发明另一可选实施例中，当所述子网页页面对同一搜索信息进行处理时，容易出现其中一个子网页页面出现八条解决方案，其余的子网页页面均只有五条解决方案，此时，解决方案较多的子网页页面容易出现解决方案被遮挡的情况。
因此，详细地，使得所述父网页页面形成组件化同步服务架构之后，所述方法还包括：
实时监视每个所述子网页页面的实际高度；
当所述子网页页面出现内容遮挡问题时，利用所述通信链路对所述子网页实际高度进行调整。
本发明实施例中，通过实时调整所述子网页页面的实际高度，优化了父网页页面，提高了用户的体验好感度。
如图3所示，是本发明实现前端组件化开发方法的电子设备的结构示意图。
所述电子设备可以包括处理器10、存储器11、通信总线12和通信接口13，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如前端组件化开发程序。
其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备的外部存储设备，例如电子设备上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(SecureDigital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备的应用软件及各类数据，例如前端组件化开发程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。
所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如前端组件化开发程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备的各种功能和处理数据。
所述通信总线12可以是外设部件互连标准(perIPheral componentinterconnect，简称PCI)总线或扩展工业标准结构(extended industry standardarchitecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。所述通信总线12总线被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
图3仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图3示出的结构并不构成对所述电子设备的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。
例如，尽管未示出，所述电子设备还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。
可选地，所述通信接口13可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。
可选地，所述通信接口13还可以包括用户接口，用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。
应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。
所述电子设备中的所述存储器11存储的前端组件化开发程序是多个计算机程序的组合，在所述处理器10中运行时，可以实现：
构建父网页页面及多个子网页页面；
建立每个所述子网页页面与所述父网页页面之间的通信链路；
根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
具体地，所述处理器10对上述计算机程序的具体实现方法可参考图1对应实施例中相关步骤的描述，在此不赘述。
进一步地，所述电子设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。所述计算机可读介质可以是非易失性的，也可以是易失性的。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。
本发明实施例还可以提供一种计算机可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：
构建父网页页面及多个子网页页面；
建立每个所述子网页页面与所述父网页页面之间的通信链路；
根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
进一步地，所述计算机可用存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。
在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。
因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。
本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。
此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。
最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。
Claims (10)
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.如权利要求1所述的前端组件化开发方法，其特征在于，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
获取所述子网页页面的网页链接；
按照预设高度，对所述父网页页面进行页面分块，得到网页块；
根据所述网页链接，将所述子网页页面按比例缩小填充进所述网页块中，实现所述子网页页面与所述父网页页面的数据通信，得到通信链路。
5.如权利要求1所述的前端组件化开发方法，其特征在于，所述构建每个所述子网页页面与所述父网页页面之间的通信链路，包括：
响应所述子网页页面的传输请求，在所述子网页页面中创建需求请求，并将所述需求请求发送给所述父网页页面；
所述父网页页面响应所述需求请求，将需求数据传输给所述子网页页面，完成所述通信链路的构建。
6.如权利要求1所述的前端组件化开发方法，其特征在于，所述采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，包括：
当任意一个所述子网页页面接收到所述用户输入的搜索信息时，所述子网页页面触发预定义的事件指令，将所述搜索信息传输至所述父网页页面；
所述父网页页面接收所述搜索信息，并根据所述搜索信息发出事件处理指令给其余子网页页面。
7.如权利要求1到6中任意一项所述的前端组件化开发方法，其特征在于，所述使得所述父网页页面形成组件化同步服务架构之后，所述方法还包括：
实时监视每个所述子网页页面的实际高度；
当所述子网页页面出现内容遮挡问题时，利用所述通信链路对所述子网页实际高度进行调整。
8.一种前端组件化开发装置，其特征在于，包括：
页面构建模块，用于构建父网页页面及多个子网页页面；
通信链路构建模块，用于建立每个所述子网页页面与所述父网页页面之间的通信链路；
同步服务架构构建模块，用于根据所述通信链路，采用消息监听的形式，在每个所述子网页页面同步处理用户在任意一个子网页页面中输入的搜索信息，以使得所述父网页页面形成组件化同步服务架构。
9.一种电子设备，其特征在于，所述电子设备包括：
至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的计算机程序指令，所述计算机程序指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任一项所述的前端组件化开发方法。
10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的前端组件化开发方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111362655.XA CN114064033A (zh) | 2021-11-17 | 2021-11-17 | 前端组件化开发方法、装置、电子设备及可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111362655.XA CN114064033A (zh) | 2021-11-17 | 2021-11-17 | 前端组件化开发方法、装置、电子设备及可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114064033A true CN114064033A (zh) | 2022-02-18 |
Family
ID=80273289
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111362655.XA Pending CN114064033A (zh) | 2021-11-17 | 2021-11-17 | 前端组件化开发方法、装置、电子设备及可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114064033A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115658046A (zh) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | 基于Web技术开发模块化UI交互组件的方法、装置 |
-
2021
- 2021-11-17 CN CN202111362655.XA patent/CN114064033A/zh active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115658046A (zh) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | 基于Web技术开发模块化UI交互组件的方法、装置 |
| CN115658046B (zh) * | 2022-12-13 | 2023-03-21 | 中国人民解放军国防科技大学 | 基于Web技术开发模块化UI交互组件的方法、装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111813963B (zh) | 知识图谱构建方法、装置、电子设备及存储介质 | |
| CN113238929B (zh) | 基于Mock数据的代码测试方法、装置、电子设备及存储介质 | |
| CN112486490B (zh) | 前端代码打包方法、装置、电子设备及存储介质 | |
| CN114844792B (zh) | 基于lua语言的动态监控方法、装置、设备及存储介质 | |
| CN112528307A (zh) | 服务请求校验方法、装置、电子设备及存储介质 | |
| CN115048111B (zh) | 基于元数据的代码生成方法、装置、设备及介质 | |
| CN113704665A (zh) | 动态服务发布方法、装置、电子设备及存储介质 | |
| CN112506486A (zh) | 搜索系统建立方法、装置、电子设备及可读存储介质 | |
| CN114064033A (zh) | 前端组件化开发方法、装置、电子设备及可读存储介质 | |
| CN113779528A (zh) | 多系统前端页面集成方法、装置、设备及介质 | |
| CN114398282A (zh) | 测试脚本的生成方法、装置、设备及存储介质 | |
| CN113360139A (zh) | 前端框架的集成方法、装置、电子设备及存储介质 | |
| CN115314570B (zh) | 基于协议开发框架的数据下发方法、装置、设备及介质 | |
| CN113139145B (zh) | 页面生成方法、装置、电子设备及可读存储介质 | |
| CN115827115A (zh) | 微信小程序的h5页面跳转方法、装置、设备及存储介质 | |
| CN115033605A (zh) | 数据查询方法、装置、电子设备及存储介质 | |
| CN114816371A (zh) | 消息处理方法、装置、设备及介质 | |
| CN114185522A (zh) | 页面主题定制方法、装置、电子设备及存储介质 | |
| CN111680204A (zh) | 数据采集方法、装置及计算机可读存储介 | |
| CN112051952A (zh) | 图片动态浏览方法、装置、电子设备及可读存储介质 | |
| CN113778447B (zh) | 前端系统的服务兼容方法、装置、电子设备及存储介质 | |
| CN117633075A (zh) | 微服务应用数据协同方法、装置、电子设备及存储介质 | |
| CN113885848A (zh) | 前端组件化开发方法、装置、电子设备及可读存储介质 | |
| CN113886446A (zh) | 作业自动调度方法、装置、电子设备及可读存储介质 | |
| CN114840210A (zh) | 数据驱动视图的实现方法、装置、电子设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |