CN112162747A - 一种前端页面组件化的方法、装置及计算机可读存储介质 - Google Patents
一种前端页面组件化的方法、装置及计算机可读存储介质 Download PDFInfo
- Publication number
- CN112162747A CN112162747A CN202011026438.9A CN202011026438A CN112162747A CN 112162747 A CN112162747 A CN 112162747A CN 202011026438 A CN202011026438 A CN 202011026438A CN 112162747 A CN112162747 A CN 112162747A
- Authority
- CN
- China
- Prior art keywords
- page
- channel side
- site
- file
- independent site
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000004891 communication Methods 0.000 claims abstract description 28
- 230000003993 interaction Effects 0.000 claims abstract description 23
- 238000013515 script Methods 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 34
- 238000004806 packaging method and process Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/76—Adapting program code to run in a different environment; Porting
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请涉及一种前端页面组件化的方法，其特征在于，包括以下步骤；建立站点：将渠道侧页面需要使用的通用模板进行抽离，生成独立站点并进行发布；代码编译：在独立站点发布前对代码进行编译生成符合不同平台的页面文件，并将；嵌套引用：渠道侧页面通过iframe嵌套独立站点对应页面文件的URL；通信交互：站点的页面文件完成数据操作后将操作数据回传至渠道侧页面完成信息通信和交互。本申请依据预设的包含有各个渠道的渠道配置信息的配置文件建立编译出符合不同渠道标准的页面文件，提高了代码的复用率，解决了不同平台下的UI布局不统一问题，节约开发时间提高开发效率，使得多渠道的情况下无需单独开发相同的业务模块，节省开发成本。
Description
技术领域
本申请涉及前端的技术领域，尤其是涉及一种前端页面组件化的方法、装置及计算机可读存储介质。
背景技术
在大型软件系统中，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)、磁碟或者光盘等各种可以存储程序代码的介质。
以上均为本申请的较佳实施例，并非依此限制本申请的保护范围，故：凡依本申请的结构、形状、原理所做的等效变化，均应涵盖于本申请的保护范围之内。
Claims (9)
1.一种前端页面组件化的方法，其特征在于，包括；
将渠道侧页面需要使用的通用模板进行抽离，生成独立站点并进行发布；
在独立站点发布前对代码进行编译生成符合不同平台的页面文件，并将页面文件进行分类存储；
渠道侧页面通过iframe嵌套独立站点对应页面文件的URL；
站点的页面文件完成数据操作后将操作数据回传至渠道侧页面完成信息通信和交互。
2.根据权利要求1所述的一种前端页面组件化的方法，其特征在于：所述独立站点发布前对代码进行编译生成符合不同平台的页面文件具体包括：
开发人员根据需求以px为单位撰写用户界面布局代码；
独立站点通过预设值的配置文件读取渠道配置，将代码的px值转换为rem；
输出不同渠道的页面文件至独立站点根目录的不同子目录，子目录按照渠道进行划分。
3.根据权利要求2所述的一种前端页面组件化的方法，其特征在于：所述独立站点通过预设值的配置文件读取渠道配置，根据配置文件在独立站点内储存有不同渠道的调用脚本，多个调用脚本与多个页面文件一一对应。
4.根据权利要求1所述的一种前端页面组件化的方法，其特征在于：所述渠道侧页面对嵌套的页面文件的URL进行预读取。
5.根据权利要求1所述的一种前端页面组件化的方法，其特征在于：所述站点的页面文件完成数据操作后通过postmessage方法将操作数据回传至渠道侧页面完成信息通信和交互。
6.根据权利要求5所述的一种前端页面组件化的方法，其特征在于：所述站点的页面文件完成数据操作后将操作数据回传至渠道侧页面完成信息通信和交互具体包括：
渠道侧根据用户的操作请求打开新页面，并在渠道侧页面中通过iframe嵌套独立站点的页面文件，独立站点的页面文件在iframe中打开并呈现数据；
渠道侧通过window.onmessage = someFunction监听message事件；
用户在独立站点的页面上完成操作，独立站点的页面通过targetWindow.postMessage方法向渠道侧页面传递操作数据；
渠道侧页面接收并处理数据，展示用户界面，完成通信交互。
7.根据权利要求6所述的一种前端页面组件化的方法，其特征在于：所述渠道侧页面接收到页面文件的操作数据后对页面文件进行隐藏，完成界面的跳转。
8.一种前端页面化的装置，其特征在于：包括存储器和处理器，所述存储器上存储有能够被处理器加载并执行如权利要求1至7中任一种方法的计算机程序。
9.一种计算机可读存储介质，其特征在于：存储有能够被处理器加载并执行如权利要求1至7中任一种方法的计算机程序。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011026438.9A CN112162747A (zh) | 2020-09-25 | 2020-09-25 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011026438.9A CN112162747A (zh) | 2020-09-25 | 2020-09-25 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112162747A true CN112162747A (zh) | 2021-01-01 |
Family
ID=73864304
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011026438.9A Pending CN112162747A (zh) | 2020-09-25 | 2020-09-25 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112162747A (zh) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA3148828A1 (en) * | 2013-02-10 | 2014-08-14 | Wix.Com Ltd. | Third-party application communication api |
| CN106528124A (zh) * | 2016-10-26 | 2017-03-22 | 广东广新信息产业股份有限公司 | 页面模板发布方法和系统 |
| CN106843869A (zh) * | 2017-01-16 | 2017-06-13 | 百融（北京）金融信息服务股份有限公司 | 一种前端开发工程化系统和方法 |
| CN109766503A (zh) * | 2018-12-28 | 2019-05-17 | 深圳联友科技有限公司 | 一种模块化的前端框架构建方法及装置 |
| CN111259381A (zh) * | 2020-02-04 | 2020-06-09 | 网易（杭州）网络有限公司 | 页面交互方法、装置、计算机可读介质及电子设备 |
| CN111273898A (zh) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | web前端代码自动化构建方法、系统及存储介质 |
| CN111324835A (zh) * | 2020-02-06 | 2020-06-23 | 北京字节跳动网络技术有限公司 | 渲染用户界面组件的方法、装置、电子设备、及存储介质 |
-
2020
- 2020-09-25 CN CN202011026438.9A patent/CN112162747A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA3148828A1 (en) * | 2013-02-10 | 2014-08-14 | Wix.Com Ltd. | Third-party application communication api |
| CN106528124A (zh) * | 2016-10-26 | 2017-03-22 | 广东广新信息产业股份有限公司 | 页面模板发布方法和系统 |
| CN106843869A (zh) * | 2017-01-16 | 2017-06-13 | 百融（北京）金融信息服务股份有限公司 | 一种前端开发工程化系统和方法 |
| CN109766503A (zh) * | 2018-12-28 | 2019-05-17 | 深圳联友科技有限公司 | 一种模块化的前端框架构建方法及装置 |
| CN111259381A (zh) * | 2020-02-04 | 2020-06-09 | 网易（杭州）网络有限公司 | 页面交互方法、装置、计算机可读介质及电子设备 |
| CN111324835A (zh) * | 2020-02-06 | 2020-06-23 | 北京字节跳动网络技术有限公司 | 渲染用户界面组件的方法、装置、电子设备、及存储介质 |
| CN111273898A (zh) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | web前端代码自动化构建方法、系统及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110502212B (zh) | 一种面向多语言的高并发在线开发支撑方法 | |
| CN101908015B (zh) | 一种基于构件生成测试案例的装置及方法 | |
| CN106775744B (zh) | 一种生成静态库的方法和装置 | |
| CN106528399A (zh) | 一种测试用例确定方法及装置 | |
| CN102246150A (zh) | 转换用户脚本代码来进行调试 | |
| CN101971143A (zh) | 应用组件之间的自动连接 | |
| CN102306102A (zh) | 程序文件自动生成方法及装置 | |
| CN103176778B (zh) | 网页开发方法和装置 | |
| CN111176629A (zh) | 一种应用开发的方法和装置 | |
| CN102141991A (zh) | 用于web服务器的方法和系统 | |
| CN112988601A (zh) | 测试脚本开发方法及装置 | |
| CN106796525A (zh) | 按需加载动态脚本语言代码以减少内存使用 | |
| CN111506298A (zh) | 一种基于json对象进行接口可视化配置的方法 | |
| CN101196812A (zh) | 构件化软件系统实现脚本语言调用多输出参数接口的方法 | |
| CN117112060A (zh) | 组件库构建方法、装置、电子设备及存储介质 | |
| CN102521008A (zh) | 程序编译装置和程序编译方法 | |
| CN102253986A (zh) | 提高多终端网页显示效果的方法和装置 | |
| CN114968192A (zh) | 一种项目创建方法、装置、计算机设备及存储介质 | |
| CN114610301A (zh) | 前端代码生成方法、装置、电子设备及存储介质 | |
| CN102254023A (zh) | 一种网页页面编辑的方法及装置 | |
| CN104915199A (zh) | 一种将Flash项目转换为Html5项目的方法与装置 | |
| CN111767035A (zh) | 基于OpenAPI的应用接口对接方法及装置 | |
| CN112162747A (zh) | 一种前端页面组件化的方法、装置及计算机可读存储介质 | |
| CN104378362A (zh) | 用于进行报文接口转换的方法及装置 | |
| CN111290996A (zh) | 文档格式转换方法、装置、设备及可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |