CN108228188B - 一种视图组件处理方法、电子设备及可读存储介质 - Google Patents

Abstract

本发明实施例提供了一种视图组件处理方法、电子设备及可读存储介质，用于提供一种兼顾了多种主流框架，同时对浏览器又有高兼容性的视图组件处理方法。该方法包括：在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，所述模板文件包括所述视图组件的渲染函数，所述脚本文件注入了所述视图组件的构造函数；在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，通过调用覆写后的get方法插入所述视图组件的数据模型；加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件。

Description

一种视图组件处理方法、电子设备及可读存储介质

技术领域

本发明涉及电子技术领域，尤其涉及一种视图组件处理方法、电子设备及可读存储介质。

背景技术

随着近年来前端对于开发富交互站点的场景日益凸显，涌现出了一些优异的主流视图层框架，例如Angular、Vue、React、Knockout等等，此类前端框架的优点即实现了数据模型到视图组件UI的映射关系，帮助开发者从繁重且难以维护的文件对象模型应用程序接口DOM API调用中释放。新的视图层框架关注业务逻辑与通信层对数据模型的影响，视图即可自动的维护自身渲染、更新、销毁等行为，极大地提升了前端开发的效率，以及代码的可复用性、可读性与可维护性。这些框架实现的原理都不尽相同，对于基于活动模版技术的框架，使用了低版本浏览器无法模拟的语法方案，难以兼容老旧版本的浏览器。

发明内容

本发明实施例提供了一种视图组件处理方法、电子设备及可读存储介质，用于提供一种兼顾了多种主流框架，同时对浏览器又有高兼容性的视图组件处理方法。

第一方面，本发明提供了一种视图组件处理方法，包括：

在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；

在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；

加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成。

可选的，在所述调用覆写后的所述get方法时，所述方法还包括：

生成所述数据模型的视图观察者；

在对所述视图组件渲染期间，通过所述视图观察者将所述get方法调用过程中的访问数据记录在所述视图组件的依赖表中。

可选的，所述构造函数中覆写了所述视图组件的数据对象的设置set方法，在所述视图组件渲染完成后到所述组件销毁期间，所述方法还包括：

在所述视图组件的视图状态发生变更情况下，通过调用所述set方法来修改所述视图组件对应的数据模型；

通过所述视图观察者将所述get方法修改的数据记录在所述视图组件的依赖表中；

在所述修改的数据的类型为预设类型情况下，对所述视图组件进行渲染更新。

可选的，所述对所述视图组件进行渲染更新，包括：

获得所述视图组件初次渲染结果对应的静态部分的虚拟DOM树；

加载所述视图组件的动态渲染函数，通过所述动态渲染函数结合所述修改的数据，生成修改部分对应的虚拟DOM树；

将所述静态部分的虚拟DOM树与所述修改部分对应的虚拟DOM树结合，获得与所述视图组件对应的第二虚拟DOM树；

确定所述第一虚拟DOM树与所述第二虚拟DOM树的差异部分，将所述差异部分更新至页面。

可选的，所述将所述差异部分更新至页面，包括：

如果所述差异部分为所述第一DOM树中新增部分，为所述差异部分创建新增子组件节点；

如果所述差异部分为所述第一DOM树中属性状态变更部分，更新所述属性状态变更部分对应的属性状态；

如果所述差异部分为所述第一DOM树中删除部分，销毁所述删除部分。

第二方面，本发明实施例提供一种电子设备，所述电子设备包括：

解析单元，用于在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；

数据插入单元，用于在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；

渲染单元，用于加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成。

可选的，所述电子设备还包括：

记录单元，用于在调用覆写后的所述get方法时，生成所述数据模型的视图观察者；在对所述视图组件渲染期间，通过所述视图观察者将所述get方法调用过程中的访问数据记录在所述视图组件的依赖表中。

可选的，所述构造函数中覆写了所述视图组件的数据对象的设置set方法，所述电子设备还包括：

更新单元，用于在所述视图组件渲染完成后到所述组件销毁期间，在所述视图组件的视图状态发生变更情况下，通过调用所述set方法来修改所述视图组件对应的数据模型；通过所述视图观察者将所述get方法修改的数据记录在所述视图组件的依赖表中；在所述修改的数据的类型为预设类型情况下，对所述视图组件进行渲染更新。

可选的，所述更新单元用于：

获得所述视图组件初次渲染结果对应的静态部分的虚拟DOM树；

加载所述视图组件的动态渲染函数，通过所述动态渲染函数结合所述修改的数据，生成修改部分对应的虚拟DOM树；

将所述静态部分的虚拟DOM树与所述修改部分对应的虚拟DOM树结合，获得与所述视图组件对应的第二虚拟DOM树；

确定所述第一虚拟DOM树与所述第二虚拟DOM树的差异部分，将所述差异部分更新至页面。

可选的，所述更新单元用于：

如果所述差异部分为所述第一DOM树中新增部分，为所述差异部分创建新增子组件节点；

如果所述差异部分为所述第一DOM树中属性状态变更部分，更新所述属性状态变更部分对应的属性状态；

如果所述差异部分为所述第一DOM树中删除部分，销毁所述删除部分。

第三方面，本发明实施例提供一种电子设备，所述电子设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如前述第一方面实施例中所述的视图组件处理方法的步骤。

第四方面，本发明实施例提供了一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如前述第一方面实施例中所述的视图组件处理方法的步骤。

本申请实施例中的上述一个或多个技术方案，至少具有如下一种或多种技术效果：

在本发明实施例的技术方案中，在对视图组件进行处理时，需要预先在对该视图组件进行编译期间，将该视图组件解析为模板文件和脚本文件，模板文件解析为抽象语法树，模板文件中还基于抽象语法树生产了渲染函数，脚本文件注入了构造函数。进而，在该视图组件被上层视图组件调用时，执行脚本文件中的构造函数，构造函数中覆写了数据对象的get方法，通过调用该get方法插入视图组件的数据模型，进而加载模板文件的渲染函数，通过渲染函数插入的数据模型，生成与视图组件对应的第一虚拟DOM树，将生成的第一虚拟DOM树传递至视图组件的根组件，在根组件获取到所有子视图组件的虚拟DOM树后，构建好完整的虚拟DOM树，并将完整的虚拟DOM树解析并渲染到页面，进而，该视图组件渲染完成。这样，由于低版本的浏览器无需模拟对象属性特色，直接就可以支持本实施例中的get方法来插入数据模型，进而可适用于一部分现有视图层框架无法适用的老旧版本浏览器，兼顾了多种主流框架，同时对浏览器又有高兼容性。

附图说明

图1为本发明第一实施例中的一种视图组件处理方法的流程图；

图2为本发明第一实施例中的视图组件解析示意图；

图3为本发明第二实施例中的电子设备的示意图；

图4为本发明第三实施例中电子设备的示意图。

具体实施方式

本发明实施例提供了一种视图组件处理方法、电子设备及可读存储介质，用于提供一种兼顾了多种主流框架，同时对浏览器又有高兼容性的视图组件处理方法。在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成。

下面通过附图以及具体实施例对本发明技术方案做详细的说明，应当理解本申请实施例以及实施例中的具体特征是对本申请技术方案的详细的说明，而不是对本申请技术方案的限定，在不冲突的情况下，本申请实施例以及实施例中的技术特征可以相互组合。

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

实施例

请参考图1，本发明第一实施例提供一种视图组件处理方法，该视图组件处理方法包括如下步骤：

S101：在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；

S102：在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；

S103：加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成。

具体的，在本实施例中，在步骤S101中，如图2所示，在对视图组件进行编译阶段，将视图组件解析为三个部分，包括模版文件、脚本文件与样式文件。模版文件解析为abstract syntax tree(抽象语法树，缩写AST)，然后从AST生成渲染函数，渲染函数包括动态渲染函数与静态渲染函数，渲染函数即为模版文件的最终导出。脚本文件注入内置的组件构造函数，通过预编译注入shark装载器后到shark实例。进一步，样式文件直接以资源文件的形式引入，通过预编译形成css资源，最终经过一个形似提取器extract、预处理器的解析链生成行内样式inline-style或全局的公共样式文件。

进而，执行步骤S102，从声明了挂载点的根组件开始，执行各个视图组件的构造函数，每个视图组件的渲染方式一样，在该视图组件被调用时，该视图组件脚本文件中的构造函数中覆写了组件数据对象的get/set方法，如果是纯静态的视图组件，不持有任何数据，则可则跳过此步骤。对于具有数据模型的视图组件，通过get方法插入该视图组件的数据模型。

进而，执行步骤S103，通过该视图组件的渲染函数，结合插入的数据模型，生成该视图组件的第一虚拟DOM树。渲染函数是一种类hyperscript形式的语法糖，它将结合组件自身持有的数据模型生成一颗第一虚拟DOM树，该第一虚拟DOM树会逐级向上传递，直到根组件拿到所有的子孙代组件的虚拟DOM树，可构建一颗完整的虚拟DOM树，将完整的虚拟树将被解析并真实渲染到页面，在完整的虚拟DOM树渲染到页面时，每个视图组件渲染完成。

本实施例中的视图组件处理方法，由于真实渲染是在完整虚拟DOM树构建完成后进行，可以有效减少渲染过程中占用的缓存空间，进一步减少了多余的冗余开销。并且，在现有技术中，由于一些老旧版本的浏览器无法模拟现有的新视图层框架的Object.defineProperty方法，导致老旧版本的浏览器无法与新视图层框架兼容。而本实施例中的方法，通过覆写的get方法可有效将视图组件的数据模型插入，老旧版本的浏览器可直接支持，所以本实施例中的方法兼顾了多种主流框架，同时又对浏览器具有高兼容性。

进一步，在本实施例中，需要对视图组件调用的数据进行记录，所以，在调用覆写后的所述get方法时，还包括如下步骤：

生成所述数据模型的视图观察者；

在对所述视图组件渲染期间，通过所述视图观察者将所述get方法调用过程中的访问数据记录在所述视图组件的依赖表中。

具体的，在本实施例中，如果检查到开发者在通过调用覆写后的get方法来插入数据模型时，即开始生成视图组件数据模型的视图观察者viewobserver，视图观察者viewobserver会将get方法调用过程中的访问数据记录为该视图组件依赖表dependencies的一员。因此，随着该视图组件渲染结束，依赖表dependencies的收集过程也完成了，依赖表dependencies用于维护视图组件的相关数据，以便于后期可通过调用该依赖表dependencies对视图组件进行实时维护。并且，由于视图观察者view observer并非是在组件初始化的过程中静默生成，而是在发现视图组件渲染过程中插入组件自有数据时动态构建，所以避免了可能出现的冗余开销。

进一步，本实施例中的方法还提供视图组件更新方式，具体的，所述构造函数中覆写了所述视图组件的数据对象的设置set方法，在所述视图组件渲染完成后到所述组件销毁期间，所述方法还包括：

在所述视图组件的视图状态发生变更情况下，通过调用所述set方法来修改所述视图组件对应的数据模型；

通过所述视图观察者将所述get方法修改的数据记录在所述视图组件的依赖表中；

在所述修改的数据的类型为预设类型情况下，对所述视图组件进行渲染更新。

具体的，在视图组件模版渲染完成后到该视图组件销毁的时间段里，当该视图组件的视图的状态发生变更情况下，例如：用户更改头像时，向服务器发送更改头像的网络请求，在服务器对该网络请求响应后，确定头像的视图组件的视图的状态发生变更。视图组件的视图的状态发生变更还可以包括用户操作该视图组件修改数据模型情况，或其他数据来源的推送和返回情况。还可以是其他情况，在此，本申请不做限制。

在确定视图组件的视图的状态发生变更后，开发者通过调用set方法来修改视图组件持有的数据模型。通过视图观察者view observer将get方法修改的数据记录在视图组件的依赖表dependencies中。在记录时，确定修改的数据是否为预设类型的数据，预设类型为需要触发该组件进行重新渲染的类型的数据，如：更换头像的数据类型，更新信息的类型等等，像修改密码这种类型是无需触发视图组件进行重新渲染的，仅需要将修改的密码记录在依赖表dependencies中即可。如果修改的数据为预设类型的数据，需要触发视图组件进行重新渲染更新。

此时，观察者会自动地检查视图组件的依赖表dependencies，一旦检测到修改的是预设类型数据对应的项，视图观察者view observer会将组件的更新行为放入异步任务队列。具体的，在高版本的浏览器中，通过Promise或MutationObserver生成的微任务microtask，在低版本浏览器中自动降级为通过定时器生成的微任务macrotask，在主线程执行完毕后，即会触发异步任务队列执行，实现视图组件自动更新。

进一步，在本实施例中，在视图组件更新时，可通过如下步骤实现：

获得所述视图组件初次渲染结果对应的静态部分的虚拟DOM树；

加载所述视图组件的动态渲染函数，通过所述动态渲染函数结合所述修改的数据，生成修改部分对应的虚拟DOM树；

将所述静态部分的虚拟DOM树与所述修改部分对应的虚拟DOM树结合，获得与所述视图组件对应的第二虚拟DOM树；

确定所述第一虚拟DOM树与所述第二虚拟DOM树的差异部分，将所述差异部分更新至页面；如果所述差异部分为所述第一DOM树中新增部分，为所述差异部分创建新增子组件节点；如果所述差异部分为所述第一DOM树中属性状态变更部分，更新所述属性状态变更部分对应的属性状态；如果所述差异部分为所述第一DOM树中删除部分，销毁所述删除部分。

具体的，在本实施例中，视图组件在进行初次渲染时，渲染结果包括两部分，第一部分为静态渲染结果(始终不会变化的部分)，第二部分为动态渲染结果(变化的部分)。从初次渲染得到的第一虚拟DOM树中获得静态部分的虚拟DOM树。然后，重新执行动态渲染函数(变化的部分)，加载视图组件的动态渲染函数，通过动态渲染函数结合修改的数据，生成修改部分对应的虚拟DOM树。将静态部分的虚拟DOM树与修改部分对应的虚拟DOM树结合，获得与视图组件对应的完整的第二虚拟DOM树。将重新得到的第二虚拟DOM树与持有的原始第一虚拟DOM树进行比对，然后将两者之间的差异部分更新到页面，已完成视图组件的更新。

差异部分可以是原始的第一虚拟DOM树没有的新增的部分，此时，可以为差异部分创建新增子组件节点，该新增子组件节点对应创建真实DOM或子组件实例。进一步，差异部分可以是原始的第一虚拟DOM树中某一部分属性的修改部分，如修改头像、身份信息等。此时，可更新属性状态变更部分对应的属性状态，可通过更新真实DOM或子组件实例实现。进一步，差异部分还可以是第一DOM树中需要删除的部分，可通过销毁删除部分的真实DOM或子组件实例实现。

通过上述描述可知，本实施例的视图组件处理方法对浏览器兼容性良好，可应用于IE8+、chrome，firefox，safari和其他已知主流浏览器，初始化开销较低，同时开发者能通过依赖表一眼识别出视图组件中的视图依赖部分和触发视图更新的数据变更部分，有利于编码层面的可读性和可维护性。

请参见图3，本发明的第二实施例提供了一种电子设备，所述电子设备包括：

解析单元201，用于在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；

数据插入单元202，用于在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；

渲染单元203，用于加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成。

本实施例中的电子设备可以是安装了浏览器等需要进行视图组件展示的手机、平板电脑、台式电脑等电子设备，还可以是其他电子设备，在此本申请不做限制。电子设备的解析单元201在对视图组件进行编译阶段，将视图组件解析为三个部分，如图2所示，包括模版文件、脚本文件与样式文件。模版文件解析为abstract syntax tree(抽象语法树，缩写AST)，然后从AST生成渲染函数，渲染函数包括动态渲染函数与静态渲染函数，渲染函数即为模版文件的最终导出。脚本文件注入内置的组件构造函数，通过预编译注入shark装载器后到shark实例。进一步，样式文件直接以资源文件的形式引入，通过预编译形成css资源，最终经过一个形似提取器extract、预处理器的解析链生成行内样式inline-style或全局的公共样式文件。

进而，数据插入单元202从声明了挂载点的根组件开始，执行各个视图组件的构造函数，每个视图组件的渲染方式一样，在该视图组件被调用时，该视图组件脚本文件中的构造函数中覆写了组件数据对象的get/set方法，如果是纯静态的视图组件，不持有任何数据，则可则跳过此步骤。对于具有数据模型的视图组件，通过get方法插入该视图组件的数据模型。

进而，渲染单元203，通过加载该视图组件的渲染函数，结合插入的数据模型，生成该视图组件的第一虚拟DOM树。渲染函数是一种类hyperscript形式的语法糖，它将结合组件自身持有的数据模型生成一颗第一虚拟DOM树，该第一虚拟DOM树会逐级向上传递，直到根组件拿到所有的子孙代组件的虚拟DOM树，可构建一颗完整的虚拟DOM树，将完整的虚拟树将被解析并真实渲染到页面，在完整的虚拟DOM树渲染到页面时，每个视图组件渲染完成。

本实施例中的电子设备，由于真实渲染是在完整虚拟DOM树构建完成后进行，可以有效减少渲染过程中占用的缓存空间，进一步减少了多余的冗余开销。并且，在现有技术中，由于一些老旧版本的浏览器无法模拟现有的新视图层框架的Object.defineProperty方法，导致老旧版本的浏览器无法与新视图层框架兼容。而本实施例中的方法，通过覆写的get方法可有效将视图组件的数据模型插入，老旧版本的浏览器可直接支持，所以电子设备兼顾了多种主流框架，同时又对浏览器具有高兼容性。

进一步，在本实施例中，电子设备需要对视图组件调用的数据进行记录，所以，电子设备还包括：

记录单元，用于在调用覆写后的所述get方法时，生成所述数据模型的视图观察者；在对所述视图组件渲染期间，通过所述视图观察者将所述get方法调用过程中的访问数据记录在所述视图组件的依赖表中。

具体的，在本实施例中，记录单元如果检查到开发者在通过调用覆写后的get方法来插入数据模型时，即开始生成视图组件数据模型的视图观察者view observer，视图观察者view observer会将get方法调用过程中的访问数据记录为该视图组件依赖表dependencies的一员。因此，随着该视图组件渲染结束，依赖表dependencies的收集过程也完成了，依赖表dependencies用于维护视图组件的相关数据，以便于后期可通过调用该依赖表dependencies对视图组件进行实时维护。并且，由于视图观察者view observer并非是在组件初始化的过程中静默生成，而是在发现视图组件渲染过程中插入组件自有数据时动态构建，所以避免了可能出现的冗余开销。

进一步，本实施例中的电子设备还提供视图组件更新方式，具体的，所述构造函数中覆写了所述视图组件的数据对象的设置set方法，所述电子设备还包括：

更新单元，用于在所述视图组件渲染完成后到所述组件销毁期间，在所述视图组件的视图状态发生变更情况下，通过调用所述set方法来修改所述视图组件对应的数据模型；通过所述视图观察者将所述get方法修改的数据记录在所述视图组件的依赖表中；在所述修改的数据的类型为预设类型情况下，对所述视图组件进行渲染更新。

具体的，在视图组件模版渲染完成后到该视图组件销毁的时间段里，当该视图组件的视图的状态发生变更情况下，例如：用户更改头像时，向服务器发送更改头像的网络请求，在服务器对该网络请求响应后，确定头像的视图组件的视图的状态发生变更。视图组件的视图的状态发生变更还可以包括用户操作该视图组件修改数据模型情况，或其他数据来源的推送和返回情况。还可以是其他情况，在此，本申请不做限制。

在确定视图组件的视图的状态发生变更后，开发者通过调用set方法来修改视图组件持有的数据模型。通过视图观察者view observer将get方法修改的数据记录在视图组件的依赖表dependencies中。在记录时，确定修改的数据是否为预设类型的数据，预设类型为需要触发该组件进行重新渲染的类型的数据，如：更换头像的数据类型，更新信息的类型等等，像修改密码这种类型是无需触发视图组件进行重新渲染的，仅需要将修改的密码记录在依赖表dependencies中即可。如果修改的数据为预设类型的数据，需要触发视图组件进行重新渲染更新。

此时，观察者会自动地检查视图组件的依赖表dependencies，一旦检测到修改的是预设类型数据对应的项，视图观察者view observer会将组件的更新行为放入异步任务队列。具体的，在高版本的浏览器中，通过Promise或MutationObserver生成的微任务microtask，在低版本浏览器中自动降级为通过定时器生成的微任务macrotask，在主线程执行完毕后，即会触发异步任务队列执行，实现视图组件自动更新。

进一步，在本实施例中，在视图组件更新时，更新单元用于：

获得所述视图组件初次渲染结果对应的静态部分的虚拟DOM树；

加载所述视图组件的动态渲染函数，通过所述动态渲染函数结合所述修改的数据，生成修改部分对应的虚拟DOM树；

将所述静态部分的虚拟DOM树与所述修改部分对应的虚拟DOM树结合，获得与所述视图组件对应的第二虚拟DOM树；

确定所述第一虚拟DOM树与所述第二虚拟DOM树的差异部分，将所述差异部分更新至页面。如果所述差异部分为所述第一DOM树中新增部分，为所述差异部分创建新增子组件节点；如果所述差异部分为所述第一DOM树中属性状态变更部分，更新所述属性状态变更部分对应的属性状态；如果所述差异部分为所述第一DOM树中删除部分，销毁所述删除部分。

具体的，在本实施例中，视图组件在进行初次渲染时，渲染结果包括两部分，第一部分为静态渲染结果(始终不会变化的部分)，第二部分为动态渲染结果(变化的部分)。从初次渲染得到的第一虚拟DOM树中获得静态部分的虚拟DOM树。然后，重新执行动态渲染函数(变化的部分)，加载视图组件的动态渲染函数，通过动态渲染函数结合修改的数据，生成修改部分对应的虚拟DOM树。将静态部分的虚拟DOM树与修改部分对应的虚拟DOM树结合，获得与视图组件对应的完整的第二虚拟DOM树。将重新得到的第二虚拟DOM树与持有的原始第一虚拟DOM树进行比对，然后将两者之间的差异部分更新到页面，已完成视图组件的更新。

差异部分可以是原始的第一虚拟DOM树没有的新增的部分，此时，可以为差异部分创建新增子组件节点，该新增子组件节点对应创建真实DOM或子组件实例。进一步，差异部分可以是原始的第一虚拟DOM树中某一部分属性的修改部分，如修改头像、身份信息等。此时，可更新属性状态变更部分对应的属性状态，可通过更新真实DOM或子组件实例实现。进一步，差异部分还可以是第一DOM树中需要删除的部分，可通过销毁删除部分的真实DOM或子组件实例实现。

通过上述描述可知，本实施例的电子设备对浏览器兼容性良好，可应用于IE8+、chrome，firefox，safari和其他已知主流浏览器，初始化开销较低，同时开发者能通过依赖表一眼识别出视图组件中的视图依赖部分和触发视图更新的数据变更部分，有利于编码层面的可读性和可维护性。

请参见图4，本发明的第三实施例提供了一种电子设备，该实施例的电子设备包括：处理器301、存储器302以及存储在所述存储器中并可在所述处理器上运行的计算机程序，例如第一实施例中视图组件处理方法对应的程序。所述处理器执行所述计算机程序时实现上述第一实施例中各路径检测中的步骤。或者，所述处理器执行所述计算机程序时实现上述第二实施例的电子设备中各模块/单元的功能。

示例性的，所述计算机程序可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器中，并由所述处理器执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述计算机装置中的执行过程。例如，所述计算机程序可以被分割成解析单元、数据插入单元、渲染单元的功能，各单元具体功能如下：

解析单元，用于在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；

数据插入单元，用于在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；

渲染单元，用于加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成。

所述电子设备可包括，但不仅限于，处理器、存储器。本领域技术人员可以理解，所述示意图3仅仅是计算机装置的示例，并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器301可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述计算机装置的控制中心，利用各种接口和线路连接整个计算机装置的各个部分。

所述存储器302可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述计算机装置的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、视频数据等)等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

进一步，该电子设备所包括的处理器301还具有以下功能：

在调用覆写后的所述get方法时，生成所述数据模型的视图观察者；在对所述视图组件渲染期间，通过所述视图观察者将所述get方法调用过程中的访问数据记录在所述视图组件的依赖表中。

进一步，该电子设备所包括的处理器301还具有以下功能：

在所述视图组件渲染完成后到所述组件销毁期间，在所述视图组件的视图状态发生变更情况下，通过调用所述set方法来修改所述视图组件对应的数据模型；通过所述视图观察者将所述get方法修改的数据记录在所述视图组件的依赖表中；在所述修改的数据的类型为预设类型情况下，对所述视图组件进行渲染更新。

进一步，该电子设备所包括的处理器301还具有以下功能：

获得所述视图组件初次渲染结果对应的静态部分的虚拟DOM树；

加载所述视图组件的动态渲染函数，通过所述动态渲染函数结合所述修改的数据，生成修改部分对应的虚拟DOM树；

将所述静态部分的虚拟DOM树与所述修改部分对应的虚拟DOM树结合，获得与所述视图组件对应的第二虚拟DOM树；

确定所述第一虚拟DOM树与所述第二虚拟DOM树的差异部分，将所述差异部分更新至页面。

进一步，该电子设备所包括的处理器301还具有以下功能：

如果所述差异部分为所述第一DOM树中新增部分，为所述差异部分创建新增子组件节点；

如果所述差异部分为所述第一DOM树中属性状态变更部分，更新所述属性状态变更部分对应的属性状态；

如果所述差异部分为所述第一DOM树中删除部分，销毁所述删除部分。

本发明第四实施例提供了一种计算机可读存储介质，其上存储有计算机程序，本发明第二实施例中的所述电子设备集成的功能单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述第一实施例的视图组件处理方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

在本发明实施例的技术方案中，在对视图组件进行处理时，需要预先在对该视图组件进行编译期间，将该视图组件解析为模板文件和脚本文件，模板文件解析为抽象语法树，模板文件中还基于抽象语法树生产了渲染函数，脚本文件注入了构造函数。进而，在该视图组件被上层视图组件调用时，执行脚本文件中的构造函数，构造函数中覆写了数据对象的get方法，通过调用该get方法插入视图组件的数据模型，进而加载模板文件的渲染函数，通过渲染函数插入的数据模型，生成与视图组件对应的第一虚拟DOM树，将生成的第一虚拟DOM树传递至视图组件的根组件，在根组件获取到所有子视图组件的虚拟DOM树后，构建好完整的虚拟DOM树，并将完整的虚拟DOM树解析并渲染到页面，进而，该视图组件渲染完成。这样，由于低版本的浏览器无需模拟对象属性特色，直接就可以支持本实施例中的get方法来插入数据模型，进而可适用于一部分现有视图层框架无法适用的老旧版本浏览器，兼顾了多种主流框架，同时对浏览器又有高兼容性。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (6)

1.一种视图组件处理方法，其特征在于，包括：

在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；

在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；

加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成；

在所述调用覆写后的所述get方法时，所述方法还包括：生成所述数据模型的视图观察者；在对所述视图组件渲染期间，通过所述视图观察者将所述get方法调用过程中的访问数据记录在所述视图组件的依赖表中；

所述构造函数中覆写了所述视图组件的数据对象的设置set方法，在所述视图组件渲染完成后到所述组件销毁期间，所述方法还包括：

在所述视图组件的视图状态发生变更情况下，通过调用所述set方法来修改所述视图组件对应的数据模型；通过所述视图观察者将所述get方法修改的数据记录在所述视图组件的依赖表中；在所述修改的数据的类型为预设类型情况下，对所述视图组件进行渲染更新。

2.如权利要求1所述的方法，其特征在于，所述对所述视图组件进行渲染更新，包括：

获得所述视图组件初次渲染结果对应的静态部分的虚拟DOM树；

加载所述视图组件的动态渲染函数，通过所述动态渲染函数结合所述修改的数据，生成修改部分对应的虚拟DOM树；

将所述静态部分的虚拟DOM树与所述修改部分对应的虚拟DOM树结合，获得与所述视图组件对应的第二虚拟DOM树；

确定所述第一虚拟DOM树与所述第二虚拟DOM树的差异部分，将所述差异部分更新至页面。

3.如权利要求2所述的方法，其特征在于，所述将所述差异部分更新至页面，包括：

如果所述差异部分为第一DOM树中新增部分，为所述差异部分创建新增子组件节点；

如果所述差异部分为所述第一DOM树中属性状态变更部分，更新所述属性状态变更部分对应的属性状态；

如果所述差异部分为所述第一DOM树中删除部分，销毁所述删除部分。

4.一种电子设备，其特征在于，包括：

解析单元，用于在视图组件编译期间，对所述视图组件进行解析，获得与所述视图组件对应的模板文件和脚本文件，其中，所述模板文件包括所述视图组件的渲染函数，所述渲染函数基于所述模板文件的抽象语法树生成，所述脚本文件注入了所述视图组件的构造函数；

数据插入单元，用于在所述视图组件被上层视图组件调用时，执行所述视图组件的构造函数，所述构造函数中覆写了所述视图组件的数据对象的获取get方法，通过调用覆写后的所述get方法插入所述视图组件的数据模型；

渲染单元，用于加载所述视图组件的渲染函数，通过所述渲染函数结合所述数据模型，生成与所述视图组件对应的第一虚拟DOM树，将所述第一虚拟DOM树传递至所述视图组件的根组件，以使得在所述根组件获取到所有子视图组件的虚拟DOM树后，对完整的虚拟DOM树解析并渲染到页面，其中，在所述完整的虚拟DOM树渲染到页面时，所述视图组件渲染完成；

所述电子设备还包括：记录单元，用于在调用覆写后的所述get方法时，生成所述数据模型的视图观察者；在对所述视图组件渲染期间，通过所述视图观察者将所述get方法调用过程中的访问数据记录在所述视图组件的依赖表中；

所述构造函数中覆写了所述视图组件的数据对象的设置set方法，所述电子设备还包括：更新单元，用于在所述视图组件渲染完成后到所述组件销毁期间，在所述视图组件的视图状态发生变更情况下，通过调用所述set方法来修改所述视图组件对应的数据模型；通过所述视图观察者将所述get方法修改的数据记录在所述视图组件的依赖表中；在所述修改的数据的类型为预设类型情况下，对所述视图组件进行渲染更新。

5.一种电子设备，其特征在于，所述电子设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1-3中任一项所述的视图组件处理方法的步骤。

6.一种可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-3中任一项所述的视图组件处理方法的步骤。

Images