CN109542404B - 页面组件化的构建方法、装置、存储介质及电子设备 - Google Patents

Abstract

本公开涉及一种页面组件化的构建方法、装置、存储介质及电子设备，该方法包括：在渲染第一页面时，根据第一页面对应的页面组件的地址信息，获取页面组件，页面组件是预先开发完成的，地址信息是利用预设的设计器预先设置的；利用正则表达式对页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；根据地址信息，当页面组件中存在需要传递的第一参数时，对第一参数按照对应的参数类型进行对应的传递处理；执行对第一页面的页面加载；在第一页面的父页面对应的多个子页面均完成页面加载后，执行父页面的页面加载，第一页面为所述多个子页面中的任一子页面。因此，能够避免页面资源的重复加载，提高页面的渲染性能。

Description

页面组件化的构建方法、装置、存储介质及电子设备

技术领域

本公开涉及网页开发技术领域，具体地，涉及一种页面组件化的构建方法、装置、存储介质及电子设备。

背景技术

在企业级的网页应用开发中，常常需要将其中的公共业务逻辑展现抽象成页面组件，以便供多个页面应用。通常这些页面都是完整的页面，可以单独打开显示，但是如果将这些公共业务部分放在多个页面中，会显得代码的冗余，修改起来不够简便。现有技术中，通常采用脚本请求页面或者iframe的方式对页面组件进行引用，以简化操作，但是iframe会引起多个页面不易管理以及资源重复加载的问题，而脚本请求页面的方式会导致页面交互复杂以及加载时机不易掌握的问题。

发明内容

本公开的目的是提供一种页面组件化的构建方法、装置、存储介质及电子设备，能够克服上述的页面加载操作复杂，性能低的问题。

为了实现上述目的，本公开提供一种页面组件化的构建方法，所述方法包括：

在渲染第一页面时，根据所述第一页面对应的页面组件的地址信息，获取所述页面组件，所述页面组件是预先开发完成的，所述地址信息是利用预设的设计器预先设置的；

利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；

根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理；

执行对所述第一页面的页面加载；

在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面。

可选的，所述利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理，包括：

利用所述正则表达式去除所述页面组件中的注释；

利用所述正则表达式抽取所述页面组件的样式表、所述页面组件的脚本和所述第一页面的页面元素内容；

根据所述第一页面的页面标识符的值，对所述页面组件的样式表和脚本进行对应的处理，所述对应的处理包括：闭包处理、按序加载或者忽略；

将所述页面元素内容填充至第一容器中，所述第一容器是在对所述页面组件进行开发时，预先配置的用于存储所述页面组件的容器；

对所述页面元素内容中所有控件的识别符拼接第一前缀，所述第一前缀是根据所述第一页面所确定的用于区别其他页面的字符组合。

可选的，所述页面标识符为scope，所述根据所述第一页面的页面标识符的值，对所述页面组件的样式表和脚本进行对应的处理，所述对应的处理包括：闭包处理、按序加载或者忽略，包括：

当所述scope的值为view时，对所述页面组件的样式表进行闭包处理，以及对所述页面组件的脚本进行闭包处理；

当所述scope的值为prototype时，按照样式表之间的依赖关系对所述页面组件的样式表进行按序加载，以及按照脚本之间的依赖关系对所述页面组件的脚本进行按序加载；

当所述scope的值为main时，对所述页面组件的样式表和页面组件的脚本进行忽略。

可选的，所述根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理，包括：

利用所述正则表达式确定所述第一参数；

当所述第一参数为普通类型的参数时，将所述第一参数注入到所述页面组件的闭包中的全局变量中；

当所述第一参数为复杂类型的参数时，利用发布订阅的方式在所述第一页面、所述第一页面的父页面以及所述第一页面的父页面对应的多个子页面之间传递所述第一参数。

可选的，所述执行对所述第一页面的页面加载，包括：

通过预设的加载函数执行所述第一页面的页面加载；

所述在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面，包括：

在所述父页面对应的多个子页面均利用所述加载函数完成页面加载之后，利用所述加载函数执行所述父页面的页面加载。

根据本公开实施例的第二方法，提供一种页面组件化的构建装置，所述装置包括：

获取模块，用于在渲染第一页面时，根据所述第一页面对应的页面组件的地址信息，获取所述页面组件，所述页面组件是预先开发完成的，所述地址信息是利用预设的设计器预先设置的；

预处理模块，用于利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；

参数传递模块，用于根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理；

页面加载模块，用于执行对所述第一页面的页面加载；

所述页面加载模块，还用于在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面。

可选的，所述预处理模块，包括：

去除子模块，用于利用所述正则表达式去除所述页面组件中的注释；

抽取子模块，用于利用所述正则表达式抽取所述页面组件的样式表、所述页面组件的脚本和所述第一页面的页面元素内容；

处理子模块，用于根据所述第一页面的页面标识符的值，对所述页面组件的样式表和脚本进行对应的处理，所述对应的处理包括：闭包处理、按序加载或者忽略；

填充子模块，用于将所述页面元素内容填充至第一容器中，所述第一容器是在对所述页面组件进行开发时，预先配置的用于存储所述页面组件的容器；

拼接子模块，用于对所述页面元素内容中所有控件的识别符拼接第一前缀，所述第一前缀是根据所述第一页面所确定的用于区别其他页面的字符组合。

可选的，所述页面标识符为scope，所述处理子模块，用于：

当所述scope的值为view时，对所述页面组件的样式表进行闭包处理，以及对所述页面组件的脚本进行闭包处理；

当所述scope的值为prototype时，按照样式表之间的依赖关系对所述页面组件的样式表进行按序加载，以及按照脚本之间的依赖关系对所述页面组件的脚本进行按序加载；

当所述scope的值为main时，对所述页面组件的样式表和页面组件的脚本进行忽略。

可选的，所述参数传递模块，包括：

参数确定子模块，用于利用所述正则表达式确定所述第一参数；

参数处理子模块，用于当所述第一参数为普通类型的参数时，将所述第一参数注入到所述页面组件的闭包中的全局变量中；

所述参数处理子模块，还用于当所述第一参数为复杂类型的参数时，利用发布订阅的方式在所述第一页面、所述第一页面的父页面以及所述第一页面的父页面对应的多个子页面之间传递所述第一参数。

可选的，所述页面加载模块，用于：

通过预设的加载函数执行所述第一页面的页面加载；

所述页面加载模块，还用于：

在所述父页面对应的多个子页面均利用所述加载函数完成页面加载之后，利用所述加载函数执行所述父页面的页面加载。

本公开实施例的第三方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面任一项所述的页面组件化的构建方法的步骤。

本公开实施例的第四方面，提供一种电子设备，包括：

第三方面所述的计算机可读存储介质；以及

一个或者多个处理器，用于执行所述计算机可读存储介质中的计算机程序。

本公开所提供的技术方案，通过在渲染第一页面时，根据所述第一页面对应的页面组件的地址信息，获取所述页面组件，所述页面组件是预先开发完成的，所述地址信息是利用预设的设计器预先设置的；利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理；执行对所述第一页面的页面加载；在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面。因此，能够对页面进行组件化的构建，避免页面资源的重复加载，提高页面的渲染性能。

本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：

图1是根据一示例性实施例示出的一种页面组件化的构建方法的流程图；

图2是根据一示例性实施例示出的另一种页面组件化的构建方法的流程图；

图3是根据一示例性实施例示出的又一种页面组件化的构建方法的流程图；

图4是根据一示例性实施例示出的一种页面组件化的构建装置的框图；

图5是根据一示例性实施例示出的一种预处理模块的框图；

图6是根据一示例性实施例示出的一种参数传递模块的框图；

图7是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

以下结合附图对本公开的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本公开，并不用于限制本公开。

图1是根据一示例性实施例示出的一种页面组件化的构建方法的流程图，如图1所示，该方法包括以下步骤：

步骤101，在渲染第一页面时，根据第一页面对应的页面组件的地址信息，获取页面组件。

其中，页面组件是预先开发完成的，地址信息是利用预设的设计器预先设置的。

示例地，开发人员首先对第一页面进行开发，设计完成该第一页面中的所有页面组件，之后利用预设的UI设计器对第一页面的地址信息进行设置，该地址信息例如是统一资源定位符(英文：Uniform Resource Locator，缩写：URL)，又叫做网页地址，是互联网上标准的资源的地址(Address)，互联网上的每个文件都有一个唯一的URL，其中包含的信息指出网页对应文件的位置以及浏览器该如何对应进行处理。因此在进行页面渲染时，再利用该唯一的URL获取到需要对应的进行渲染的第一页面，也就是获取到该页面组件，进而能够针对第一页面的相应页面组件构建组件化的页面模块。

步骤102，利用正则表达式对页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理。

示例地，正则表达式是对字符串操作的一种逻辑公式，用预先定义好的一些特定字符及这些特定字符的组合，组成一个规则字符串，以这个规则字符串来表达对字符串的一种过滤逻辑，能够从大段的字符串中获取到想要的特定部分，也就是说，能够从页面组件中分别区分出注释、样式表、脚本以及页面元素内容，以便进行预设的处理。

步骤103，根据地址信息，当页面组件中存在需要传递的第一参数时，对第一参数按照对应的参数类型进行对应的传递处理。

示例地，在步骤102中对注释、样式表、脚本以及页面元素内容进行预处理之后，本步骤需要根据参数类型对参数进行相应的传递处理，例如参数可能是复杂类型的参数，并且存在不同页面之间需要进行交换，则需要根据订阅发布的方式对其进行传递，以便在构建完成组件化之后能够正常进行参数的数据传递，该发布订阅的方式是定义了一种一对多的依赖关系，让多个订阅者对象(子页面)能够同时监听某一个主题对象(父页面)，这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。

步骤104，执行对第一页面的页面加载。

示例地，通过预设的加载函数执行第一页面的页面加载，需要说明的是，在完成上述对页面组件中各个部分的处理之后，再利用预设的page_load函数进行第一页面的页面加载，以保证页面加载过程中的逻辑顺序。

步骤105，在第一页面的父页面对应的多个子页面均完成页面加载后，执行父页面的页面加载，其中，第一页面为多个子页面中的任一子页面。

示例地，在父页面对应的多个子页面均利用加载函数完成页面加载之后，利用加载函数执行父页面的页面加载。也就是说，当第一页面的父页面所对应的子页面有n个的时候，利用预设的加载函数完成这n个子页面的页面加载，再对第一页面的父页面进行页面加载。

综上所述，本公开所提供的技术方法，通过在渲染第一页面时，根据第一页面对应的页面组件的地址信息，获取页面组件，页面组件是预先开发完成的，地址信息是利用预设的设计器预先设置的；利用正则表达式对页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；根据地址信息，当页面组件中存在需要传递的第一参数时，对第一参数按照对应的参数类型进行对应的传递处理；执行对第一页面的页面加载；在第一页面的父页面对应的多个子页面均完成页面加载后，执行父页面的页面加载，第一页面为所述多个子页面中的任一子页面。因此，能够对页面进行组件化的构建，避免页面资源的重复加载，提高页面的渲染性能。

图2是根据一示例性实施例示出的另一种页面组件化的构建方法的流程图，如图2所示，步骤102所述的利用正则表达式对页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理，包括以下步骤：

步骤1021，利用正则表达式去除页面组件中的注释。

示例地，由于注释在页面组件化的构建时是并无影响，因此利用正则表达式从第一页面的页面组件中提取出注释，之后再将其去除。

步骤1022，利用正则表达式抽取页面组件的样式表、页面组件的脚本和第一页面的页面元素内容。

示例地，同样利用正则表达式，从第一页面的页面组件中分别提取页面组件的样式表、页面组件的脚本和第一页面的页面元素内容。

步骤1023，根据第一页面的页面标识符的值，对页面组件的样式表和脚本进行对应的处理。

其中，对应的处理包括：闭包处理、按序加载或者忽略，该页面标识符表示为scope。

示例地，闭包就是能够读取其他函数内部变量的函数，例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包处理可以理解成“将要处理的函数定义在一个函数内部的函数”。在本质上说，闭包是将函数内部和函数外部连接起来的桥梁。

示例地，当scope的值为view时，对页面组件的样式表进行闭包处理，以及对页面组件的脚本进行闭包处理。

当scope的值为view时，说明此时的样式表/脚本是该第一页面的页面组件自身所使用的样式表/脚本(“样式表/脚本”表示样式表或脚本)，因此可以将其定义在一个函数内部的函数(闭包处理)。

当scope的值为prototype时，按照样式表之间的依赖关系对页面组件的样式表进行按序加载，以及按照脚本之间的依赖关系对页面组件的脚本进行按序加载。

示例地，当scope的值为prototype时，说明该页面组件的样式表/脚本是该第一页面的页面组件所引用的外部样式表/脚本，需要按序进行加载，也就是先加载内部的样式表/脚本再加载外部的样式表/脚本，每个部分的样式表/脚本都对应有相应的加载顺序，在加载时仍然保持该顺序，按序加载。

当scope的值为main时，对页面组件的样式表和页面组件的脚本进行忽略。

也就是说，当scope的值为main时，说明该样式表/脚本属于所有引用的公共页面的样式表/脚本，因此可以直接忽略，可以统一在外层的公共页面进行引入。

步骤1024，将页面元素内容填充至第一容器中。

其中，第一容器是在对页面组件进行开发时，预先配置的用于存储页面组件的容器。

步骤1025，对页面元素内容中所有控件的识别符拼接第一前缀。

其中，第一前缀是根据第一页面所确定的用于区别其他页面的字符组合。

示例地，将页面元素内容填充到第一页面对应的第一容器中，以便对第一页面进行重新加载时，显示页面元素内容，同时为了对第一页面中的页面元素内容与其他页面进行区分，需要对其中的所有空间进行第一前缀的拼接，也就是在所有空间的标识符上拼接该第一前缀，该第一前缀能够将与其他页面组件中的页面元素内容区分开的，独一无二的字符组合。

示例地，需要说明的是，上述分别针对页面组件中的注释、样式表、脚本以及页面元素内容进行的预处理，没有明确的先后顺序，可以同步或者异步进行。

图3是根据一示例性实施例示出的又一种页面组件化的构建方法的流程图，如图3所示，步骤103所述的根据地址信息，当页面组件中存在需要传递的第一参数时，对第一参数按照对应的参数类型进行对应的传递处理，包括以下步骤：

步骤1031，利用正则表达式确定第一参数。

示例地，先解析该地址信息以确定存在需要传递的第一参数时，通过正则表达式提取该第一参数，之后再根据该第一参数的类型，分别确定执行步骤1032或者1033的操作。

步骤1032，当第一参数为普通类型的参数时，将第一参数注入到页面组件的闭包中的全局变量中。

其中，普通类型的参数包括八大基本类型，即整数类型byte、short、int、long，浮点类型float、doubl，字符类型char，布尔类型Boolean。也就是当第一参数为上述类型的参数时，将该第一参数直接作为闭包中的全局变量，以便后续渲染时进行传递。

步骤1033，当第一参数为复杂类型的参数时，利用发布订阅的方式在第一页面、第一页面的父页面以及第一页面的父页面对应的多个子页面之间传递第一参数。

其中，复杂类型的参数是指除了上述普通类型的参数以外的，对象型的参数，则利用发布订阅的方式在父页面和子页面之间进行传递。示例地，当父页面对某一信息进行发布，只有订阅了相关信息的子页面才能够获取到父页面发布的信息，进而获取到信息中的内容。

综上所述，本公开所提供的技术方案，通过在渲染第一页面时，根据第一页面对应的页面组件的地址信息，获取页面组件，页面组件是预先开发完成的，地址信息是利用预设的设计器预先设置的；利用正则表达式对页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；根据地址信息，当页面组件中存在需要传递的第一参数时，对第一参数按照对应的参数类型进行对应的传递处理；执行对第一页面的页面加载；在第一页面的父页面对应的多个子页面均完成页面加载后，执行父页面的页面加载，第一页面为所述多个子页面中的任一子页面。因此，能够对页面进行组件化的构建，避免页面资源的重复加载，提高页面的渲染性能。

图4是根据一示例性实施例示出的一种页面组件化的构建装置的框图，如图4所示，用于执行上述图1-图3中的任一所述的实施例，该装置400包括：

获取模块410，用于在渲染第一页面时，根据所述第一页面对应的页面组件的地址信息，获取所述页面组件，所述页面组件是预先开发完成的，所述地址信息是利用预设的设计器预先设置的。

预处理模块420，用于利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理。

参数传递模块430，用于根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理。

页面加载模块440，用于执行对所述第一页面的页面加载。

页面加载模块440，还用于在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面。

图5是根据一示例性实施例示出的一种预处理模块的框图，如图5所示，该预处理模块420包括：

去除子模块421，用于利用所述正则表达式去除所述页面组件中的注释。

抽取子模块422，用于利用所述正则表达式抽取所述页面组件的样式表、所述页面组件的脚本和所述第一页面的页面元素内容。

处理子模块423，用于根据所述第一页面的页面标识符的值，对所述页面组件的样式表和脚本进行对应的处理，所述对应的处理包括：闭包处理、按序加载或者忽略。

以及

填充子模块424，用于将所述页面元素内容填充至第一容器中，所述第一容器是在对所述页面组件进行开发时，预先配置的用于存储所述页面组件的容器。

拼接子模块425，用于对所述页面元素内容中所有控件的识别符拼接第一前缀，所述第一前缀是根据所述第一页面所确定的用于区别其他页面的字符组合。

可选的，所述页面标识符为scope，所述处理子模块423，用于：

当所述scope的值为view时，对所述页面组件的样式表进行闭包处理，以及对所述页面组件的脚本进行闭包处理；

当所述scope的值为prototype时，按照样式表之间的依赖关系对所述页面组件的样式表进行按序加载，以及按照脚本之间的依赖关系对所述页面组件的脚本进行按序加载；

当所述scope的值为main时，对所述页面组件的样式表和页面组件的脚本进行忽略。

图6是根据一示例性实施例示出的一种参数传递模块的框图，如图6所示，该参数传递模块430包括：

参数确定子模块431，用于利用所述正则表达式确定所述第一参数。

参数处理子模块432，用于当所述第一参数为普通类型的参数时，将所述第一参数注入到所述页面组件的闭包中的全局变量中。

所述参数处理子模块432，还用于当所述第一参数为复杂类型的参数时，利用发布订阅的方式在所述第一页面、所述第一页面的父页面以及所述第一页面的父页面对应的多个子页面之间传递所述第一参数。

可选的，所述页面加载模块440，用于：

通过预设的加载函数执行所述第一页面的页面加载；

所述页面加载模块440，还用于：

在所述父页面对应的多个子页面均利用所述加载函数完成页面加载之后，利用所述加载函数执行所述父页面的页面加载。

综上所述，本公开所提供的技术方案，通过在渲染第一页面时，根据第一页面对应的页面组件的地址信息，获取页面组件，页面组件是预先开发完成的，地址信息是利用预设的设计器预先设置的；利用正则表达式对页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；根据地址信息，当页面组件中存在需要传递的第一参数时，对第一参数按照对应的参数类型进行对应的传递处理；执行对第一页面的页面加载；在第一页面的父页面对应的多个子页面均完成页面加载后，执行父页面的页面加载，第一页面为所述多个子页面中的任一子页面。因此，能够对页面进行组件化的构建，避免页面资源的重复加载，提高页面的渲染性能。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图7是根据一示例性实施例示出的一种电子设备700的框图。如图7所示，该电子设备700可以包括：处理器701，存储器702。该电子设备700还可以包括多媒体组件703，输入/输出(I/O)接口704，以及通信组件705中的一者或多者。

其中，处理器701用于控制该电子设备700的整体操作，以完成上述的页面组件化的构建方法中的全部或部分步骤。存储器702用于存储各种类型的数据以支持在该电子设备700的操作，这些数据例如可以包括用于在该电子设备700上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等等。该存储器702可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件703可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器702或通过通信组件705发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口704为处理器701和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件705用于该电子设备700与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(Near FieldCommunication，简称NFC)，2G、3G或4G，或它们中的一种或几种的组合，因此相应的该通信组件705可以包括：Wi-Fi模块，蓝牙模块，NFC模块。

在一示例性实施例中，电子设备700可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，简称ASIC)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device，简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的页面组件化的构建方法。

在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述的页面组件化的构建方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器702，上述程序指令可由电子设备700的处理器701执行以完成上述的页面组件化的构建方法。

以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，可以对本公开的技术方案进行多种简单变型，这些简单变型均属于本公开的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本公开对各种可能的组合方式不再另行说明。

此外，本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。

Claims (10)

1.一种页面组件化的构建方法，其特征在于，所述方法包括：

在渲染第一页面时，根据所述第一页面对应的页面组件的地址信息，获取所述页面组件，所述页面组件是预先开发完成的，所述地址信息是利用预设的设计器预先设置的；

利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；

根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理；

执行对所述第一页面的页面加载；

在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面；

其中，所述利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理，包括：

利用所述正则表达式去除所述页面组件中的注释；

利用所述正则表达式抽取所述页面组件的样式表、所述页面组件的脚本和所述第一页面的页面元素内容；

根据所述第一页面的页面标识符的值，对所述页面组件的样式表和脚本进行对应的处理，所述对应的处理包括：闭包处理、按序加载或者忽略；

将所述页面元素内容填充至第一容器中，所述第一容器是在对所述页面组件进行开发时，预先配置的用于存储所述页面组件的容器；

对所述页面元素内容中所有控件的识别符拼接第一前缀，所述第一前缀是根据所述第一页面所确定的用于区别其他页面的字符组合。

2.根据权利要求1所述的方法，其特征在于，所述页面标识符为scope，所述根据所述第一页面的页面标识符的值，对所述页面组件的样式表和脚本进行对应的处理，所述对应的处理包括：闭包处理、按序加载或者忽略，包括：

当所述scope的值为view时，对所述页面组件的样式表进行闭包处理，以及对所述页面组件的脚本进行闭包处理；

当所述scope的值为prototype时，按照样式表之间的依赖关系对所述页面组件的样式表进行按序加载，以及按照脚本之间的依赖关系对所述页面组件的脚本进行按序加载；

当所述scope的值为main时，对所述页面组件的样式表和页面组件的脚本进行忽略。

3.根据权利要求1所述的方法，其特征在于，所述根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理，包括：

利用所述正则表达式确定所述第一参数；

当所述第一参数为普通类型的参数时，将所述第一参数注入到所述页面组件的闭包中的全局变量中；

当所述第一参数为复杂类型的参数时，利用发布订阅的方式在所述第一页面、所述第一页面的父页面以及所述第一页面的父页面对应的多个子页面之间传递所述第一参数。

4.根据权利要求1所述的方法，其特征在于，所述执行对所述第一页面的页面加载，包括：

通过预设的加载函数执行所述第一页面的页面加载；

所述在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面，包括：

在所述父页面对应的多个子页面均利用所述加载函数完成页面加载之后，利用所述加载函数执行所述父页面的页面加载。

5.一种页面组件化的构建装置，其特征在于，所述装置包括：

获取模块，用于在渲染第一页面时，根据所述第一页面对应的页面组件的地址信息，获取所述页面组件，所述页面组件是预先开发完成的，所述地址信息是利用预设的设计器预先设置的；

预处理模块，用于利用正则表达式对所述页面组件中的注释、样式表、脚本以及页面元素内容分别进行预设处理；

参数传递模块，用于根据所述地址信息，当所述页面组件中存在需要传递的第一参数时，对所述第一参数按照对应的参数类型进行对应的传递处理；

页面加载模块，用于执行对所述第一页面的页面加载；

所述页面加载模块，还用于在所述第一页面的父页面对应的多个子页面均完成页面加载后，执行所述父页面的页面加载，所述第一页面为所述多个子页面中的任一子页面；

其中，所述预处理模块，包括：

去除子模块，用于利用所述正则表达式去除所述页面组件中的注释；

抽取子模块，用于利用所述正则表达式抽取所述页面组件的样式表、所述页面组件的脚本和所述第一页面的页面元素内容；

处理子模块，用于根据所述第一页面的页面标识符的值，对所述页面组件的样式表和脚本进行对应的处理，所述对应的处理包括：闭包处理、按序加载或者忽略；

填充子模块，用于将所述页面元素内容填充至第一容器中，所述第一容器是在对所述页面组件进行开发时，预先配置的用于存储所述页面组件的容器；

拼接子模块，用于对所述页面元素内容中所有控件的识别符拼接第一前缀，所述第一前缀是根据所述第一页面所确定的用于区别其他页面的字符组合。

6.根据权利要求5所述的装置，其特征在于，所述页面标识符为scope，所述处理子模块，用于：

当所述scope的值为view时，对所述页面组件的样式表进行闭包处理，以及对所述页面组件的脚本进行闭包处理；

当所述scope的值为prototype时，按照样式表之间的依赖关系对所述页面组件的样式表进行按序加载，以及按照脚本之间的依赖关系对所述页面组件的脚本进行按序加载；

当所述scope的值为main时，对所述页面组件的样式表和页面组件的脚本进行忽略。

7.根据权利要求5所述的装置，其特征在于，所述参数传递模块，包括：

参数确定子模块，用于利用所述正则表达式确定所述第一参数；

参数处理子模块，用于当所述第一参数为普通类型的参数时，将所述第一参数注入到所述页面组件的闭包中的全局变量中；

所述参数处理子模块，还用于当所述第一参数为复杂类型的参数时，利用发布订阅的方式在所述第一页面、所述第一页面的父页面以及所述第一页面的父页面对应的多个子页面之间传递所述第一参数。

8.根据权利要求5所述的装置，其特征在于，所述页面加载模块，用于：

通过预设的加载函数执行所述第一页面的页面加载；

所述页面加载模块，还用于：

在所述父页面对应的多个子页面均利用所述加载函数完成页面加载之后，利用所述加载函数执行所述父页面的页面加载。

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

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

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1-4中任一项所述方法的步骤。

Images