CN109634654A - 一种页面封装方法、装置、系统、计算机设备和存储介质 - Google Patents

Abstract

本发明涉及计算机技术领域，具体为一种页面封装方法、装置、系统、计算机设备及存储介质。所述方法包括：根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件；扫描所述js文件，获取所有的标识符并识别需要加载的css资源、html资源和js资源；按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成相应的资源加载列表；使用异步并行方式将所述资源加载列表发送给服务端，接收所述服务端读取所述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。本发明通过规范组件编写，避免了全局变量和方法的冲突，实现了组件生命周期及资源依赖管理。

Description

一种页面封装方法、装置、系统、计算机设备和存储介质

技术领域

本发明涉及计算机领域，特别是涉及一种页面封装方法、装置、系统、计算机设备和存储介质。

背景技术

随着HTML(超文本标记语言，标准通用标记语言下的一个应用)的发展，越来越多的系统基于浏览器开发，前端WEB系统使用JavaScript作为编程语言编写系统的显示逻辑、操作逻辑以及与后端服务器的交互逻辑。但是一些大型WEB项目页面非常复杂，含有大量的业务逻辑，往往需要协调很多前端开发人员一起协同开发才能完成，并且由于业务变化，系统开发需要快速响应以应对业务的快速调整，因此对JavaScript开发带来了大规模开发、快速响应变化、支持功能重构等要求。但JavaScript是一种解释型的、动态的、基于原型的编程语言，在语言层面上并不支持模块化功能，也不支持命名空间，开发时非常容易导致命名冲突，一旦多名开发人员同时开发，或者项目规模变大，变量命名冲突问题就经常发生，该问题极大地抑制了JavaScript作为企业级大规模项目开发的能力。

目前在前端WEB开发中JavaScript常用的模块化方案为RequireJS(一个JavaScript模块加载器)方案，该方案是CommonJS(CommonJS是nodejs也就是服务器端广泛使用的模块化机制)模块化方案在前端浏览器上的实现，它将一个模块中的JavaScript代码写在一个js文件中，然后在调用方使用require函数进行加载，模块文件加载后，该文件中的所有全部变量被限制在一个js闭包中，从而实现了变量隔离的作用，可以避免变量命名冲突的问题。

但require函数执行时，需要执行同步的ajax(Asynchronous Javascript AndXML，指一种创建交互式网页应用的网页开发技术，可实现无须重新加载整个网页的基础上，实现网页的局部异步更新)远程调用获取js文件，该获取过程是同步阻塞的，当网络不稳定或者服务器负载过大时，会导致浏览器页面假死，甚至页面白屏的现象，体验非常不好。该方案没有实现WEB页面组件的封装，这部分工作依然需要开发人员自行开发解决。

发明内容

基于此，有必要针对上述的问题，提供一种页面封装方法、装置、系统、计算机设备和存储介质。

本发明一个实施例提供了一种页面封装方法，所述方法包括以下步骤：

根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件，所述组件模型定义包括组件基类定义、组件定义和页面定义，所述组件定义通过标识符声明该组件需要引入的资源；

扫描所述js文件，获取所有的所述标识符，通过所述标识符识别需要加载的css资源、html资源和js资源；

按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表；

使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，接收所述服务端读取上述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。

本发明一个实施例还提供了一种页面封装装置，所述装置包括：

js文件获取模块，用于根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件，所述组件模型定义包括组件基类定义、组件定义和页面定义，所述组件定义通过标识符声明该组件需要引入的资源；

扫描模块，与所述js文件加载模块相连，用于扫描所述js文件，获取所有的所述标识符，通过所述标识符识别需要加载的css资源、html资源和js资源；

合并模块，与所述扫描模块相连，用于按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表；

加载模块，与所述资源合并模块相连，用于使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，还用于接收所述服务端读取上述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。

本发明实施例还提供了一种页面封装系统，所述系统包括：

上述权利求所述的页面组件封装装置；以及

与所述页面封装装置通过网络相连的服务端。

本发明实施例还提供了一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行上述任一项权利要求所述页面封装方法的步骤。

本发明实施例还提供了一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行上述任一项权利要求所述页面封装方法的步骤。

本发明实施例提供了一种页面封装方法、装置、系统、计算机设备及存储介质。所述方法包括：根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件；扫描所述js文件，获取所有的标识符并识别需要加载的css资源、html资源和js资源；按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成相应的资源加载列表；使用异步并行方式将所述资源加载列表发送给服务端，接收所述服务端读取所述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。本发明通过规范组件编写，避免了全局变量和方法的冲突，实现了组件生命周期及资源依赖管理。

附图说明

图1为一个实施例中提供的一种页面封装方法的应用环境图；

图2为一个实施例中提供的一种页面封装方法的流程图；

图3为一个实施例中提供的一种页面封装方法资源加载过程图；

图4为一个实施例中页面结构资源依赖关系示意图；

图5为一个实施例中页面加载过程示意图；

图6为一个实施例中提供的一种页面封装装置的结构示意图；

图7为一个实施例中提供的一种页面封装系统的结构示意图；

图8为一个实施例中提供的一种计算机设备的内部结构图；

表1为一个实施例中资源类型及依赖关系说明。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

可以理解，本申请所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但除非特别说明，这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本申请的范围的情况下，可以将第一xx脚本称为第二xx脚本，且类似地，可将第二xx脚本称为第一xx脚本。

实施例一：

图1为一个实施例中提供的一种页面封装方法的应用环境图，如图1所示，在该应用环境中，包括前端110以及服务端120。

在本发明中，所述前端110包括手机、平板电脑、台式电脑等一切具备网页浏览功能的设备，事实上，本发明在具体实施时依赖于浏览器软件的执行，是计算机获取网页的一种具体方式，当然其中包含了与网页编写相关的技术规范。

在本发明中，所述服务端120的指的是网页数据提供端，其可能是单一的，也可以是多端合作实现的。所述前端110以及服务端120通过网络相连接。

本发明实施例提供的一种页面封装方法，应用于现有网络环境，无需增设新的硬件设备，也无需开发新的软件程序即可实现，通过所述页面封装方法，规范了页面组件编写过程，有效避免了全局变量、方法的冲突，实现了组件生命周期及资源依赖的有效管理。

实施例二：

在本发明一个实施例中，如图2所示，提出了一种页面封装方法，图3为与该加载方法对应的资源加载过程图，所述方法包括以下步骤：

S201，根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件，所述组件模型定义包括组件基类定义、组件定义和页面定义，所述组件定义通过标识符声明该组件需要引入的资源；

S202，扫描所述js文件，获取所有的所述标识符，通过所述标识符识别需要加载的css资源、html资源和js资源；

S203，按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表；

S204，使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，接收所述服务端读取上述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。

在本发明中，通过HTML文档中的script标签加载页面组件js文件，该js文件加载后自动执行其中定义的资源加载方法，在资源加载方法中依次扫描加载引入的css资源、html资源、js资源，如果文件中使用//@importCss标识符，则说明需要加载相应的css资源，如果文件中使用//@importHtml标识符，则说明需要加载相应的html资源，如果文件中使用//@importJs标识符，则说明需要加载相应的js资源，当然，标识符的具体形式也可以自行定义；通过扫描获取到所有的//@importCss标识符后，合并其中所需要加载的css文件路径，合并顺序与文件中定义的顺序一致，然后生成一个css文件加载列表，使用AJAX(指一种创建交互式网页应用的网页开发技术，可实现无须重新加载整个网页的基础上，实现网页的局部异步更新)将该css文件列表作为参数发送到服务端，服务端接收到需要加载的css文件列表，读取各个文件并一次性返回给前端；通过扫描获取到所有的//@importHtml标识符后，合并其中所需要加载的html片段文件路径，合并顺序与文件中定义的顺序一致，然后生成一个html片段加载列表，使用AJAX将该css文件列表作为参数发送到服务端，服务端接收到需要加载的html片段列表，读取各个文件并一次性返回给前端；通过扫描获取到所有的//@importJs标识符后，合并其中所需要加载的js组件文件路径，合并顺序与文件中定义的顺序一致，然后生成一个js组件文件加载列表，使用AJAX将该js组件文件列表作为参数发送到服务端，服务端接收到需要加载的js片段列表，读取各个文件并一次性返回给前端。其扫描的过程可以自行定义，既可以是按扫描顺序，当扫描到//@importCss标识符或//@importHtml标识符或//@importJs标识符后，立即将其归入对应的css或html或js文件列表，也可以先扫描全部的//@importCss标识符并将其归入对应的css文件列表后，再扫描//@importHtml、//@importJs标识符并将其归入对应的文件列表。

在本发明中，资源的获取通过AJAX并行执行，不会阻塞程序运行，加快程序执行速度，且不会造成浏览器假死、白屏的现象，提高用户体验。

在本发明中，组件定义代码如下：

组件中所有的变量、方法定义都在组件对象中，通过组件对象相互隔离，避免了变量冲突问题，如在组件A中定义的变量a，组件B中定义的变量a，二者虽然变量名相同，但处于不同的组件对象中，因此互不影响，实现了变量隔离。

在本发明中，执行步骤S204，使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，接收所述服务端读取上述资源列表后返回的资源后，在生成相应的加载完成事件、通知页面组件之前，还需要对所述返回的资源进行新一轮的扫描，确定其中是否包含新的依赖资源，该过程以同样的方法执行步骤S202～S204，直到最后一轮扫描未发现新的依赖资源后，生成相应的加载完成事件、通知页面组件。

本发明实施例提供的一种页面封装方法，规范了组件定义的方法，对组件的资源使用进行统一管理，通过标识符管理组件的资源依赖，实现了组件资源的依赖自描述，并行加载页面所依赖的资源，同时对相同资源进行合并加载，实现了JavaScript上的组件模块化规范，实现了页面封装，极大地加快了页面加载速度，防止了假死、白屏的出现，提高了用户体验。

作为上述实施例的一个优化方案，所述组件基类定义包括组件上下文context对象定义和生命周期管理方法定义。组件基类是所有页面组件的父类，任何页面组件必须继承该基类，基类中定义了组件上下文context对象，定义了组件之间通过context进行参数传递，此外还定义了生命周期管理方法，对资源的申请、释放进行了规范化管理，使各组件的生命周期一致，便于系统组件开发和管理。

作为上述方案的一个优化方案，所述生命周期管理方法包括初始化方法init和销毁方法destroy；所述初始化方法init用于初始化组件中的内部资源，包括生成显示对象，渲染html片段，加载json数据；所述销毁方法destroy用于销毁和回收组件申请的资源，包括关闭定时器，移除dom节点。基类组件定义的代码如下：

该基类是所有页面组件的父类，继承的组件必须实现initComponent方法，进行组件资源初始化。

作为上述方案的另一个优化方案，所述页面定义包括页面标题定义，所依赖的组件列表定义以及页面与页面之间的关系定义；页面对象通过以下步骤实现变量隔离：

将return放入一个立即执行的匿名函数中，返回一个字面量对象，所有引入组件所声明的变量都在所述字面量对象作用域中；

通过闭包获取所述return关键字返回的所述字面量对象，提取并执行其中定义的组件生命周期方法，完成页面渲染、事件函数绑定。

页面作为一个交互单元，定义了该页面中的资源集合，如页面标题、所依赖的组件列表，以及页面与页面之间的关系。页面定义的代码如下：

浏览器通过闭包获取到return关键字返回的字面量对象，提出其中定义的组件生命周期方法init、destroy，通过执行init方法进行页面组件的初始化，完成页面渲染、事件函数绑定等操作，实现了页面组件的变量隔离。

作为上述实施例的一个优化方案，所述生成相应的加载完成事件、通知页面组件，之后所述方法还包括，根据加载的所述css资源、所述html资源和所述js资源执行页面；具体包括以下步骤：

接收到加载完成通知，初始化页面所引入的组件，然后初始化页面，最后将初始化完成的组件渲染到浏览器上，初始化过程中，依次执行各组件的初始化方法，将组件中定义的变量、方法挂载在组件对象上；

页面DOM节点与用户交互；

用户交互完毕关闭页面时，依次执行各组件的销毁方法，回收页面资源，最终将页面销毁，防止内存泄漏。

实际该过程分为初始化阶段、运行阶段和销毁阶段：初始化阶段首先初始化页面所引入的组件，然后初始化页面，最后将初始化完成的组件渲染到浏览器上，初始化过程中，依次执行组件的init方法，通过组件的定义，将组件中定义的变量、方法等挂载在组件对象上，必须全局变量冲突；运行阶段即为页面DOM节点与用户交互的过程；用户交互完毕，当关闭该页面时，页面进入销毁阶段，依次执行各组件的destroy方法，回收页面资源，最终将页面销毁，防止内存泄漏。

作为上述实施例的一个优化方案，按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表包括以下步骤：

按所述标识符获取的先后顺序，在本地缓存中搜索需要加载的所述css资源、所述html资源和所述js资源，若本地缓存中存在相同资源，则从本地缓存中调用该资源；

对于本地缓存中未匹配到相同资源的剩余所述css资源、所述html资源和所述js资源，则按所述标识符获取的先后顺序分别合并其文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表。

按该步骤合并相同类型的资源请求，包括了将所述资源请求与本地缓存相匹配的过程，当在本地缓存中匹配到相同资源时，则不再请求该资源，提高了资源请求的针对性，节约了网络资源，可以进一步提高网页速度，减少浏览器的负担。

实施例三：

以下从一具体实施例来说明本发明所述一种页面封装方法的实施过程。图4为本实施例页面结构资源依赖关系示意图，图5为本实施例中页面加载过程示意图；表1为本实施例中资源类型及依赖关系说明，其加载过程为：

S501，浏览器访问/index.html，获取html文档；

S502，通过所述html文档中的script标签加载本页面全局样式表/index.css；

S503，加载页面组件/index.js；

S504，所述页面组件/index.js加载后自动执行其中定义的资源加载方法，在资源加载方法中依次扫描加载引入的css资源、html资源、js资源，在本例中，/index.js组件依赖于/news.js、/detail.js；

S505，合并所有的css资源请求，如果发现本地缓存中已经存在该css资源，则不再请求，同理，合并所有的html资源请求以及所有的js资源请求，本例中，合并/news.js、/detail.js文件的加载；分别对css资源、html资源、js资源发起资源加载请求，该请求发起为并行方式执行，且对同一种类型的资源，只发起一次请求，极大地提升了页面加载速度，/news.js、/detail.js中的组件因为继承了APPC.Component基类，所有的组件变量、方法都被封装在该组件内部，因而不会造成全局变量冲突问题；

S506，/news.js、/detail.js加载完毕后，继续分析这两个组件中的依赖；

S507，发现/news.js组件还继续依赖了css资源/head.css，以及html资源/tpl.html，则重复S504～S505，继续进行依赖资源加载，如此循环，直到所有的资源都被加载完毕。

当所有依赖的组件和资源都加载完成后，将执行/index.js页面组件上的init方法，进行页面初始化，同时渲染页面；当页面渲染结束后，页面就可以使用了；用户与页面交互完毕后，关闭该页面，该关闭动作触发/index.js页面组件上的destroy方法，销毁页面，释放该页面所占用的资源。

本发明使用组件基类定义的方式，并通过JavaScript的自运行匿名函数机制，实现了全局变量和方法的隔离，避免了变量冲突，并定义了组件的生命周期管理，以及通过资源依赖的方式，进行组件资源的以异步并行方式自动导入，加快页面加载速度，解决了页面假死等问题，完整实现了基于JavaScript语言的模块化管理方案，从而可以基于该模块化方案，实现复杂的大规模前端WEB系统开发。

表1

实施例四：

在本发明一个实施例中，如图6所示，提出了一种页面封装装置600，所述装置包括：

js文件获取模块601，用于根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件，所述组件模型定义包括组件基类定义、组件定义和页面定义，所述组件定义通过标识符声明该组件需要引入的资源；

扫描模块602，与所述js文件获取模块601相连，用于扫描所述js文件，获取所有的所述标识符，通过所述标识符识别需要加载的css资源、html资源和js资源；

合并模块603，与所述扫描模块相连602，用于按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表；

加载模块604，与所述合并模块603相连，用于使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，还用于接收所述服务端读取上述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。

在本发明中，所述js文件获取模块601通过HTML文档中的script标签加载页面组件js文件，该js文件加载后自动执行其中定义的资源加载方法，在资源加载方法中依次扫描加载引入的css资源、html资源、js资源，如果文件中使用//@importCss标识符，则说明需要加载相应的css资源，如果文件中使用//@importHtml标识符，则说明需要加载相应的html资源，如果文件中使用//@importJs标识符，则说明需要加载相应的js资源，当然，标识符的具体形式也可以自行定义；通过扫描获取到所有的//@importCss标识符后，合并其中所需要加载的css文件路径，合并顺序与文件中定义的顺序一致，然后生成一个css文件加载列表，使用AJAX(指一种创建交互式网页应用的网页开发技术，可实现无须重新加载整个网页的基础上，实现网页的局部异步更新)将该css文件列表作为参数发送到服务端，服务端接收到需要加载的css文件列表，读取各个文件并一次性返回给前端；通过扫描获取到所有的//@importHtml标识符后，合并其中所需要加载的html片段文件路径，合并顺序与文件中定义的顺序一致，然后生成一个html片段加载列表，使用AJAX将该css文件列表作为参数发送到服务端，服务端接收到需要加载的html片段列表，读取各个文件并一次性返回给前端；通过扫描获取到所有的//@importJs标识符后，合并其中所需要加载的js组件文件路径，合并顺序与文件中定义的顺序一致，然后生成一个js组件文件加载列表，使用AJAX将该js组件文件列表作为参数发送到服务端，服务端接收到需要加载的js片段列表，读取各个文件并一次性返回给前端。其扫描的过程可以自行定义，既可以是按扫描顺序，当扫描到//@importCss标识符或//@importHtml标识符或//@importJs标识符后，立即将其归入对应的css或html或js文件列表，也可以先扫描全部的//@importCss标识符并将其归入对应的css文件列表后，再扫描//@importHtml、//@importJs标识符并将其归入对应的文件列表。

在本发明中，加载模块604采用并行执行的方法，不会阻塞程序运行，加快程序执行速度，且不会造成浏览器假死、白屏的现象，提高用户体验。

在本发明中，组件定义代码如下：

组件中所有的变量、方法定义都在组件对象中，通过组件对象相互隔离，避免了变量冲突问题，如在组件A中定义的变量a，组件B中定义的变量a，二者虽然变量名相同，但处于不同的组件对象中，因此互不影响，实现了变量隔离。

在本发明中，组件中所有的变量、方法定义都在组件对象中，通过组件对象相互隔离，避免了变量冲突问题，如在组件A中定义的变量a，组件B中定义的变量a，二者虽然变量名相同，但处于不同的组件对象中，因此互不影响，实现了变量隔离。

在本发明中，加载模块604使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，接收所述服务端读取上述资源列表后返回的资源后，在生成相应的加载完成事件、通知页面组件之前，还需要对所述返回的资源进行新一轮的扫描，确定其中是否包含新的依赖资源，直到最后一轮扫描未发现新的依赖资源后，生成相应的加载完成事件、通知页面组件。

本发明实施例提供的一种页面封装装置600，规范了组件定义，对组件的资源使用进行统一管理，通过标识符管理组件的资源依赖，实现了组件资源的依赖自描述，并行加载页面所依赖的资源，同时对相同资源进行合并加载，实现了JavaScript上的组件模块化规范，实现了页面封装，极大地加快了页面加载速度，防止了假死、白屏的出现，提高了用户体验。

作为上述实施例的一个优化方案，所述组件基类定义包括组件上下文context对象定义和生命周期管理方法定义。组件基类是所有页面组件的父类，任何页面组件必须继承该基类，基类中定义了组件上下文context对象，定义了组件之间通过context进行参数传递，此外还定义了生命周期管理方法，对资源的申请、释放进行了规范化管理，使各组件的生命周期一致，便于系统组件开发和管理。

作为上述方案的一个优化方案，所述生命周期管理方法包括初始化方法init和销毁方法destroy；所述初始化方法init用于初始化组件中的内部资源，包括生成显示对象，渲染html片段，加载json数据；所述销毁方法destroy用于销毁和回收组件申请的资源，包括关闭定时器，移除dom节点。基类组件定义的代码如下：

该基类是所有页面组件的父类，继承的组件必须实现initComponent方法，进行组件资源初始化。

作为上述方案的另一个优化方案，所述页面定义包括页面标题定义，所依赖的组件列表定义以及页面与页面之间的关系定义；页面对象通过以下步骤实现变量隔离：

将return放入一个立即执行的匿名函数中，返回一个字面量对象，所有引入组件所声明的变量都在所述字面量对象作用域中；

通过闭包获取所述return关键字返回的所述字面量对象，提取并执行其中定义的组件生命周期方法，完成页面渲染、事件函数绑定。

页面作为一个交互单元，定义了该页面中的资源集合，如页面标题、所依赖的组件列表，以及页面与页面之间的关系。页面定义的代码如下：

浏览器通过闭包获取到return关键字返回的字面量对象，提出其中定义的组件生命周期方法init、destroy，通过执行init方法进行页面组件的初始化，完成页面渲染、事件函数绑定等操作，实现了页面组件的变量隔离。

作为上述实施例的一个优化方案，所述装置还包括执行模块，用于：

接收到加载完成通知，初始化页面所引入的组件，然后初始化页面，最后将初始化完成的组件渲染到浏览器上，初始化过程中，依次执行各组件的初始化方法，将组件中定义的变量、方法挂载在组件对象上；

页面DOM节点与用户交互；

用户交互完毕关闭页面时，依次执行各组件的销毁方法，回收页面资源，最终将页面销毁，防止内存泄漏。

实际该过程分为初始化阶段、运行阶段和销毁阶段：初始化阶段首先初始化页面所引入的组件，然后初始化页面，最后将初始化完成的组件渲染到浏览器上，初始化过程中，依次执行组件的init方法，通过组件的定义，将组件中定义的变量、方法等挂载在组件对象上，必须全局变量冲突；运行阶段即为页面DOM节点与用户交互的过程；用户交互完毕，当关闭该页面时，页面进入销毁阶段，依次执行各组件的destroy方法，回收页面资源，最终将页面销毁，防止内存泄漏。

作为上述实施例的一个优化方案，所述加载模块具体用于：

按所述标识符获取的先后顺序，在本地缓存中搜索需要加载的所述css资源、所述html资源和所述js资源，若本地缓存中存在相同资源，则从本地缓存中调用该资源；

对于本地缓存中未匹配到相同资源的剩余所述css资源、所述html资源和所述js资源，则按所述标识符获取的先后顺序分别合并其文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表。

按该步骤合并相同类型的资源请求，包括了将所述资源请求与本地缓存相匹配的过程，当在本地缓存中匹配到相同资源时，则不再请求该资源，提高了资源请求的针对性，节约了网络资源，可以进一步提高网页速度，减少浏览器的负担。

实施例五：

本发明的一个实施例还提供了一种页面封装系统，如图7所示，所述系统包括：

实施例四所述的页面封装装置701；以及

与所述页面组件封装装置通过网络相连的服务端702。

本发明实施例提供的一种页面封装系统，规范了组件定义，对组件的资源使用进行统一管理，通过标识符管理组件的资源依赖，实现了组件资源的依赖自描述，并行加载页面所依赖的资源，同时对相同资源进行合并加载，实现了JavaScript上的组件模块化规范，实现了页面封装，极大地加快了页面加载速度，防止了假死、白屏的出现，提高了用户体验。

实施例六：

图8示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是本发明上面实施例中的前端110。

该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中，存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统，还可存储有计算机程序，该计算机程序被处理器执行时，可使得处理器实现本发明实施例提供的页面封装方法。该内存储器中也可储存有计算机程序，该计算机程序被处理器执行时，可使得处理器执行本发明实施例提供的页面封装方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图8中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，本申请提供的一种页面封装装置可以实现为一种计算机程序的形式，计算机程序可在如图8所示的计算机设备上运行。计算机设备的存储器中可存储组成该页面封装装置的各个程序模块，比如，图6所示的js文件获取模块601、扫描模块602、合并模块603和加载模块604。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例所述的页面封装方法的步骤。

例如，图8所示的计算机设备可以通过如图6所示的页面封装装置中的js文件获取模块601执行步骤S201；计算机设备可通过扫描模块602执行步骤S202；计算机设备可通过合并模块603执行步骤S203；计算机设备可通过加载模块604执行步骤S204。

在一个实施例中，还提供了一种计算机可读存储介质，计算机可读存储介质上存储计算机程序，计算机程序被处理器执行时，使得处理器执行本说明书中描述的本申请各个实施例所述页面封装方法的步骤。

应该理解的是，虽然本发明各实施例的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，各实施例中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面封装方法，其特征在于，所述方法包括以下步骤：

根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件，所述组件模型定义包括组件基类定义、组件定义和页面定义，所述组件定义通过标识符声明该组件需要引入的资源；

扫描所述js文件，获取所有的所述标识符，通过所述标识符识别需要加载的css资源、html资源和js资源；

按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表；

使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，接收所述服务端读取上述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。

2.如权利要求1所述的一种页面封装方法，其特征在于，所述组件基类定义包括组件上下文context对象定义和生命周期管理方法定义。

3.如权利要求2所述的一种页面封装方法，其特征在于，所述生命周期管理方法包括初始化方法和销毁方法；所述初始化方法用于初始化组件中的内部资源，包括生成显示对象，渲染html片段，加载json数据；所述销毁方法用于销毁和回收组件申请的资源，包括关闭定时器，移除dom节点。

4.如权利要求2所述的一种页面封装方法，其特征在于，所述页面定义包括页面标题定义，所依赖的组件列表定义以及页面与页面之间的关系定义；页面对象通过以下步骤实现变量隔离：

将return放入一个立即执行的匿名函数中，返回一个字面量对象，所有引入组件所声明的变量都在所述字面量对象作用域中；

通过闭包获取所述return关键字返回的所述字面量对象，提取并执行其中定义的组件生命周期方法，完成页面渲染、事件函数绑定。

5.如权利要求1所述的一种页面封装方法，其特征在于，所述生成相应的加载完成事件、通知页面组件，之后所述方法还包括，根据加载的所述css资源、所述html资源和所述js资源执行页面；具体包括以下步骤：

接收到加载完成通知，初始化页面所引入的组件，然后初始化页面，最后将初始化完成的组件渲染到浏览器上，初始化过程中，依次执行各组件的初始化方法，将组件中定义的变量、方法挂载在组件对象上；

页面DOM节点与用户交互；

用户交互完毕关闭页面时，依次执行各组件的销毁方法，回收页面资源，最终将页面销毁，防止内存泄漏。

6.如权利要求1所述的一种页面封装方法，其特征在于，按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表包括以下步骤：

按所述标识符获取的先后顺序，在本地缓存中搜索需要加载的所述css资源、所述html资源和所述js资源，若本地缓存中存在相同资源，则从本地缓存中调用该资源；

对于本地缓存中未匹配到相同资源的剩余所述css资源、所述html资源和所述js资源，则按所述标识符获取的先后顺序分别合并其文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表。

7.一种页面封装装置，所述装置包括：

js文件获取模块，用于根据HTML文档中的script标签加载符合组件模型定义的页面组件js文件，所述组件模型定义包括组件基类定义、组件定义和页面定义，所述组件定义通过标识符声明该组件需要引入的资源；

扫描模块，与所述js文件获取模块相连，用于扫描所述js文件，获取所有的所述标识符，通过所述标识符识别需要加载的css资源、html资源和js资源；

合并模块，与所述扫描模块相连，用于按所述标识符获取的先后顺序分别合并所述css资源、所述html资源和所述js资源的文件路径，并分别生成css资源加载列表、html资源加载列表和js资源加载列表；

加载模块，与所述合并模块相连，用于使用异步并行方式将所述css资源加载列表、所述html资源加载列表和所述js资源加载列表发送给服务端，还用于接收所述服务端读取上述资源列表后返回的资源，并生成相应的加载完成事件、通知页面组件。

8.一种页面封装系统，所述系统包括：

权利求7所述的页面封装装置；以及与所述页面组件封装装置通过网络相连的服务端。

9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行权利要求1至6中任一项权利要求所述页面封装方法的步骤。

10.一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行权利要求1至6中任一项权利要求所述页面封装方法的步骤。