一种前端页面组件化的方法、装置及计算机可读存储介质

技术领域

本申请涉及前端的技术领域，尤其是涉及一种前端页面组件化的方法、装置及计算机可读存储介质。

背景技术

在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。

随着移动互联网的高速发展，各个互联网巨头都推出的自己移动App平台，这些APP平台都有着大量的用户群体。作为业务方，通常需要在上述多个平台上同时开展业务，由于这些平台都有自己的接入标准（接口、用户界面）就会导致每个平台对应一个独立的站点，即每个APP平台的页面（渠道侧页面）均对应有一个独立站点，该站点存储对应该app平台的页面文件。

当业务中的某一个功能需要修改时，就需要将每个站点的代码进行修改、测试、发布，极大地浪费了人力成本和时间成本。

发明内容

为了改善不同站点的通用模块需要修改时必须逐个站点进行修改，容易导致工作内容重复且浪费时间的问题，本申请提供一种前端页面组件化的方法、装置及计算机可读存储介质。

第一方面，本申请提供一种前端页面组件化的方法，采用如下的技术方案：

一种前端页面组件化的方法，包括；

将渠道侧页面需要使用的通用模板进行抽离，生成独立站点并进行发布；

在独立站点发布前对代码进行编译生成符合不同平台的页面文件，并将页面文件进行分类存储；

渠道侧页面通过iframe嵌套独立站点对应页面文件的URL；

站点的页面文件完成数据操作后将操作数据回传至渠道侧页面完成信息通信和交互。

通过采用上述技术方案，将渠道侧的需要使用使用的通用模板抽离进行组件化封装生成独立转点，并依据预设的包含有各个渠道的渠道配置信息的配置文件建立编译出符合不同渠道标准的页面文件，提高了代码的复用率，解决了不同平台下的UI布局不统一问题，节约开发时间提高开发效率，使得多渠道的情况下无需单独开发相同的业务模块，节省开发成本。

优选的，所述独立站点发布前对代码进行编译生成符合不同平台的页面文件具体包括：

开发人员根据需求以px为单位撰写用户界面布局代码；

独立站点通过预设值的配置文件读取渠道配置，将代码的px值转换为rem；

输出不同渠道的页面文件至独立站点根目录的不同子目录，子目录按照渠道进行划分。

通过采用上述技术方案，开发人员以px为单位撰写用户界面布局代码较为方便容易，且便于开发人员设计用户界面布局；在开发完成后，独立站点通过预设值的配置文件读取渠道配置，将代码的px值转换为rem并输出对应不同渠道侧的页面文件，使得页面文件可以良好适配不同渠道侧的规范，而且无需根据每个渠道侧的规范单独设置不同的独立站点，节约开发时间提高开发效率，节省开发成本。

优选的，所述独立站点通过预设值的配置文件读取渠道配置，根据配置文件在独立站点内储存有不同渠道的调用脚本，多个调用脚本与多个页面文件一一对应。

通过采用上述技术方案，便于页面文件与对应的渠道侧页面进行交互。

优选的，所述渠道侧页面对嵌套的页面文件的URL进行预读取。

通过采用上述技术方案，提高渠道侧页面调用页面文件的效率，降低用户的等待时间，提升用户使用途径。

优选的，所述通信交互步骤中站点的页面文件完成数据操作后通过postmessage方法将操作数据回传至渠道侧页面完成信息通信和交互。

通过采用上述技术方案，postmessage具有良好的兼容性，同时可以安全地实现跨域通信和页面间数据通信，确保页面文件的操作数据可以安全准确的传递至渠道侧，顺利完成通信和交互。

优选的，所述站点的页面文件完成数据操作后将操作数据回传至渠道侧页面完成信息通信和交互具体包括：

渠道侧根据用户的操作请求打开新页面，并在渠道侧页面中通过iframe嵌套独立站点的页面文件，独立站点的页面文件在iframe中打开并呈现数据；

渠道侧通过window.onmessage = someFunction监听message事件；

用户在独立站点的页面上完成操作，独立站点的页面通过targetWindow.postMessage方法向渠道侧页面传递操作数据；

渠道侧页面接收并处理数据，展示用户界面，完成通信交互。

优选的，所述渠道侧页面接收到页面文件的操作数据后对页面文件进行隐藏，完成界面的跳转。

通过采用上述技术方案，便于用户及时得到渠道侧页面的回馈，提升用户的使用体验。

第二方面，本申请提供一种前端页面化的装置，采用如下的技术方案：

一种前端页面化的装置，包括存储器和处理器，所述存储器上存储有能够被处理器加载并执行如权利要求1至7中任一种方法的计算机程序。

通过采用上述技术方案，通过独立站点的建立编译出符合不同渠道标准的页面文件，提高了代码的复用率，解决了不同平台下的UI布局不统一问题，节约开发时间提高开发效率，使得多渠道的情况下无需单独开发相同的业务模块，节省开发成本。

第三方面，本申请提供一种计算机可读存储介质，采用如下的技术方案：

一种计算机可读存储介质，存储有能够被处理器加载并执行如权利要求1至7中任一种方法的计算机程序。

通过采用上述技术方案，通过独立站点的建立编译出符合不同渠道标准的页面文件，提高了代码的复用率，解决了不同平台下的UI布局不统一问题，节约开发时间提高开发效率，使得多渠道的情况下无需单独开发相同的业务模块，节省开发成本。

综上所述，本申请包括以下至少一种有益技术效果：

1.开发人员以px为单位撰写用户界面布局代码较为方便容易，且便于开发人员设计用户界面布局；在开发完成后，独立站点通过预设值的配置文件读取渠道配置，将代码的px值转换为rem并输出对应不同渠道侧的页面文件，使得页面文件可以良好适配不同渠道侧的规范，适配不同平台的用户界面规范、风格；而且无需根据每个渠道侧的规范单独设置不同的独立站点，节约开发时间提高开发效率，节省开发成本；

2.postmessage具有良好的兼容性，同时可以不受什么限制的安全地实现跨域通信和页面间数据通信，确保页面文件的操作数据可以安全准确的传递至渠道侧，顺利完成通信和交互；

3.对页面文件的URL进行预读取，能够有效提高渠道侧页面调用页面文件的效率，降低用户的等待时间，提升用户使用途径。

附图说明

图1是本申请实施例中前端页面组件化的方法步骤流程图；

图2是本申请实施例中通信交互步骤的流程框图；

图3是本申请实施例中代码编译步骤的流程框图；

图4是本申请实施例中前端页面组件化的用户操作交互流程图。

具体实施方式

以下结合附图1-4对本申请作进一步详细说明。

postMessage是html5引入的API,postMessage方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。

本申请实施例公开一种前端页面组件化的方法。参照图1，一种前端页面组件化的方法包括以下步骤；

S1、建立站点：将渠道侧页面需要使用的通用模板进行抽离，生成独立站点并进行发布；将通用模板抽离并进行组件化的封装生成独立站点，渠道侧通过该独立站点可以调用对应的页面组件；

S2、代码编译：在独立站点发布前对代码进行编译生成符合不同平台的页面文件，并将页面文件进行分类存储；

S3、嵌套引用：渠道侧页面通过iframe嵌套独立站点对应页面文件的URL；

S4、通信交互：站点的页面文件完成数据操作后将操作数据回传至渠道侧页面完成信息通信和交互。将渠道侧的需要使用使用的通用模板抽离进行组件化封装生成独立转点，并依据预设的包含有各个渠道的渠道配置信息的配置文件建立编译出符合不同渠道标准的页面文件，提高了代码的复用率，解决了不同平台下的UI布局不统一问题，节约开发时间提高开发效率，使得多渠道的情况下无需单独开发相同的业务模块，节省开发成本。

参照图2，步骤S2、代码编译具体包括以下步骤：

A1、撰写代码：开发人员根据需求以px为单位撰写用户界面布局代码；开发人员以px为单位撰写用户界面布局代码较为方便容易，px的兼容性更好，便于开发人员开发和测试，并且以px为单位设计的界面较为恒定，便于开发人员把握用户界面布局细节；

A2、代码转换：独立站点通过预设值的配置文件读取渠道配置，将代码的px值转换为rem；预配置的配置文件中包含有各个合作渠道的渠道信息，并且根据配置文件在独立站点内储存有不同渠道的调用脚本。不同渠道存在不同的调用规则，为了使得页面文件与对应渠道顺利通信交互，因此采用多个调用脚本与多个页面文件一一对应，便于页面文件与对应的渠道侧页面进行交互。

A3、归档储存：输出不同渠道的页面文件至独立站点根目录的不同子目录，子目录按照渠道进行划分。页面文件与对应该渠道的调用脚本共同储存在同一子目录内。通过代码编译这一步骤，在开发完成后，独立站点通过预设值的配置文件读取渠道配置，将代码的px值转换为rem并输出对应不同渠道侧的页面文件，使得页面文件可以良好适配不同渠道侧的规范，而且无需根据每个渠道侧的规范单独设置不同的独立站点，节约开发时间提高开发效率，节省开发成本。

参照图3，S4、通信交互步骤中站点的页面文件完成数据操作后通过postmessage方法将操作数据回传至渠道侧页面完成信息通信和交互。postmessage具有良好的兼容性，同时可以安全地实现跨域通信和页面间数据通信，确保页面文件的操作数据可以安全准确的传递至渠道侧，顺利完成通信和交互。通信交互步骤具体步骤如下：

B1、跳转页面:渠道侧根据用户的操作请求打开新页面，并在渠道侧页面中通过iframe嵌套独立站点的页面文件，独立站点的页面文件在iframe中打开并呈现数据；

B2、监听事件：渠道侧通过window.onmessage = someFunction监听message事件；

B3、回传数据：用户在独立站点的页面上完成操作，独立站点的页面通过targetWindow.postMessage方法向渠道侧页面传递操作数据；

完成通信：渠道侧页面接收并处理数据，展示用户界面，完成通信交互。通过该步骤实现独立站点的页面文件和渠道侧页面较为方便准确的进行通信交互。

参照图4，用户操作渠道侧页面的具体操作过程为：

C1、用户进入渠道侧页面，进行操作，当点击一些跳转按钮后；

C2、渠道侧通过iframe加载位于独立站点内的页面文件,用户在页面文件形成的页面上进行操作；

C3、用户完成操作后，独立站点通过postmessage方法回传用户在页面文件处操作的操作数据至渠道侧；

C4、渠道侧接收到回传的操作数据后进行处理，显示操作结果给用户。

本申请实施例还公开一种前端页面组件化的装置，包括存储器和处理器，所述存储器上存储有能够被处理器加载并执行上述方法的计算机程序。

本申请实施例还公开一种计算机可读存储介质，其存储有能够被处理器加载并执行如上述方法中的计算机程序，所述计算机可读存储介质例如包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上均为本申请的较佳实施例，并非依此限制本申请的保护范围，故：凡依本申请的结构、形状、原理所做的等效变化，均应涵盖于本申请的保护范围之内。