CN117708463A - 页面加载方法、装置、电子设备和计算机可读介质 - Google Patents

Abstract

本发明公开了页面加载方法、装置、电子设备和计算机可读介质，涉及组件开发技术领域。该方法的一具体实施方式包括：从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件；从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值；将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。该实施方式能够解决采用rem开发的组件库无法对外提供一套适配各种项目的组件的技术问题。

Description

页面加载方法、装置、电子设备和计算机可读介质

技术领域

本发明涉及组件开发技术领域，尤其涉及一种页面加载方法、装置、电子设备和计算机可读介质。

背景技术

目前，css样式一般采用三种方式进行开发：采用vw、vh进行开发，采用px进行开发和采用rem进行开发。rem开发方式可以实现响应式，但是在开发组件库时主要存在以下技术问题：

1、因为组件库是需要被其它项目引用的，如果项目中用的rem基准值(也就是根元素字体大小)和组件库的rem基准值不一样，开发者需要处理以哪一边的值为基准进行改动，但是无论改动项目还是改动组件库都不是最优选择，无法实现统一性。

2、由于组件库会被多个项目引用，这会导致组件库适配了项目A的基准值，但是无法适配项目B的基准值，导致项目B在引用组件库时会出现问题，因此组件库无法对外提供一套适配各种项目的组件。

发明内容

有鉴于此，本发明实施例提供一种页面加载方法、装置、电子设备和计算机可读介质，以解决采用rem开发的组件库无法对外提供一套适配各种项目的组件的技术问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种页面加载方法，包括：

从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件；

从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值；

将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

可选地，从服务端获取js文件，包括：

通过script标签的src属性，从服务端获取js文件；

其中，所述src属性的属性值为js文件在服务端的URL地址。

可选地，通过script标签的src属性，从服务端获取js文件，包括：

从script标签的src属性获取js文件在服务端的URL地址；

以所述js文件在服务端的URL地址和当前页面中所有元素ID为入参，调用js文件接口；

接收所述js文件接口返回的出参，所述出参为所述当前页面中所有元素的js文件。

可选地，从所述服务端获取css文件，包括：

通过style标签的src属性，从服务端获取css文件；

其中，所述src属性的属性值为css文件在服务端的URL地址。

可选地，通过style标签的src属性，从服务端获取css文件，包括：

从style标签的src属性获取css文件在服务端的URL地址；

以所述css文件在服务端的URL地址和当前页面中所有元素ID为入参，调用css文件接口；

接收所述css文件接口返回的出参，所述出参为所述当前页面中所有元素的css文件。

可选地，从所述css文件中提取出各个rem值，包括：

采用js原生方法和正则表达式全局匹配出所述css文件中的各个rem值。

可选地，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值，包括：

对于每个rem值，将所述rem值除以所述js文件对应的组件库中设置的根元素字体大小再乘以当前页面的根元素字体大小，从而计算得到新的rem值。

另外，根据本发明实施例的另一个方面，提供了一种页面加载装置，包括：

第一加载模块，用于从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件；

计算模块，用于从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值；

第二加载模块，用于将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

可选地，所述第一加载模块还用于：

通过script标签的src属性，从服务端获取js文件；

其中，所述src属性的属性值为js文件在服务端的URL地址。

可选地，所述第一加载模块还用于：

从script标签的src属性获取js文件在服务端的URL地址；

以所述js文件在服务端的URL地址和当前页面中所有元素ID为入参，调用js文件接口；

接收所述js文件接口返回的出参，所述出参为所述当前页面中所有元素的js文件。

可选地，所述第一加载模块还用于：

通过style标签的src属性，从服务端获取css文件；

其中，所述src属性的属性值为css文件在服务端的URL地址。

可选地，所述第一加载模块还用于：

从style标签的src属性获取css文件在服务端的URL地址；

以所述css文件在服务端的URL地址和当前页面中所有元素ID为入参，调用css文件接口；

接收所述css文件接口返回的出参，所述出参为所述当前页面中所有元素的css文件。

可选地，所述计算模块还用于：

采用js原生方法和正则表达式全局匹配出所述css文件中的各个rem值。

可选地，所述计算模块还用于：

对于每个rem值，将所述rem值除以所述js文件对应的组件库中设置的根元素字体大小再乘以当前页面的根元素字体大小，从而计算得到新的rem值。

根据本发明实施例的另一个方面，还提供了一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行时，所述一个或多个处理器实现上述任一实施例所述的方法。

根据本发明实施例的另一个方面，还提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一实施例所述的方法。

根据本发明实施例的另一个方面，还提供了一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述任一实施例所述的方法。

上述发明中的一个实施例具有如下优点或有益效果：因为采用从css文件中提取出各个rem值，根据当前页面的根元素字体大小、js文件对应的组件库中设置的根元素字体大小和各个rem值，分别计算各个新的rem值，将css文件中各个rem值替换为各个新的rem值，并加载css文件的技术手段，所以克服了现有技术中采用rem开发的组件库无法对外提供一套适配各种项目的组件的技术问题。本发明实施例在页面引用组件库时对css文件中的rem值进行换算，使其适配所有页面。开发者在开发组件库时可以随意使用rem布局，实现响应式页面，不用考虑在哪个页面中引用，不用考虑页面的根元素字体大小，也不用考虑页面的布局方式，即使页面中使用rem、vw或px布局，也不影响，因为这些布局方式是可以共存的。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。其中：

图1是根据本发明实施例的页面加载方法的流程图；

图2是根据本发明实施例的在不同项目开发的页面中引用采用rem开发的组件库的示意图；

图3是根据本发明一个可参考实施例的页面加载方法的流程图；

图4是根据本发明另一个可参考实施例的页面加载方法的流程图；

图5是根据本发明实施例的页面加载装置的示意图；

图6是本发明实施例可以应用于其中的示例性系统架构图；

图7是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要说明的是，本公开的技术方案中，所涉及的用户个人信息的采集、收集、更新、分析、处理、使用、传输、存储等方面，均符合相关法律法规的规定，被用于合法的用途，且不违背公序良俗。对用户个人信息采取必要措施，防止对用户个人信息数据的非法访问，维护用户个人信息安全、网络安全和国家安全。

图1是根据本发明实施例的页面加载方法的流程图。作为本发明的一个实施例，如图1所示，所述页面加载方法可以包括：

步骤101，从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件。

当用户在浏览器上打开页面时，终端从服务端获取js文件(即JavaScript文件)，并加载该js文件，在加载该js文件的过程中，从服务端获取该js文件对应的css文件。

需要说明的是，开发者采用rem开发方式完成组件库的开发后，对组件库代码进行打包，一般会打包出两个文件，一个是js文件(即js代码)，一个是css文件。其中，js文件主要包含的是用户的交互逻辑，例如：1)用户点击按钮，需要展示一个弹窗，还是请求接口，还是进行页面跳转；2)页面中有输入框，可以根据用户实时输入的数据进行判断，如果是电话号要去验证是否合理，是否满足11位等。css文件主要包含的是页面的布局，比如页面元素的大小、位置、颜色等页面样式数据，主要用于把页面进行美化，布局相对合理的方式呈现给用户，提高用户体验，例如：1)文案标题的颜色、字体大小、宽高等；2)如果是图片，则需要规定图片大小、位置等。

步骤102，从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值。

终端从服务端获取到js文件对应的css文件后，先不加载css文件，而是先对css文件中的各个rem值进行换算，得到各个新的rem值，将各个新的rem值赋值到css文件中后再加载css文件。

可选地，从所述css文件中提取出各个rem值，包括：采用js原生方法和正则表达式全局匹配出所述css文件中的各个rem值。比如，可以采用js原生方法replace和正则表达式全局匹配rem关键字，将匹配到的rem值按照一定的比例进行换算，最后将换算后的rem值重新赋值回去。例如，组件库对应的css文件中图片宽度是3rem(width：3rem)，经过换算并重新赋值后为图片宽度是1.5rem(width：1.5rem)。

可选地，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值，包括：对于每个rem值，将所述rem值除以所述js文件对应的组件库中设置的根元素字体大小再乘以当前页面的根元素字体大小，从而计算得到新的rem值。具体地，对于在css文件中匹配出的每个rem值，将该rem值除以组件库中设置的根元素字体大小(html的font-size)再乘以当前页面的根元素字体大小(html的font-size)，计算得到的结果即为新的rem值。

例如，100/16*32＝xx

其中，100-代表的是开发组件库时设置的css文件中的rem值为100rem；16-代表的是组件库中设置的html的font-size为16px；32-代表的是当前页面的html的font-size为32px；xx-代表的是最终计算的结果，真正加载到当前页面中的rem值。

需要说明的是，同一个项目会开发多个页面，那么这些页面的根元素字体大小通常是一样的，但是不同项目开发的页面的根元素字体大小可能是不一样的。

如图2所示，项目A开发了页面A，项目B开发了页面B，项目C开发了页面C。当页面A引用采用rem开发的组件库时，在加载css文件前先对css文件中的rem值进行换算，对于每个rem值，将rem值除以组件库中设置的根元素字体大小再乘以页面A的根元素字体大小，从而计算得到新的rem值，将新的rem值加载到页面A中。同理，当页面B引用采用rem开发的组件库时，在加载css文件前先对css文件中的rem值进行换算，对于每个rem值，将rem值除以组件库中设置的根元素字体大小再乘以页面B的根元素字体大小，从而计算得到新的rem值，将新的rem值加载到页面B中。当页面C引用采用rem开发的组件库时，在加载css文件前先对css文件中的rem值进行换算，对于每个rem值，将rem值除以组件库中设置的根元素字体大小再乘以页面C的根元素字体大小，从而计算得到新的rem值，将新的rem值加载到页面C中。

步骤103，将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

对css文件中各个rem值进行换算后，将css文件中的各个rem值分别替换为各个新的rem值，得到新的css文件，最后通过style标签将新的css文件加载到当前页面的head标签中，因此，页面中的所有元素(即组件)加载该css文件中各自对应的css数据，使得采用rem开发的组件适配当前页面。

rem值是根据页面的根元素字体大小决定的，例如，根元素字体大小为16px，那么1rem就代表的是16px，2rem代表的是2*16，为32px。px是最基本的布局单位，vw是根据当前设备宽带决定的，100vw代表的是整个视口的宽度，1vw代表的是视口宽度的百分之一，所以vw只和视口宽度有关系。在页面布局中，rem、vw和px这三种布局方式都可以使用，也可以混合使用，由于vw和px这两种布局方式不依赖当前页面的属性，所以只需转换使用rem布局的元素，vw和px布局的元素不需要处理，直接加载即可。

根据上面所述的各种实施例，可以看出本发明实施例通过从css文件中提取出各个rem值，根据当前页面的根元素字体大小、js文件对应的组件库中设置的根元素字体大小和各个rem值，分别计算各个新的rem值，将css文件中各个rem值替换为各个新的rem值，并加载css文件的技术手段，解决了现有技术中采用rem开发的组件库无法对外提供一套适配各种项目的组件的技术问题。本发明实施例在页面引用组件库时对css文件中的rem值进行换算，使其适配所有页面。开发者在开发组件库时可以随意使用rem布局，实现响应式页面，不用考虑在哪个页面中引用，不用考虑页面的根元素字体大小，也不用考虑页面的布局方式，即使页面中使用rem、vw或px布局，也不影响，因为这些布局方式是可以共存的。

图3是根据本发明一个可参考实施例的页面加载方法的流程图。作为本发明的又一个实施例，如图3所示，所述页面加载方法可以包括：

步骤301，通过script标签的src属性，从服务端获取js文件并加载所述js文件；其中，所述src属性的属性值为js文件在服务端的URL地址。

可选地，从服务端获取js文件，包括：通过script标签的src属性，从服务端获取js文件；其中，所述src属性的属性值为js文件在服务端的URL地址。开发者采用rem开发方式完成组件库的开发后，将js文件和css文件上传至服务端，以供各个项目引用。终端通过script标签上的src属性，获取到js文件在服务端的URL地址，然后从服务端获取js文件。

在本发明的实施例中，从服务端获取并加载js文件一般有两种方式：1)直接通过script标签的方式，从服务端获取并加载js文件，script是javascript的一个标签，因此可以通过script标签上的src属性来获取并加载js文件；2)通过js方法动态加载的方式，首先通过document.createElement(‘script’)方法创造一个script标签，然后在通过该script标签从服务端获取并加载js文件。

可选地，通过script标签的src属性，从服务端获取js文件，包括：从script标签的src属性获取js文件在服务端的URL地址；以所述js文件在服务端的URL地址和当前页面中所有元素ID为入参，调用js文件接口；接收所述js文件接口返回的出参，所述出参为所述当前页面中所有元素的js文件。在本发明的一些实施例中，可以通过调用js文件接口的方式来获取js文件，具体地，先从script标签的src属性(src属性的属性值为js文件在服务端的URL地址)获取js文件在服务端的URL地址，然后以js文件在服务端的URL地址和用户当前打开的页面中所有元素(即组件)ID为入参，调用js文件接口，从而接收该js文件接口返回的出参，即该页面中所有元素的js文件。

在本发明的一些实施例中，在调用js文件接口时，可以仅将js文件在服务端的URL地址作为入参，那么js文件接口返回的出参为开发者打包的整个js文件。

步骤302，在加载所述js文件的过程中，通过style标签的src属性，从服务端获取css文件；其中，所述src属性的属性值为css文件在服务端的URL地址。

可选地，从所述服务端获取css文件，包括：通过style标签的src属性，从服务端获取css文件；其中，所述src属性的属性值为css文件在服务端的URL地址。开发者采用rem开发方式完成组件库的开发后，将js文件和css文件上传至服务端，以供各个项目引用。在加载js文件的过程中，终端通过style标签的src属性，获取到css文件在服务端的URL地址，然后从服务端获取js文件对应的css文件

可选地，通过style标签的src属性，从服务端获取css文件，包括：从style标签的src属性获取css文件在服务端的URL地址；以所述css文件在服务端的URL地址和当前页面中所有元素ID为入参，调用css文件接口；接收所述css文件接口返回的出参，所述出参为所述当前页面中所有元素的css文件。在本发明的一些实施例中，可以通过调用css文件接口的方式来获取css文件，具体地，先从style标签的src属性(src属性的属性值为css文件在服务端的URL地址)获取css文件在服务端的URL地址，然后以css文件在服务端的URL地址和用户当前打开的页面中所有元素ID为入参，调用css文件接口，从而接收该css文件接口返回的出参，即该页面中所有元素的css文件。

在本发明的一些实施例中，在调用css文件接口时，可以仅将css文件在服务端的URL地址作为入参，那么css文件接口返回的出参为开发者打包的整个css文件。

步骤303，采用js原生方法和正则表达式全局匹配出所述css文件中的各个rem值。

可以采用js原生方法replace和正则表达式全局匹配rem关键字。

步骤304，对于每个rem值，将所述rem值除以所述js文件对应的组件库中设置的根元素字体大小再乘以当前页面的根元素字体大小，从而计算得到新的rem值。

将匹配到的每个rem值按照一定的比例(当前页面的根元素字体大小/js文件对应的组件库中设置的根元素字体大小)进行换算，最后将换算后的rem值重新赋值回去。

步骤305，将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

对css文件中各个rem值进行换算后，将css文件中的各个rem值分别替换为各个新的rem值，得到新的css文件，最后通过style标签将新的css文件加载到当前页面的head标签中，因此，页面中的所有元素(即组件)加载该css文件中各自对应的css数据，使得采用rem开发的组件适配当前页面。

另外，在本发明一个可参考实施例中页面加载方法的具体实施内容，在上面所述页面加载方法中已经详细说明了，故在此重复内容不再说明。

图4是根据本发明另一个可参考实施例的页面加载方法的流程图。作为本发明的另一个实施例，如图4所示，所述页面加载方法可以包括：

步骤401，从script标签的src属性获取js文件在服务端的URL地址；其中，所述src属性的属性值为js文件在服务端的URL地址。

步骤402，以所述js文件在服务端的URL地址和当前页面中所有元素ID为入参，调用js文件接口。

步骤403，接收所述js文件接口返回的出参，所述出参为所述当前页面中所有元素的js文件，加载所述js文件。

步骤404，在加载所述js文件的过程中，从style标签的src属性获取css文件在服务端的URL地址；其中，所述src属性的属性值为css文件在服务端的URL地址。

步骤405，以所述css文件在服务端的URL地址和当前页面中所有元素ID为入参，调用css文件接口。

步骤406，接收所述css文件接口返回的出参，所述出参为所述当前页面中所有元素的css文件。

步骤407，采用js原生方法和正则表达式全局匹配出所述css文件中的各个rem值。

步骤408，对于每个rem值，将所述rem值除以所述js文件对应的组件库中设置的根元素字体大小再乘以当前页面的根元素字体大小，从而计算得到新的rem值。

步骤409，将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

另外，在本发明另一个可参考实施例中页面加载方法的具体实施内容，在上面所述页面加载方法中已经详细说明了，故在此重复内容不再说明。

图5是根据本发明实施例的页面加载装置的示意图。如图5所示，所述页面加载装置500包括第一加载模块501、计算模块502和第二加载模块503；其中，第一加载模块501用于从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件；计算模块502用于从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值；第二加载模块503用于将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

可选地，所述第一加载模块501还用于：

通过script标签的src属性，从服务端获取js文件；

其中，所述src属性的属性值为js文件在服务端的URL地址。

可选地，所述第一加载模块501还用于：

从script标签的src属性获取js文件在服务端的URL地址；

以所述js文件在服务端的URL地址和当前页面中所有元素ID为入参，调用js文件接口；

接收所述js文件接口返回的出参，所述出参为所述当前页面中所有元素的js文件。

可选地，所述第一加载模块501还用于：

通过style标签的src属性，从服务端获取css文件；

其中，所述src属性的属性值为css文件在服务端的URL地址。

可选地，所述第一加载模块501还用于：

从style标签的src属性获取css文件在服务端的URL地址；

以所述css文件在服务端的URL地址和当前页面中所有元素ID为入参，调用css文件接口；

接收所述css文件接口返回的出参，所述出参为所述当前页面中所有元素的css文件。

可选地，所述计算模块502还用于：

采用js原生方法和正则表达式全局匹配出所述css文件中的各个rem值。

可选地，所述计算模块502还用于：

对于每个rem值，将所述rem值除以所述js文件对应的组件库中设置的根元素字体大小再乘以当前页面的根元素字体大小，从而计算得到新的rem值。

需要说明的是，在本发明所述页面加载装置的具体实施内容，在上面所述页面加载方法中已经详细说明了，故在此重复内容不再说明。

图6示出了可以应用本发明实施例的页面加载方法或页面加载装置的示例性系统架构600。

如图6所示，系统架构600可以包括终端设备601、602、603，网络604和服务器605。网络604用以在终端设备601、602、603和服务器605之间提供通信链路的介质。网络604可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备601、602、603通过网络604与服务器605交互，以接收或发送消息等。终端设备601、602、603上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器605可以是提供各种服务的服务器，例如对用户利用终端设备601、602、603所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的物品信息查询请求等数据进行分析等处理，并将处理结果反馈给终端设备。

需要说明的是，本发明实施例所提供的页面加载方法可以由终端设备601、602、603执行，相应地，所述页面加载装置可以设置在终端设备601、602、603中。

应该理解，图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图7，其示出了适于用来实现本发明实施例的终端设备的计算机系统700的结构示意图。图7示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，计算机系统700包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括第一加载模块、计算模块和第二加载模块，其中，这些模块的名称在某种情况下并不构成对该模块本身的限定。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，该设备实现如下方法：从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件；从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值；将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

作为另一方面，本发明实施例还提供了一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述任一实施例所述的方法。

根据本发明实施例的技术方案，因为采用从css文件中提取出各个rem值，根据当前页面的根元素字体大小、js文件对应的组件库中设置的根元素字体大小和各个rem值，分别计算各个新的rem值，将css文件中各个rem值替换为各个新的rem值，并加载css文件的技术手段，所以克服了现有技术中采用rem开发的组件库无法对外提供一套适配各种项目的组件的技术问题。本发明实施例在页面引用组件库时对css文件中的rem值进行换算，使其适配所有页面。开发者在开发组件库时可以随意使用rem布局，实现响应式页面，不用考虑在哪个页面中引用，不用考虑页面的根元素字体大小，也不用考虑页面的布局方式，即使页面中使用rem、vw或px布局，也不影响，因为这些布局方式是可以共存的。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (11)

1.一种页面加载方法，其特征在于，包括：

从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件；

从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值；

将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

2.根据权利要求1所述的方法，其特征在于，从服务端获取js文件，包括：

通过script标签的src属性，从服务端获取js文件；

其中，所述src属性的属性值为js文件在服务端的URL地址。

3.根据权利要求2所述的方法，其特征在于，通过script标签的src属性，从服务端获取js文件，包括：

从script标签的src属性获取js文件在服务端的URL地址；

以所述js文件在服务端的URL地址和当前页面中所有元素ID为入参，调用js文件接口；

接收所述js文件接口返回的出参，所述出参为所述当前页面中所有元素的js文件。

4.根据权利要求1所述的方法，其特征在于，从所述服务端获取css文件，包括：

通过style标签的src属性，从服务端获取css文件；

其中，所述src属性的属性值为css文件在服务端的URL地址。

5.根据权利要求4所述的方法，其特征在于，通过style标签的src属性，从服务端获取css文件，包括：

从style标签的src属性获取css文件在服务端的URL地址；

以所述css文件在服务端的URL地址和当前页面中所有元素ID为入参，调用css文件接口；

接收所述css文件接口返回的出参，所述出参为所述当前页面中所有元素的css文件。

6.根据权利要求1所述的方法，其特征在于，从所述css文件中提取出各个rem值，包括：

采用js原生方法和正则表达式全局匹配出所述css文件中的各个rem值。

7.根据权利要求1所述的方法，其特征在于，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值，包括：

对于每个rem值，将所述rem值除以所述js文件对应的组件库中设置的根元素字体大小再乘以当前页面的根元素字体大小，从而计算得到新的rem值。

8.一种页面加载装置，其特征在于，包括：

第一加载模块，用于从服务端获取js文件，并加载所述js文件，在加载所述js文件的过程中，从所述服务端获取所述js文件对应的css文件；

计算模块，用于从所述css文件中提取出各个rem值，根据当前页面的根元素字体大小、所述js文件对应的组件库中设置的根元素字体大小和所述各个rem值，分别计算各个新的rem值；

第二加载模块，用于将所述css文件中所述各个rem值替换为所述各个新的rem值，并加载所述css文件。

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

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行时，所述一个或多个处理器实现如权利要求1-7中任一所述的方法。

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

11.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的方法。