CN113268239A - 桌面应用的视图构建方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及研发管理领域，公开了桌面应用的视图构建方法、装置、设备及存储介质，用于提升应用页面渲染的效率。方法包括：根据初始化请求，构建electron框架的初始化环境，并基于初始化环境，运行electron框架，得到多个可调度的进程，调用主进程的辅助进程，创建窗口对象，并将项目文件夹中的MVC实例加载至窗口对象中，调用compiler子线程，监听项目文件夹中的MVC实例中代码是否发生变化，若发生变化，则对窗口对象中的目标MVC实例中进行热更新，并调用渲染进程，在窗口对象中对第三目标MVC实例进行渲染，得到桌面应用的视图，其中，所述渲染进程包括主线程和至少一个隐藏线程。此外，本发明还涉及区块链技术，桌面应用的视图可存储于区块链节点中。

Description

桌面应用的视图构建方法、装置、设备及存储介质

技术领域

本发明涉及研发管理领域，尤其涉及一种桌面应用的视图构建方法、装置、设备及存储介质。

背景技术

桌面应用electron框架用于开发桌面可安装的软件，该框架的后端采用了Node.js语法，且支持跨平台，开发者在使用该框架进行软件开发时，只需要专注于业务逻辑的实现，而不必关注技术细节，同时通过该框架内部的api接口调用系统功能，从而减少开发量，缩短开发周期。

现有基于electron框架的桌面应用的视图构建方法，由于框架内部使用的javascript语法为一种单线程机制，在渲染应用页面内容时效率低下，尤其时在进行一些计算密集型的应用页面渲染时，甚至可能造成应用的卡顿。

发明内容

本发明的主要目的在于解决现有桌面应用的视图构建方法在页面渲染时效率低下的问题。

本发明第一方面提供了一种桌面应用的视图构建方法，包括：

根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，所述初始化环境中包括项目文件夹，所述项目文件夹中包括模型视图控制器MVC实例，所述MVC实例中包括视图文件和控制器文件；

基于所述electron框架的初始化环境，运行所述electron框架，得到多个可调度的进程，其中，所述多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，所述webpack进程还包括compiler子线程；

调用所述主进程的辅助进程，创建窗口对象，并将所述项目文件夹中的MVC实例加载至所述窗口对象中；

调用所述compiler子线程，监听第一目标MVC实例中代码是否发生变化，若所述第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例，其中，所述第一目标MVC实例为所述项目文件夹中的MVC实例，所述第二目标MVC实例为所述窗口对象中的MVC实例；

调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图，其中，所述渲染进程包括一个主线程和至少一个隐藏线程。

可选的，在本发明第一方面的第一种实现方式中，所述根据用户输入的框架初始化请求，构建electron框架的初始化环境包括：

根据用户输入的框架初始化请求，调用预设指令对所述electron框架进行初始化，生成所述electron框架的初始化文件夹，其中，所述初始化文件夹中包括package.json文件和配置项文件；

基于预置业务逻辑，对所述配置项文件进行数据更新，以及获取预置依赖包，并将所述预置依赖包添加至所述package.json文件中，得到所述electron框架的初始化环境。

可选的，在本发明第一方面的第二种实现方式中，所述对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例包括：

对所述第一目标MVC实例中的代码进行编译，得到本地代码文件，其中，所述本地代码文件中包括第一哈希标识；

对所述第二目标MVC实例中的代码进行编译，得到应用代码文件，其中，所述应用代码文件中包括第二哈希标识；

将所述第一哈希标识与所述第二哈希标识进行比较，并基于比较结果，更新所述第二目标MVC实例，得到第三目标MVC实例。

可选的，在本发明第一方面的第三种实现方式中，所述调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图包括：

基于所述渲染进程中的远程对象，调用公共全局缓冲区，并将目标控制器文件中的路由参数保存至全局缓冲区中，其中，所述目标控制器文件为所述第三目标MVC实例中的控制器文件；

基于所述渲染进程的IPC对象，向所述主进程的辅助进程发送路由信号；

调用所述主进程的辅助进程，接收所述路由信号，并根据所述路由信号，获取所述全局缓冲区中的路由参数；

在所述窗口对象中输出所述路由参数，以及在所述窗口对象中加载目标视图文件对应的页面内容，得到桌面应用的视图，其中，所述目标视图文件为所述第三目标MVC实例中的视图文件。

可选的，在本发明第一方面的第四种实现方式中，所述在所述窗口对象中加载目标视图文件对应的页面内容包括：

遍历所述目标视图文件中的文档节点，并根据所述文档节点，生成所述目标视图文件对应的DOM节点树模型；

解析所述目标视图文件中的层叠样式表标记，并基于解析结果，生成所述目标视图文件对应的层叠样式表规则树模型；

根据所述DOM节点树模型与所述层叠样式表规则树模型，构建所述目标视图文件对应的渲染树模型；

基于所述目标视图文件对应的渲染树模型，将所述目标视图文件中的元素布局到所述渲染树模型对应的节点上；

将所述渲染树模型中的每个节点绘制到所述窗口对象中页面，得到目标视图文件对应的静态页面；

当接收到页面动态交互请求时，基于所述主线程和所述隐藏线程，并行执行目标javascript脚本中的至少两个事件，得到所述页面动态交互请求的响应结果，并基于所述响应结果，重载所述静态页面，得到所述目标视图文件对应的页面内容，其中，所述页面动态交互请求包括目标javascript脚本。

可选的，在本发明第一方面的第五种实现方式中，在调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图之后，还可以包括：

当项目开发完成时，对所述项目文件夹进行编译和打包，生成对应的桌面安装包。

可选的，在本发明第一方面的第六种实现方式中，在当项目开发完成时，对所述项目文件夹进行编译和打包，生成对应的桌面安装包之后，还可以包括：

接收桌面应用的更新请求，其中，所述更新请求包括更新指令、新版本号以及所述新版本号对应的数据包；

将所述新版本号对应的数据包添加到所述桌面应用对应的资源路径下，并根据所述更新指令自动引用所述新版本号对应的数据包。

本发明第二方面提供了一种桌面应用的视图构建装置，包括：

框架初始化模块，用于根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，所述初始化环境中包括项目文件夹，所述项目文件夹中包括模型视图控制器MVC实例，所述MVC实例中包括视图文件和控制器文件；

进程构建模块，用于基于所述electron框架的初始化环境，运行所述electron框架，得到多个可调度的进程，其中，所述多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，所述webpack进程还包括compiler子线程；

应用窗口生成模块，用于调用所述主进程的辅助进程，创建窗口对象，并将所述项目文件夹中的MVC实例加载至所述窗口对象中；

热更新模块，用于调用所述compiler子线程，监听第一目标MVC实例中代码是否发生变化，若所述第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例，其中，所述第一目标MVC实例为所述项目文件夹中的MVC实例，所述第二目标MVC实例为所述窗口对象中的MVC实例；

应用渲染模块，用于调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图，其中，所述渲染进程包括一个主线程和至少一个隐藏线程。

可选的，在本发明第二方面的第一种实现方式中，所述框架初始化模块具体用于：

文件夹生成单元，用于根据用户输入的框架初始化请求，调用预设指令对所述electron框架进行初始化，生成所述electron框架的初始化文件夹，其中，所述初始化文件夹中包括package.json文件和配置项文件；

参数配置单元，用于基于预置业务逻辑，对所述配置项文件进行数据更新，以及获取预置依赖包，并将所述预置依赖包添加至所述package.json文件中，得到所述electron框架的初始化环境。

可选的，在本发明第二方面的第二种实现方式中，所述热更新模块具体用于：

第一编译单元，用于对所述第一目标MVC实例中的代码进行编译，得到本地代码文件，其中，所述本地代码文件中包括第一哈希标识；

第二编译单元，用于对所述第二目标MVC实例中的代码进行编译，得到应用代码文件，其中，所述应用代码文件中包括第二哈希标识；

代码更新单元，用于将所述第一哈希标识与所述第二哈希标识进行比较，并基于比较结果，更新所述第二目标MVC实例，得到第三目标MVC实例。

可选的，在本发明第二方面的第三种实现方式中，所述应用渲染模块具体用于：

路由存储单元，用于基于所述渲染进程中的远程对象，调用公共全局缓冲区，并将目标控制器文件中的路由参数保存至全局缓冲区中，其中，所述目标控制器文件为所述第三目标MVC实例中的控制器文件；

信号输出单元，用于基于所述渲染进程的IPC对象，向所述主进程的辅助进程发送路由信号；

路由获取单元，用于调用所述主进程的辅助进程，接收所述路由信号，并根据所述路由信号，获取所述全局缓冲区中的路由参数；

桌面应用的视图单元，用于在所述窗口对象中输出所述路由参数，以及在所述窗口对象中加载目标视图文件对应的页面内容，得到桌面应用的视图，其中，所述目标视图文件为所述第三目标MVC实例中的视图文件。

可选的，在本发明第二方面的第四种实现方式中，所述桌面应用的视图单元具体用于：

遍历所述目标视图文件中的文档节点，并根据所述文档节点，生成所述目标视图文件对应的DOM节点树模型；

解析所述目标视图文件中的层叠样式表标记，并基于解析结果，生成所述目标视图文件对应的层叠样式表规则树模型；

根据所述DOM节点树模型与所述层叠样式表规则树模型，构建所述目标视图文件对应的渲染树模型；

基于所述目标视图文件对应的渲染树模型，将所述目标视图文件中的元素布局到所述渲染树模型对应的节点上；

将所述渲染树模型中的每个节点绘制到所述窗口对象中页面，得到目标视图文件对应的静态页面；

当接收到页面动态交互请求时，基于所述主线程和所述隐藏线程，并行执行目标javascript脚本中的至少两个事件，得到所述页面动态交互请求的响应结果，并基于所述响应结果，重载所述静态页面，得到所述目标视图文件对应的页面内容，其中，所述页面动态交互请求包括目标javascript脚本。

可选的，在本发明第二方面的第五种实现方式中，在所述桌面应用的视图单元之后，还包括：

当项目开发完成时，对所述项目文件夹进行编译和打包，生成对应的桌面安装包。

可选的，在本发明第二方面的第六种实现方式中，在所述桌面应用的视图单元之后，还包括：

接收桌面应用的更新请求，其中，所述更新请求包括更新指令、新版本号以及所述新版本号对应的数据包；

将所述新版本号对应的数据包添加到所述桌面应用对应的资源路径下，并根据所述更新指令自动引用所述新版本号对应的数据包。

本发明第三方面提供了一种桌面应用的视图构建设备，包括：存储器和至少一个处理器，所述存储器中存储有指令；所述至少一个处理器调用所述存储器中的所述指令，以使得所述桌面应用的视图构建设备执行上述的桌面应用的视图构建方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的桌面应用的视图构建方法。

本发明提供的技术方案中，通过构建框架的初始化环境后运行electron框架，产生多个可调度的进程，其次基于其中的主进程的辅助进程，创建应用窗口，并将业务逻辑代码加载至应用窗口的存储区中，然后监听本地文件夹中的业务逻辑代码是否发生变化，若发生变化，则对应用窗口中的业务逻辑代码同步更新，最后基于渲染进程的主线程和隐藏线程，并发执行渲染应用窗口中的业务逻辑代码中的多个事件，得到桌面应用的视图，从而提升应用页面渲染的效率，提高应用的流畅度。

附图说明

图1为本发明实施例中桌面应用的视图构建方法的第一个实施例示意图；

图2为本发明实施例中桌面应用的视图构建方法的第二个实施例示意图；

图3为本发明实施例中桌面应用的视图构建方法的第三个实施例示意图；

图4为本发明实施例中桌面应用的视图构建装置的一个实施例示意图；

图5为本发明实施例中桌面应用的视图构建装置的另一个实施例示意图；

图6为本发明实施例中桌面应用的视图构建设备的一个实施例示意图。

具体实施方式

本发明实施例提供了一种桌面应用的视图构建方法、装置、设备及存储介质，可以让生成的推荐内容更加准确。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中桌面应用的视图构建方法的一个实施例包括：

101、根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，初始化环境中包括项目文件夹，项目文件夹中包括模型视图控制器MVC实例，MVC实例中包括视图文件和控制器文件；

服务器首先根据用户输入的框架初始化请求，调用预设指令对electron框架进行初始化，生成对应的初始化文件夹，其中，初始化文件夹中包括package.json文件和配置项文件；其次基于预置业务逻辑，对配置项文件进行数据更新；然后获取预置的依赖包，并将预置依赖包添加至所述package.json文件中，以生成electron框架的初始化环境。

具体地，该初始化请求为electron(跨平台桌面程序electron框架)electron框架中封装的初始化指令，该指令属于electron官方在Github(开源代码社区、仓库)中提交的源码中的一部分，可以理解的是，用户在输入框架初始化请求指定之前，就已下载了Github网站中electronelectron框架的源码目录并形成对应的脚手架形式。

102、基于electron框架的初始化环境，运行electron框架，得到多个可调度的进程，其中，多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，webpack进程还包括compiler子线程；

服务器通过执行项目文件夹中运行入口文件(main.js文件)，以启动electronelectron框架，框架启动后内部执行各种进程模块程序，以生成相应的进程等待服务器调用，包括主进程的辅助进程、渲染进程和webpack进程，webpack进程还包括compiler子线程。

其中，主进程的辅助进程为程序主进程中的拓展辅助进程，用于在electron主进程启动入口文件的时候，注入到electron主进程中，使得原来由electron维护的IPC信道转交给electron框架的主进程的辅助进程维护，并通过绑定onReady事件，开始从上向下解释主进程的辅助进程内部的脚本；

渲染进程用于托管MVC实例向主进程的通信，以及调用渲染引擎对视图页面进行渲染；

webpack进程为webpack工具(模块化管理工具)运行时产生的进程，其中包含一个compiler子线程，该子线程为webpack线程的支柱引擎，支持可以监控文件系统的监听(watching)机制，并且在文件修改时重新编译。

103、调用主进程的辅助进程，创建窗口对象，并将项目文件夹中的MVC实例加载至窗口对象中；

本实施例中，使用electron框架构建的应用程序当中主要包含两种角色：electron框架本身和桌面应用。electron本身持有了主进程、渲染进程、App对象及IPC信道，桌面应用则负责持有主进程和渲染进程的辅助进程，服务器通过调用桌面应用中的主进程的辅助进程创建窗口对象。

可选地，在所述步骤103之前，还包括：

服务器读取package.json中标识的应用程序的运行入口文件来启动整个应用程序，在运行入口文件被从上向下的解释过程中，代码初始化app对象，并注册“准备”事件，之后注册“退出”事件。由于Node.js非阻塞式IO以及事件驱动的特性，electron会在注册“准备”事件后依次调用生命周期函数。

具体地，当在程序运行入口文件的上下文中注册好“准备”事件后，首先，服务器调用主进程的辅助进程中的窗口创建方法，读取配置项文件，创建一个窗口对象(即BrowserWindow对象实例)，并在该窗口对象注入项目文件夹中的MVC实例。

可选地，在所述步骤103之后，还包括：

判断是否是调试模式：若是，则打开开发者调试工具，紧接着通过资源加载方法加载MVC实例中视图文件；若否，则直接通过资源加载方法加载首视图文件；最后，在视图文件被渲染内核从上至下解析的过程中读取到script标签，并通过src属性引入控制器(即controller.js)，完成整个应用的启动过程。

104、调用compiler子线程，监听第一目标MVC实例中代码是否发生变化，若第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到第三目标MVC实例，其中，第一目标MVC实例为项目文件夹中的MVC实例，第二目标MVC实例为窗口对象中的MVC实例；

服务器在webpack中定义的server类进行实例化时，向该server类中传入compiler模块参数，以调用compiler子线程，来监听本地MVC实例中的代码是否发生变化，若监听代码发生变化时，则立即对本地MVC实例中代码和桌面应用中注入的MVC实例中的代码分别进行编译，形成对应的本地代码文件和应用代码文件，其中，编译的目的在于将代码语言转化为机器语言，便于计算机进行识别；

当编译完成时，服务器首先通过本地启动的websocket给桌面应用发送数据更新通知，其次将桌面应用中编译得到的应用代码文件对应的哈希码(hash)与本地代码文件对应的哈希码进行比对，即旧文件与变化后得到的新文件之间哈希码的比对，根据比对结果，判断代码变化，对桌面应用中的应用代码文件进行更新，从而实现代码的快速调试。

105、调用渲染进程，在窗口对象中对第三目标MVC实例进行渲染，得到桌面应用的视图，其中，渲染进程包括一个主线程和至少一个隐藏线程。

服务器调用渲染进程，首先，通过渲染进程中的远程对象，调用公共全局缓冲区，并将第三目标MVC实例中的控制器文件中的路由参数保存至全局缓冲区中；其次，基于渲染进程的IPC对象，向主进程的辅助进程发送路由信号；然后，调用主进程的辅助进程，接收路由信号，并根据该路由信号，获取全局缓冲区中的路由参数；最后，基于渲染进程中的主线程和隐藏线程，在窗口对象中加载第三目标MVC实例中的视图文件对应的页面内容，以及在页面中按需引入相应的公共组件，所述页面内容绑定所述路由参数，得到桌面应用的视图，其中，可以理解的是，一个完整的桌面应用的视图由页面内容、页面路由地址以及公共组件(可选)构成。

在所述步骤105之后，还可以包括：

当项目开发完成时，对项目文件夹进行编译和打包，生成对应的桌面安装包。

接收桌面应用的更新请求，其中，更新请求包括更新指令、新版本号以及新版本号对应的数据包；

将新版本号对应的数据包添加到桌面应用对应的资源路径下，并根据更新指令自动引用新版本号对应的数据包。

本实施例中，通过构建框架的初始化环境后运行框架，产生多个可调度的进程，其次基于其中的主进程的辅助进程，创建应用窗口，并将业务逻辑代码加载至应用窗口的存储区中，然后监听本地文件夹中的业务逻辑代码是否发生变化，若发生变化，则对应用窗口中的业务逻辑代码同步更新，最后基于渲染进程的主线程和隐藏线程，并发执行渲染应用窗口中的业务逻辑代码中的多个事件，得到桌面应用的视图，从而提升应用页面渲染的效率，提高应用的流畅度。

参阅图2，本发明实施例中桌面应用的视图构建方法的第二个实施例包括：

201、根据用户输入的框架初始化请求，调用预设指令对electron框架进行初始化，生成electron框架的初始化文件夹，其中，初始化文件夹中包括package.json文件和配置项文件；

服务器通过初始化指令快速初始化处理(执行各种脚本文件)，生成项目的初始化文件夹，该文件夹中包含了框架的配置项文件、package.json文件、各种进程模块程序、webpack相关文件以及桌面应用的初始文件夹(default_app)等文件，具体地，可分为公共组件模块文件、进程模块文件、框架服务模块文件和MVC(模型-视图-控制器，Model-View-Controller)实例模块文件。

202、基于预置业务逻辑，对配置项文件进行数据更新，以及获取预置依赖包，并将预置依赖包添加至package.json文件中，得到electron框架的初始化环境；

用户需要根据待开发的桌面应用对应的业务逻辑，在配置项文件中将electron框架首视图配置项修改为应用程序入口视图名，并添加所需的自定义参数，以及将框架运行需要的依赖包下载并存储至项目文件夹中对应的目录下，具体地，通过指定方式的指令(npm install)即可快速获取框架中依赖的资源包，并在package.json文件中引入这些资源包。其中，package.json文件是对项目或者模块包的描述，里面包含许多元信息，比如项目名称，项目版本，项目执行入口文件等等。

203、基于electron框架的初始化环境，运行electron框架，得到多个可调度的进程，其中，多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，webpack进程还包括compiler子线程；

204、调用主进程的辅助进程，创建窗口对象，并将项目文件夹中的MVC实例加载至窗口对象中；

205、调用compiler子线程，监听第一目标MVC实例中代码是否发生变化，若第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到第三目标MVC实例，其中，第一目标MVC实例为项目文件夹中的MVC实例，第二目标MVC实例为窗口对象中的MVC实例；

206、调用渲染进程，在窗口对象中对第三目标MVC实例进行渲染，得到桌面应用的视图，其中，渲染进程包括一个主线程和至少一个隐藏线程。

其中，步骤203-206与上述步骤102-105的执行步骤类似，具体此处不再赘述。

本实施例中，详细描述了框架的初始化环境构建过程，通过生成项目的初始文件夹，以及配置该文件夹中框架配置项文件，以适应桌面应用中的业务逻辑，最后导入框架运行需要的依赖文件，从而能够快速启动框架以开发桌面应用。

参阅图3，本发明实施例中桌面应用的视图构建方法的第三个实施例包括：

301、根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，初始化环境中包括项目文件夹，项目文件夹中包括模型视图控制器MVC实例，MVC实例中包括视图文件和控制器文件；

302、基于electron框架的初始化环境，运行electron框架，得到多个可调度的进程，其中，多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，webpack进程还包括compiler子线程；

303、调用主进程的辅助进程，创建窗口对象，并将项目文件夹中的MVC实例加载至窗口对象中；

304、调用compiler子线程，监听第一目标MVC实例中代码是否发生变化，若第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到第三目标MVC实例，其中，第一目标MVC实例为项目文件夹中的MVC实例，第二目标MVC实例为窗口对象中的MVC实例；

其中，步骤301-304与上述步骤101-104的执行步骤类似，具体此处不再赘述。

305、基于渲染进程中的远程对象，调用公共全局缓冲区，并将目标控制器文件中的路由参数保存至全局缓冲区中，其中，目标控制器文件为第三目标MVC实例中的控制器文件；

本实施例中，该渲染进程中包括一个渲染进程辅助进程，服务器通过调用该辅助进程中的远程对象(remote对象)，将传给“待加载页面的参数”(第三目标MVC实例中控制器中的路由参数)存储在公共全局缓冲区中，等待其他进程调用。

306、基于渲染进程的IPC对象，向主进程的辅助进程发送路由信号；

进程之间通过IPC信道相互通信，服务器基于渲染进程辅助进程的IPC对象发送路由信号给主进程的辅助进程的IPC对象。

307、调用主进程的辅助进程，接收路由信号，并根据路由信号，获取公共全局缓冲区中的路由参数；

服务器调用主进程的辅助进程，首先基于该进程中的IPC对象接收来自渲染进程的路由信号，即一个页面跳转(刷新)信号，其次根据该路由信号，获取先前存储于公共全局缓冲区中的路由参数，该公共全局缓冲区即为一个数据暂存区，方便各进程从中读取数据。

308、在窗口对象中输出所述路由参数，以及在窗口对象中加载目标视图文件对应的页面内容，得到桌面应用的视图，其中，目标视图文件为所述第三目标MVC实例中的视图文件。

服务器在窗口对象中的地址栏中输出显示路由参数，以及基于渲染进程的主线程和隐藏线程，加载第三目标MVC实例中的视图文件对应的页面内容，即一个HTML页面，可选地，服务器还可以按照用户的需求，在当前窗口对象中加载公共组件以丰富页面内容，最终得到完整的桌面应用的视图，可以理解的是，一个完整的桌面应用的视图包括页面对应的路由参数、视图文件对应的页面内容以及必要的公共组件。

具体地，页面内容的加载过程包括：遍历目标视图文件中的文档节点，并根据文档节点，生成目标视图文件对应的DOM节点树模型；解析目标视图文件中的层叠样式表(CSS)样式标记，并基于解析结果，生成目标视图文件对应的CSS规则树模型；根据DOM节点树模型与CSS规则树模型，构建目标视图文件对应的渲染树模型；基于目标视图文件对应的渲染树模型，将目标视图文件中的元素布局到渲染树模型对应的节点上；将渲染树模型中的每个节点绘制到所述窗口对象中页面，得到目标视图文件对应的静态页面；当接收到页面动态交互请求时，服务器基于主线程和所述隐藏线程，并行执行目标javascript脚本中的至少两个事件，得到页面动态交互请求的响应结果，并基于响应结果，重载静态页面，得到所述目标视图文件对应的页面内容，其中，页面动态交互请求包括目标javascript脚本。

值得一提的是，在服务器执行动态交互请求中的javascript脚本过程中，若仅基于一个主线程去执行该脚本时，由于javascript语言为一种单线程机制，服务器将其中的任务分为“同步任务”和“异步任务”两类任务，存储于执行栈等待执行。服务器首先在主线程中执行“同步任务”，并且将“异步任务”存入事件表中(event table)注册该事件，在“异步任务”注册完成后，服务器将其移入事件队列中(event queue)，当主线程中的所有“同步任务”执行完毕后，服务器才会依次执行事件队列中的“异步任务”，显而易见，这种任务的执行效率很低，在进行计算密集型的页面加载时，可能造成桌面应用的页面卡顿。

而在本实施例中，除了主线程之外，渲染进程中还包括了至少一个隐藏线程，从而并行执行“同步任务”和“异步任务”，从而提高页面的渲染效率。

本实施例中，详细描述了桌面应用的视图的构建过程，通过多线程的方式来执行脚本文件中的事件，从而提高页面渲染效率，提升桌面应用的流畅性。

上面对本发明实施例中桌面应用的视图构建方法进行了描述，下面对本发明实施例中桌面应用的视图构建装置进行描述，请参阅图4，本发明实施例中桌面应用的视图构建装置的一个实施例包括：

框架初始化模块401，用于根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，所述初始化环境中包括项目文件夹，所述项目文件夹中包括模型视图控制器MVC实例，所述MVC实例中包括视图文件和控制器文件；

进程构建模块402，用于基于所述electron框架的初始化环境，运行所述electron框架，得到多个可调度的进程，其中，所述多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，所述webpack进程还包括compiler子线程；

应用窗口生成模块403，用于调用所述主进程的辅助进程，创建窗口对象，并将所述项目文件夹中的MVC实例加载至所述窗口对象中；

热更新模块404，用于调用所述compiler子线程，监听第一目标MVC实例中代码是否发生变化，若所述第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例，其中，所述第一目标MVC实例为所述项目文件夹中的MVC实例，所述第二目标MVC实例为所述窗口对象中的MVC实例；

应用渲染模块405，用于调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图，其中，所述渲染进程包括一个主线程和至少一个隐藏线程。

本实施例中，通过构建框架的初始化环境后运行框架，产生多个可调度的进程，其次基于其中的主进程的辅助进程，创建应用窗口，并将业务逻辑代码加载至应用窗口的存储区中，然后监听本地文件夹中的业务逻辑代码是否发生变化，若发生变化，则对应用窗口中的业务逻辑代码同步更新，最后基于渲染进程的主线程和隐藏线程，并发执行渲染应用窗口中的业务逻辑代码中的多个事件，得到桌面应用的视图，从而提升应用页面渲染的效率，提高应用的流畅度。

参阅图5，本发明实施例中桌面应用的视图构建装置的另一个实施例包括：

框架初始化模块501，用于根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，所述初始化环境中包括项目文件夹，所述项目文件夹中包括模型视图控制器MVC实例，所述MVC实例中包括视图文件和控制器文件；

进程构建模块502，用于基于所述electron框架的初始化环境，运行所述electron框架，得到多个可调度的进程，其中，所述多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，所述webpack进程还包括compiler子线程；

应用窗口生成模块503，用于调用所述主进程的辅助进程，创建窗口对象，并将所述项目文件夹中的MVC实例加载至所述窗口对象中；

热更新模块504，用于调用所述compiler子线程，监听第一目标MVC实例中代码是否发生变化，若所述第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例，其中，所述第一目标MVC实例为所述项目文件夹中的MVC实例，所述第二目标MVC实例为所述窗口对象中的MVC实例；

应用渲染模块505，用于调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图，其中，所述渲染进程包括一个主线程和至少一个隐藏线程。

其中，所述框架初始化模块501包括：

文件夹生成单元5011，用于根据用户输入的框架初始化请求，调用预设指令对所述electron框架进行初始化，生成所述electron框架的初始化文件夹，其中，所述初始化文件夹中包括package.json文件和配置项文件；

参数配置单元5012，用于基于预置业务逻辑，对所述配置项文件进行数据更新，以及获取预置依赖包，并将所述预置依赖包添加至所述package.json文件中，得到所述electron框架的初始化环境。

其中，所述热更新模块504包括：

第一编译单元5041，用于对所述第一目标MVC实例中的代码进行编译，得到本地代码文件，其中，所述本地代码文件中包括第一哈希标识；

第二编译单元5042，用于对所述第二目标MVC实例中的代码进行编译，得到应用代码文件，其中，所述应用代码文件中包括第二哈希标识；

代码更新单元5043，用于将所述第一哈希标识与所述第二哈希标识进行比较，并基于比较结果，更新所述第二目标MVC实例，得到第三目标MVC实例。

其中，所述应用渲染模块505包括：

路由存储单元5051，用于基于所述渲染进程中的远程对象，调用公共全局缓冲区，并将目标控制器文件中的路由参数保存至全局缓冲区中，其中，所述目标控制器文件为所述第三目标MVC实例中的控制器文件；

信号输出单元5052，用于基于所述渲染进程的IPC对象，向所述主进程的辅助进程发送路由信号；

路由获取单元5053，用于调用所述主进程的辅助进程，接收所述路由信号，并根据所述路由信号，获取所述全局缓冲区中的路由参数；

桌面应用的视图单元5054，用于在所述窗口对象中输出所述路由参数，以及在所述窗口对象中加载目标视图文件对应的页面内容，得到桌面应用的视图，其中，所述目标视图文件为所述第三目标MVC实例中的视图文件。

进一步地，所述桌面应用的视图单元5054具体用于：

遍历所述目标视图文件中的文档节点，并根据所述文档节点，生成所述目标视图文件对应的DOM节点树模型；

解析所述目标视图文件中的层叠样式表样式标记，并基于解析结果，生成所述目标视图文件对应的层叠样式表规则树模型；

根据所述DOM节点树模型与所述层叠样式表规则树模型，构建所述目标视图文件对应的渲染树模型；

基于所述目标视图文件对应的渲染树模型，将所述目标视图文件中的元素布局到所述渲染树模型对应的节点上；

将所述渲染树模型中的每个节点绘制到所述窗口对象中页面，得到目标视图文件对应的静态页面；

当接收到页面动态交互请求时，基于所述主线程和所述隐藏线程，并行执行目标javascript脚本中的至少两个事件，得到所述页面动态交互请求的响应结果，并基于所述响应结果，重载所述静态页面，得到所述目标视图文件对应的页面内容，其中，所述页面动态交互请求包括目标javascript脚本。

本发明实施例中，模块化的设计让对话内容的推荐装置各部位的硬件专注于某一功能的实现，最大化实现了硬件的性能，同时模块化的设计也降低了装置的模块之间的耦合性，更加方便维护。

上面图4和图5从模块化功能实体的角度对本发明实施例中的桌面应用的视图构建装置进行详细描述，下面从硬件处理的角度对本发明实施例中桌面应用的视图构建设备进行详细描述。

图6是本发明实施例提供的一种桌面应用的视图构建设备的结构示意图，该桌面应用的视图构建设备600可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)610(例如，一个或一个以上处理器)和存储器620，一个或一个以上存储应用程序633或数据632的存储介质630(例如一个或一个以上海量存储设备)。其中，存储器620和存储介质630可以是短暂存储或持久存储。存储在存储介质630的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对桌面应用的视图构建设备600中的一系列指令操作。更进一步地，处理器610可以设置为与存储介质630通信，在桌面应用的视图构建设备600上执行存储介质630中的一系列指令操作。

桌面应用的视图构建设备600还可以包括一个或一个以上电源640，一个或一个以上有线或无线网络接口650，一个或一个以上输入输出接口660，和/或，一个或一个以上操作系统631，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图6示出的桌面应用的视图构建设备结构并不构成对桌面应用的视图构建设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种桌面应用的视图构建设备，所述桌面应用的视图构建设备包括存储器和处理器，存储器中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行上述各实施例中的所述桌面应用的视图构建方法的步骤。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述桌面应用的视图构建方法的步骤。

进一步地，所述计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种桌面应用的视图构建方法，其特征在于，所述桌面应用的视图构建方法包括：

根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，所述初始化环境中包括项目文件夹，所述项目文件夹中包括模型视图控制器MVC实例，所述MVC实例中包括视图文件和控制器文件；

基于所述electron框架的初始化环境，运行所述electron框架，得到多个可调度的进程，其中，所述多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，所述webpack进程还包括compiler子线程；

调用所述主进程的辅助进程，创建窗口对象，并将所述项目文件夹中的MVC实例加载至所述窗口对象中；

调用所述compiler子线程，监听第一目标MVC实例中代码是否发生变化，若所述第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例，其中，所述第一目标MVC实例为所述项目文件夹中的MVC实例，所述第二目标MVC实例为所述窗口对象中的MVC实例；

调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图，其中，所述渲染进程包括一个主线程和至少一个隐藏线程。

2.根据权利要求1所述的桌面应用的视图构建方法，其特征在于，所述根据用户输入的框架初始化请求，构建electron框架的初始化环境包括：

根据用户输入的框架初始化请求，调用预设指令对所述electron框架进行初始化，生成所述electron框架的初始化文件夹，其中，所述初始化文件夹中包括package.json文件和配置项文件；

基于预置业务逻辑，对所述配置项文件进行数据更新，以及获取预置依赖包，并将所述预置依赖包添加至所述package.json文件中，得到所述electron框架的初始化环境。

3.根据权利要求1所述的桌面应用的视图构建方法，其特征在于，所述对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例包括：

对所述第一目标MVC实例中的代码进行编译，得到本地代码文件，其中，所述本地代码文件中包括第一哈希标识；

对所述第二目标MVC实例中的代码进行编译，得到应用代码文件，其中，所述应用代码文件中包括第二哈希标识；

将所述第一哈希标识与所述第二哈希标识进行比较，并基于比较结果，更新所述第二目标MVC实例，得到第三目标MVC实例。

4.根据权利要求3所述的桌面应用的视图构建方法，其特征在于，所述调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图包括：

基于所述渲染进程中的远程对象，调用公共全局缓冲区，并将目标控制器文件中的路由参数保存至全局缓冲区中，其中，所述目标控制器文件为所述第三目标MVC实例中的控制器文件；

基于所述渲染进程的IPC对象，向所述主进程的辅助进程发送路由信号；

调用所述主进程的辅助进程，接收所述路由信号，并根据所述路由信号，获取所述全局缓冲区中的路由参数；

在所述窗口对象中输出所述路由参数，以及在所述窗口对象中加载目标视图文件对应的页面内容，得到桌面应用的视图，其中，所述目标视图文件为所述第三目标MVC实例中的视图文件。

5.根据权利要求4所述的桌面应用的视图构建方法，其特征在于，所述在所述窗口对象中加载目标视图文件对应的页面内容包括：

遍历所述目标视图文件中的文档节点，并根据所述文档节点，生成所述目标视图文件对应的DOM节点树模型；

解析所述目标视图文件中的层叠样式表标记，并基于解析结果，生成所述目标视图文件对应的层叠样式表规则树模型；

根据所述DOM节点树模型与所述层叠样式表规则树模型，构建所述目标视图文件对应的渲染树模型；

基于所述目标视图文件对应的渲染树模型，将所述目标视图文件中的元素布局到所述渲染树模型对应的节点上；

将所述渲染树模型中的每个节点绘制到所述窗口对象中页面，得到目标视图文件对应的静态页面；

当接收到页面动态交互请求时，基于所述主线程和所述隐藏线程，并行执行目标javascript脚本中的至少两个事件，得到所述页面动态交互请求的响应结果，并基于所述响应结果，重载所述静态页面，得到所述目标视图文件对应的页面内容，其中，所述页面动态交互请求包括目标javascript脚本。

6.根据权利要求1中所述的桌面应用的视图构建方法，其特征在于，在调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图之后，还可以包括：

当项目开发完成时，对所述项目文件夹进行编译和打包，生成对应的桌面安装包。

7.根据权利要求1-6中任意一项所述的桌面应用的视图构建方法，其特征在于，在当项目开发完成时，对所述项目文件夹进行编译和打包，生成对应的桌面安装包之后，还可以包括：

接收桌面应用的更新请求，其中，所述更新请求包括更新指令、新版本号以及所述新版本号对应的数据包；

将所述新版本号对应的数据包添加到所述桌面应用对应的资源路径下，并根据所述更新指令自动引用所述新版本号对应的数据包。

8.一种桌面应用的视图构建装置，其特征在于，所述桌面应用的视图构建装置包括：

框架初始化模块，用于根据用户输入的框架初始化请求，构建electron框架的初始化环境，其中，所述初始化环境中包括项目文件夹，所述项目文件夹中包括模型视图控制器MVC实例，所述MVC实例中包括视图文件和控制器文件；

进程构建模块，用于基于所述electron框架的初始化环境，运行所述electron框架，得到多个可调度的进程，其中，所述多个可调度的进程包括主进程的辅助进程、渲染进程和webpack进程，所述webpack进程还包括compiler子线程；

应用窗口生成模块，用于调用所述主进程的辅助进程，创建窗口对象，并将所述项目文件夹中的MVC实例加载至所述窗口对象中；

热更新模块，用于调用所述compiler子线程，监听第一目标MVC实例中代码是否发生变化，若所述第一目标MVC实例中代码发生变化，则对第二目标MVC实例中的代码进行热更新，得到所述第三目标MVC实例，其中，所述第一目标MVC实例为所述项目文件夹中的MVC实例，所述第二目标MVC实例为所述窗口对象中的MVC实例；

应用渲染模块，用于调用所述渲染进程，在所述窗口对象中对所述第三目标MVC实例进行渲染，得到桌面应用的视图，其中，所述渲染进程包括一个主线程和至少一个隐藏线程。

9.一种桌面应用的视图构建设备，其特征在于，所述桌面应用的视图构建设备包括：存储器和至少一个处理器，所述存储器中存储有指令；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述桌面应用的视图构建设备执行如权利要求1-7中任意一项所述的桌面应用的视图构建方法。

10.一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，其特征在于，所述指令被处理器执行时实现如权利要求1-7中任一项所述的桌面应用的视图构建方法。

Images