CN112286529A - 前端页面的开发方法、装置、设备及存储介质 - Google Patents
前端页面的开发方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN112286529A CN112286529A CN202011308110.6A CN202011308110A CN112286529A CN 112286529 A CN112286529 A CN 112286529A CN 202011308110 A CN202011308110 A CN 202011308110A CN 112286529 A CN112286529 A CN 112286529A
- Authority
- CN
- China
- Prior art keywords
- initial
- reusable component
- component
- page
- reusable
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 71
- 238000011161 development Methods 0.000 title claims abstract description 24
- 238000004806 packaging method and process Methods 0.000 claims abstract description 16
- 230000008569 process Effects 0.000 claims description 30
- 238000010276 construction Methods 0.000 claims description 24
- 238000012545 processing Methods 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 10
- 230000007246 mechanism Effects 0.000 claims description 10
- 238000009877 rendering Methods 0.000 claims description 10
- 238000012544 monitoring process Methods 0.000 claims description 8
- 239000012634 fragment Substances 0.000 claims description 5
- 230000006870 function Effects 0.000 description 50
- 238000010586 diagram Methods 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 6
- 238000013461 design Methods 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000019771 cognition Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005265 energy consumption Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000013508 migration Methods 0.000 description 1
- 230000005012 migration Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 238000006467 substitution reaction 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/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/30—Creation or generation of source code
- G06F8/33—Intelligent editors
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)
- Stored Programmes (AREA)
Abstract
本公开实施例公开了一种前端页面的开发方法、装置、设备及存储介质。包括：采用设定函数对原生组件进行封装，获得初始可复用组件；获取待开发页面所需的至少一个初始可复用组件；对所述至少一个初始可复用组件添加配置信息；根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。本公开实施例提供的前端页面的开发方法，将原生组件封装为初始可复用组件后，再对可复用组件进行自定义配置，使得生成的目标可复用组件可以实现前端页面的开发，不受前端框架之间差异的限制，降低前端页面开发的成本。
Description
技术领域
本公开实施例涉及计算机技术领域，尤其涉及一种前端页面的开发方法、装置、设备及存储介质。
背景技术
研发工程师在开发过程中经常会积累一些比较优秀的业务组件，当别的系统有同样的实现需求时，为了减少重复建设的精力消耗，很多时候就会希望复用已有组件的能力，最简单的方式可能就是拷贝走对应的代码或者文件，但是这样就会导致逻辑无法被收敛在一处，如果一处发生了更新或者修复，别处的同步工作会带来不小的成本，并且现阶段受限于各大前端框架之前的差异和隔阂，如果要实现跨前端框架复用逻辑的迁移成本会很大。
发明内容
本公开实施例提供一种前端页面的开发方法、装置、设备及存储介质，可以实现业务组件的复用，降低前端页面开发的成本。
第一方面，本公开实施例提供了一种前端页面的开发方法，包括：
采用设定函数对原生组件进行封装，获得初始可复用组件；
获取待开发页面所需的至少一个初始可复用组件；
对所述至少一个初始可复用组件添加配置信息；
根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；
将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。
第二方面，本公开实施例还提供了一种前端页面的开发装置，包括：
原生组件封装模块，用于采用设定函数对原生组件进行封装，获得初始可复用组件；
初始可复用组件获取模块，用于获取待开发页面所需的至少一个初始可复用组件；
配置信息添加模块，用于对所述至少一个初始可复用组件添加配置信息；
配置模块，用于根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；
目标页面获取模块，用于将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。
第三方面，本公开实施例还提供了一种电子设备，所述电子设备包括：
一个或多个处理装置；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理装置执行，使得所述一个或多个处理装置实现如本公开实施例所述的前端页面的开发方法。
第四方面，本公开实施例还提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现如本公开实施例所述的前端页面的开发方法。
本公开实施例公开了一种前端页面的开发方法、装置、设备及存储介质。采用设定函数对原生组件进行封装，获得初始可复用组件；获取待开发页面所需的至少一个初始可复用组件；对所述至少一个初始可复用组件添加配置信息；根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。本公开实施例提供的前端页面的开发方法，将原生组件封装为初始可复用组件后，再对可复用组件进行自定义配置，使得生成的目标可复用组件可以实现前端页面的开发，不受前端框架之间差异的限制，降低前端页面开发的成本。
附图说明
图1是本公开实施例中的一种前端页面的开发方法的流程图；
图2是本公开实施例中的一种前端页面的开发装置的结构示意图；
图3是本公开实施例中的一种电子设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
后端微服务的实现，是把能够独立的逻辑抽象成实体，以让它达到更灵活的“可插拔”复用性，不用考虑语言，不用考虑框架，甚至不用考虑环境(基于Docker)。一个复杂系统中的各项服务，都可以拆分成单一实体，封装成镜像之后，可以被带到任何需要它的地方实例化以便复用。比如在后端实践微服务的过程中，一个工程师使用Java实现了一个登录服务，将其封装在Docker里，那么另一个使用Python的后端工程师，也可以快速使用这一个服务，不用担心开发语言以及开发环境的差异。
这套在后端被广泛应用的微服务设计方案，在前端领域的实践可以总结为：在前端的页面中，不单单指一个系统，或者说是一个网页，正如后端微服务的设计理念一样，其实前端网页上的任意部分或者说任意结构、任意元素，都能在不改变原有的开发习惯或者方式的前提下，被抽象成为一个微服务的实体，被其他的前端系统或者工程师在自己的网页中快速集成复用。
本公开实施例解决的核心问题便是：既能友好地对接原有的逻辑、不限制微应用的粒度，能够让已有的组件快速接入，又能实现最小成本的快速复用，抹平现阶段前端的框架差异。
浏览器的原生Web Components API已经能部分解决上述问题，但是还存在两个瓶颈：第一个是Web Components只支持字符串类型的数据传参，但是在前端开发中，使用引用(指针)类型的数据是一件很常见的事情，所以我们需要对浏览器的原生能力进行改造和强化；第二个是Web Components API在封装一个组件的过程中，有大量的逻辑和流程是可以被封装复用的，开发者可以无需关心的，这样能够很大幅度降低开发者的认知以及编码成本。
因此最终本公开实施例的实现思路便是：使用浏览器的原生能力Web ComponentsAPI提供微应用的容器，实现模块跨框架复用的能力，对Web Components API的常用逻辑进行封装，降低开发者们的接入成本，并借鉴Single-spa的设计模式，通过子应用生命周期等方式向用户提供组件挂载容器，以便快速支持原有逻辑。
图1为本公开实施例一提供的一种前端页面的开发方法的流程图，本实施例可适用于开发前端页面的情况，该方法可以由前端页面的开发装置来执行，该装置可由硬件和/或软件组成，并一般可集成在具有前端页面的开发功能的设备中，该设备可以是服务器、移动终端或服务器集群等电子设备。如图1所示，该方法具体包括如下步骤：
步骤110，采用设定函数对原生组件进行封装，获得初始可复用组件。
其中，原生组件可以理解为采用任意语言且基于任意框架开发的具有一定功能的虚拟模块。设定函数可以理解为具有桥接功能接口且能够将原生组件封装为复用组件的编程函数。本实施例中，设定函数可以采用magic表征。可复用组件可以理解为该组件可以跨框架跨语言使用。
具体的，采用设定函数对原生组件进行封装，获得初始可复用组件的过程可以是：对原生组件添加标识标签；调用设定函数接口，将原生组件的占位容器传入设定函数中；将原生组件渲染至占位容器中，获得初始可复用组件。
其中，标识标签可以唯一的表征组件。设定函数接口可以理解为与原生组件建立数据连接的接口，或者是将原生组件传入设定函数的接口。本实施例中，设定函数接口可以由mount表征。
本实施例中，Magic会向被包装的原生组件模块传递mount接口，原生组件需要向外暴露(export)这一接口与magic对接，magic通过调用这一mount接口函数向函数中传递原生组件的占位容器，开发者就可以使用原生组件的渲染方式，将原生组件渲染在对应的占位容器上。
可选的，将原生组件渲染至占位容器中的过程还可以是：通过设定函数接口将自定义参数传入设定函数；根据自定义参数将原生组件渲染至占位容器中，获得初始可复用组件。
本实施例中，嵌入方可以在设定函数接口中采用自定义参数机制将自定义参数传入设定函数的原生组件中，使得开发者定制化传入所需的参数。示例性的，比如页面中的一个按钮，它的展示内容期望交由嵌入方自定义，原生组件就可以通过自定义参数机制使用嵌入方传入的数据。这样，原生组件在渲染时，就可以通过mount接口传入的自定义参数对象获取到嵌入方自定义的数据内容。
本实施例中，原生组件被封装后形成初始可复用组件后，就可以存储至数据库中以供其他开发者快速检索和使用。并且，原生组件的开发者可以注明复用组件的传参以及使用说明，以便其他开发者在找寻组件时，能更清楚组件的能力以及功能。
步骤120，获取待开发页面所需的至少一个初始可复用组件。
其中，待开发页面的底层中由多个组件构成，每个组件实现不同的功能。开发人员在开发前端页面时，根据业务需求确定页面所需的组件，然后从数据库中获取多个初始可复用组件。
具体的，获取待开发页面所需的至少一个初始可复用组件的方式可以是：根据标识标签获取待开发页面所需的至少一个初始可复用组件。
本实施例中，通过标识标签可以快速从数据库中搜索到所需的初始可复用组件。
步骤130，对至少一个初始可复用组件添加配置信息。
其中，配置信息可以包括事件与设定逻辑的对应关系。配置信息的作用是当监听到某事件时，对初始可复用组件配置该事件对应的逻辑。本实施例中，配置信息可以由插件机制实现，从而实现配置信息的可插拔。
步骤140，根据配置信息对至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件。
本实施例中，根据配置信息对至少一个初始可复用组件进行自定义配置的过程可以是：对至少一个初始可复用组件分别进行实例化；启动实例化的各初始可复用组件的构建流程；对构建过程中广播的事件进行监听，当监听到配置信息中的事件时，根据事件对应的设定逻辑对至少一个初始可复用组件进行自定义配置。
其中，实例化可以理解为为各可复用初始组件创建一个内存，该内存用于存储对应初始可复用组件的状态数据以及后续可能用到的参数数据。构建流程包括模块生成阶段、参数格式化阶段及组件片段构建阶段。
具体的，完成初始可复用组件实例化后，便会执行组件实例的run方法，开始启动组件构建流程，在这其中会经历模块生成、参数格式化以及组件片段构建等流程，并会向外广播不同阶段的实例元数据，用户如果想要修改magic的核心流程以及数据，可以通过监听这些广播的事件，当监听到配置信息中的事件时，根据事件对应的设定逻辑对至少一个初始可复用组件进行自定义配置，从而获得目标可复用组件。
可选的，配置信息由插件机制实现；对构建过程中广播的事件进行监听，当监听到配置信息中的事件时，根据事件对应的设定逻辑对至少一个初始可复用组件进行自定义配置的过程可以是：插件对构建过程中广播的事件进行监听，当监听到配置信息中的事件时，根据插件定义的逻辑对至少一个初始可复用组件进行自定义配置。
示例性的，例如数据库中已经有一个user-info组件，它支持传入一个用户的名称并使用封装好的原生样式将其展示出来，这个组件能够满足网站开发者在样式和交互上的需求，但是网站从数据库中获取到的用户名称都是小写的，产品或者业务方要求网站在页面中需要把名称中的所有字符转化为大写的形式。考虑到逻辑的封装和抽象，网站开发者没必要每次都在传递名称的时候做一遍大小写的转化，此时就可以将名称转换成大写的逻辑抽象成Magic Plugin，通过插件机制为magic的数据传递过程统一增加一个数据格式化的流程。这时，开发者就可以直接向组件中传递从后端数据库中拿到的名称数据，不需要显式地在逻辑中执行名称的大小写转化操作，如果需要展示大写的控件，可以直接使用经过Plugin自定义的user-info-upper控件。
本实施例采用的插件机制，使得magic在整个函数执行过程中的所有元数据都交由用户自由变更、组装以及重新定义，这样一来，基于一种原生组件能够产生的不同变种，将会完全由开发者自己创造，不再需要依赖原生组件的开发者来定制化一些业务逻辑，复用组件的使用者也能自定义业务逻辑。所以借助Plugin机制，用户能够实现任何他们期望的效果或者说为Magic提供的核心逻辑赋能，之所以我们称它为插件，正是因为它完全可以基于开发者的需要灵活插拔。借助Plugin的体系，能够为magic支撑起一套更全面、更自由的面向社区的定制化生态。
步骤150，将至少一个目标可复用组件添加至待开发页面中的设定位置并进行加载，获得目标页面。
具体的，在获得目标可复用组件后，网页开发者可以将该组件放在页面需要的位置上。将页面需要的所有目标可复用组件防止对应的位置上后，对页面进行加载，就获得开发好的目标页面。
本实施例的技术方案，基于设定函数Magic，如果一名前端工程师想要快速复用一段他自己或者别人曾经编写好的或者说即将产出的逻辑，并且希望组件的所有逻辑都收敛在原作者那里，便于之后的更新和维护，首先引入封装好的函数magic，并将原生组件作为一个独立模块传递给这个函数，那么这个封装好的组件就成为了一个能够随处被复用的、无关框架的、浏览器原生支持的组件，他不需要改变原有的的编码习惯，原生组件可以完全依据他原有的编程体系去编写，magic在其中只是起到了一个桥接的作用。
如果抛开了现阶段前端框架的限制，未来的前端开发模式将变得像“搭积木”一样简单，如果一名工程师需要开发一个功能或者系统，可以在数据库中找到所需的组件，快速复用。在组件整个逻辑复用和被使用的过程中，工程师们只需要知道magic这个函数的传参内容，就能够快速上手微前端方案。
本公开实施例提供的前端页面的开发方法、装置、设备及存储介质。采用设定函数对原生组件进行封装，获得初始可复用组件；获取待开发页面所需的至少一个初始可复用组件；对所述至少一个初始可复用组件添加配置信息；根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。本公开实施例提供的前端页面的开发方法，将原生组件封装为初始可复用组件后，再对可复用组件进行自定义配置，使得生成的目标可复用组件可以实现前端页面的开发，不受前端框架之间差异的限制，降低前端页面开发的成本。
图2是本公开实施例公开的一种前端页面的开发装置的结构示意图。如图2所示，该装置包括：
原生组件封装模块210，用于采用设定函数对原生组件进行封装，获得初始可复用组件；
初始可复用组件获取模块220，用于获取待开发页面所需的至少一个初始可复用组件；
配置信息添加模块230，用于对至少一个初始可复用组件添加配置信息；
配置模块240，用于根据配置信息对至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件
目标页面获取模块250，用于将至少一个目标可复用组件添加至待开发页面中的设定位置并进行加载，获得目标页面。
可选的，原生组件封装模块210，还用于：
对原生组件添加标识标签；
调用设定函数接口，将原生组件的占位容器传入设定函数中；
将原生组件渲染至占位容器中，获得初始可复用组件。
可选的，原生组件封装模块210，还用于：
通过设定函数接口将自定义参数传入设定函数；
根据自定义参数将原生组件渲染至占位容器中，获得初始可复用组件。
可选的，初始可复用组件获取模块220，还用于：
根据标识标签获取待开发页面所需的至少一个初始可复用组件。
可选的，配置信息包括事件与设定逻辑的对应关系；配置模块240，还用于：
对至少一个初始可复用组件分别进行实例化；
启动实例化的各初始可复用组件的构建流程；
对构建过程中广播的事件进行监听，当监听到配置信息中的事件时，根据事件对应的设定逻辑对至少一个初始可复用组件进行自定义配置。
可选的，配置信息由插件机制实现；配置模块240，还用于：
插件对构建过程中广播的事件进行监听，当监听到配置信息中的事件时，根据插件定义的逻辑对至少一个初始可复用组件进行自定义配置。
可选的，构建流程包括模块生成阶段、参数格式化阶段及组件片段构建阶段。
上述装置可执行本公开前述所有实施例所提供的方法，具备执行上述方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本公开前述所有实施例所提供的方法。
下面参考图3，其示出了适于用来实现本公开实施例的电子设备300的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端，或者各种形式的服务器，如独立服务器或者服务器集群。图3示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图3所示，电子设备300可以包括处理装置(例如中央处理器、图形处理器等)301，其可以根据存储在只读存储装置(ROM)302中的程序或者从存储装置305加载到随机访问存储装置(RAM)303中的程序而执行各种适当的动作和处理。在RAM 303中，还存储有电子设备300操作所需的各种程序和数据。处理装置301、ROM 302以及RAM 303通过总线304彼此相连。输入/输出(I/O)接口305也连接至总线304。
通常，以下装置可以连接至I/O接口305：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置306；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置307；包括例如磁带、硬盘等的存储装置308；以及通信装置309。通信装置309可以允许电子设备300与其他设备进行无线或有线通信以交换数据。虽然图3示出了具有各种装置的电子设备300，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行词语的推荐方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置309从网络上被下载和安装，或者从存储装置305被安装，或者从ROM 302被安装。在该计算机程序被处理装置301执行时，执行本公开实施例的方法中限定的上述功能。
需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
在一些实施方式中，客户端、服务器可以利用诸如HTTP(HyperText TransferProtocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“LAN”)，广域网(“WAN”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：采用设定函数对原生组件进行封装，获得初始可复用组件；获取待开发页面所需的至少一个初始可复用组件；对所述至少一个初始可复用组件添加配置信息；根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑设备(CPLD)等等。
在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
根据本公开实施例的一个或多个实施例，本公开实施例公开一种前端页面的开发方法，包括：
采用设定函数对原生组件进行封装，获得初始可复用组件；
获取待开发页面所需的至少一个初始可复用组件；
对所述至少一个初始可复用组件添加配置信息；
根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；
将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。
进一步地，采用设定函数对原生组件进行封装，获得初始可复用组件，包括：
对原生组件添加标识标签；
调用设定函数接口，将所述原生组件的占位容器传入所述设定函数中；
将所述原生组件渲染至所述占位容器中，获得初始可复用组件。
进一步地，将所述原生组件渲染至所述占位容器中，包括：
通过所述设定函数接口将自定义参数传入所述设定函数；
根据所述自定义参数将所述原生组件渲染至所述占位容器中，获得初始可复用组件。
进一步地，获取待开发页面所需的至少一个初始可复用组件，包括：
根据所述标识标签获取待开发页面所需的至少一个初始可复用组件。
进一步地，所述配置信息包括事件与设定逻辑的对应关系；根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，包括：
对所述至少一个初始可复用组件分别进行实例化；
启动实例化的各初始可复用组件的构建流程；
对构建过程中广播的事件进行监听，当监听到所述配置信息中的事件时，根据所述事件对应的设定逻辑对所述至少一个初始可复用组件进行自定义配置。
进一步地，所述配置信息由插件机制实现；对构建过程中广播的事件进行监听，当监听到所述配置信息中的事件时，根据所述事件对应的设定逻辑对所述至少一个初始可复用组件进行自定义配置，包括：
所述插件对构建过程中广播的事件进行监听，当监听到所述配置信息中的事件时，根据所述插件定义的逻辑对所述至少一个初始可复用组件进行自定义配置。
进一步地，所述构建流程包括模块生成阶段、参数格式化阶段及组件片段构建阶段。
注意，上述仅为本公开的较佳实施例及所运用技术原理。本领域技术人员会理解，本公开不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本公开的保护范围。因此，虽然通过以上实施例对本公开进行了较为详细的说明，但是本公开不仅仅限于以上实施例，在不脱离本公开构思的情况下，还可以包括更多其他等效实施例，而本公开的范围由所附的权利要求范围决定。
Claims (10)
1.一种前端页面的开发方法，其特征在于，包括：
采用设定函数对原生组件进行封装，获得初始可复用组件；
获取待开发页面所需的至少一个初始可复用组件；
对所述至少一个初始可复用组件添加配置信息；
根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件；
将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。
2.根据权利要求1所述的方法，其特征在于，采用设定函数对原生组件进行封装，获得初始可复用组件，包括：
对原生组件添加标识标签；
调用设定函数接口，将所述原生组件的占位容器传入所述设定函数中；
将所述原生组件渲染至所述占位容器中，获得初始可复用组件。
3.根据权利要求2所述的方法，其特征在于，将所述原生组件渲染至所述占位容器中，包括：
通过所述设定函数接口将自定义参数传入所述设定函数；
根据所述自定义参数将所述原生组件渲染至所述占位容器中，获得初始可复用组件。
4.根据权利要求2所述的方法，其特征在于，获取待开发页面所需的至少一个初始可复用组件，包括：
根据所述标识标签获取待开发页面所需的至少一个初始可复用组件。
5.根据权利要求1所述的方法，其特征在于，所述配置信息包括事件与设定逻辑的对应关系；根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，包括：
对所述至少一个初始可复用组件分别进行实例化；
启动实例化的各初始可复用组件的构建流程；
对构建过程中广播的事件进行监听，当监听到所述配置信息中的事件时，根据所述事件对应的设定逻辑对所述至少一个初始可复用组件进行自定义配置。
6.根据权利要求5所述的方法，其特征在于，所述配置信息由插件机制实现；对构建过程中广播的事件进行监听，当监听到所述配置信息中的事件时，根据所述事件对应的设定逻辑对所述至少一个初始可复用组件进行自定义配置，包括：
所述插件对构建过程中广播的事件进行监听，当监听到所述配置信息中的事件时，根据所述插件定义的逻辑对所述至少一个初始可复用组件进行自定义配置。
7.根据权利要求5或6所述的方法，其特征在于，所述构建流程包括模块生成阶段、参数格式化阶段及组件片段构建阶段。
8.一种前端页面的开发装置，其特征在于，包括：
原生组件封装模块，用于采用设定函数对原生组件进行封装，获得初始可复用组件；
初始可复用组件获取模块，用于获取待开发页面所需的至少一个初始可复用组件；
配置信息添加模块，用于对所述至少一个初始可复用组件添加配置信息；
配置模块，用于根据所述配置信息对所述至少一个初始可复用组件进行自定义配置，获得至少一个目标可复用组件
目标页面获取模块，用于将所述至少一个目标可复用组件添加至所述待开发页面中的设定位置并进行加载，获得目标页面。
9.一种电子设备，其特征在于，所述电子设备包括：
一个或多个处理装置；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理装置执行，使得所述一个或多个处理装置实现如权利要求1-7中任一所述的前端页面的开发方法。
10.一种计算机可读介质，其上存储有计算机程序，其特征在于，该程序被处理装置执行时实现如权利要求1-7中任一所述的前端页面的开发方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011308110.6A CN112286529B (zh) | 2020-11-19 | 2020-11-19 | 前端页面的开发方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011308110.6A CN112286529B (zh) | 2020-11-19 | 2020-11-19 | 前端页面的开发方法、装置、设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112286529A true CN112286529A (zh) | 2021-01-29 |
| CN112286529B CN112286529B (zh) | 2024-05-10 |
Family
ID=74399371
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011308110.6A Active CN112286529B (zh) | 2020-11-19 | 2020-11-19 | 前端页面的开发方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112286529B (zh) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113434134A (zh) * | 2021-06-21 | 2021-09-24 | 北京达佳互联信息技术有限公司 | 组件处理方法、装置、电子设备及存储介质 |
| CN113467876A (zh) * | 2021-07-01 | 2021-10-01 | 稿定（厦门）科技有限公司 | 页面组件的生成方法及装置 |
| CN113535135A (zh) * | 2021-09-09 | 2021-10-22 | 深圳市蓝凌软件股份有限公司 | 软件开发方法、装置、计算机设备和存储介质 |
| CN113791783A (zh) * | 2021-09-14 | 2021-12-14 | 科东(广州)软件科技有限公司 | 控件生成方法、装置、设备及存储介质 |
| CN113835691A (zh) * | 2021-09-27 | 2021-12-24 | 工银科技有限公司 | 一种iOS应用开发方法、系统、设备、介质和程序产品 |
| CN114253543A (zh) * | 2022-02-28 | 2022-03-29 | 北京泰迪熊移动科技有限公司 | 一种页面配置方法、装置、电子设备及存储介质 |
| CN114371886A (zh) * | 2022-01-12 | 2022-04-19 | 平安普惠企业管理有限公司 | 前端框架组件转换方法、装置、计算机设备及存储介质 |
| CN114625444A (zh) * | 2022-03-30 | 2022-06-14 | 北京有竹居网络技术有限公司 | 一种基于组件的数据处理方法及装置 |
| CN115268861A (zh) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | 自定义组件的引入方法、系统、设备和存储介质 |
| CN115756449A (zh) * | 2022-12-02 | 2023-03-07 | 之江实验室 | 一种页面复用方法、装置、存储介质及电子设备 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160127026A1 (en) * | 2014-10-31 | 2016-05-05 | Skyworks Solutions, Inc. | Diversity receiver front end system with flexible routing |
| CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
| CN110096271A (zh) * | 2019-05-08 | 2019-08-06 | 中汇信息技术（上海）有限公司 | 组件可视化方法、基于组件可视化的页面处理方法及装置 |
| CN111124477A (zh) * | 2019-12-19 | 2020-05-08 | 华云数据有限公司 | 一种前端配置方法、系统及电子设备 |
| CN111367507A (zh) * | 2020-03-11 | 2020-07-03 | 上海东普信息科技有限公司 | 页面代码生成方法、装置、设备及存储介质 |
| CN111736827A (zh) * | 2020-08-25 | 2020-10-02 | 长沙慧码至一信息科技有限公司 | 一种云原生开发组件系统 |
-
2020
- 2020-11-19 CN CN202011308110.6A patent/CN112286529B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160127026A1 (en) * | 2014-10-31 | 2016-05-05 | Skyworks Solutions, Inc. | Diversity receiver front end system with flexible routing |
| CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
| CN110096271A (zh) * | 2019-05-08 | 2019-08-06 | 中汇信息技术（上海）有限公司 | 组件可视化方法、基于组件可视化的页面处理方法及装置 |
| CN111124477A (zh) * | 2019-12-19 | 2020-05-08 | 华云数据有限公司 | 一种前端配置方法、系统及电子设备 |
| CN111367507A (zh) * | 2020-03-11 | 2020-07-03 | 上海东普信息科技有限公司 | 页面代码生成方法、装置、设备及存储介质 |
| CN111736827A (zh) * | 2020-08-25 | 2020-10-02 | 长沙慧码至一信息科技有限公司 | 一种云原生开发组件系统 |
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113434134A (zh) * | 2021-06-21 | 2021-09-24 | 北京达佳互联信息技术有限公司 | 组件处理方法、装置、电子设备及存储介质 |
| CN113434134B (zh) * | 2021-06-21 | 2024-04-16 | 北京达佳互联信息技术有限公司 | 组件处理方法、装置、电子设备及存储介质 |
| WO2023273407A1 (zh) * | 2021-07-01 | 2023-01-05 | 稿定（厦门）科技有限公司 | 页面组件的生成方法及装置 |
| CN113467876A (zh) * | 2021-07-01 | 2021-10-01 | 稿定（厦门）科技有限公司 | 页面组件的生成方法及装置 |
| CN113535135A (zh) * | 2021-09-09 | 2021-10-22 | 深圳市蓝凌软件股份有限公司 | 软件开发方法、装置、计算机设备和存储介质 |
| CN113791783A (zh) * | 2021-09-14 | 2021-12-14 | 科东(广州)软件科技有限公司 | 控件生成方法、装置、设备及存储介质 |
| CN113835691A (zh) * | 2021-09-27 | 2021-12-24 | 工银科技有限公司 | 一种iOS应用开发方法、系统、设备、介质和程序产品 |
| CN113835691B (zh) * | 2021-09-27 | 2024-06-11 | 工银科技有限公司 | 一种iOS应用开发方法、系统、设备、介质和程序产品 |
| CN114371886A (zh) * | 2022-01-12 | 2022-04-19 | 平安普惠企业管理有限公司 | 前端框架组件转换方法、装置、计算机设备及存储介质 |
| CN114253543A (zh) * | 2022-02-28 | 2022-03-29 | 北京泰迪熊移动科技有限公司 | 一种页面配置方法、装置、电子设备及存储介质 |
| CN114625444A (zh) * | 2022-03-30 | 2022-06-14 | 北京有竹居网络技术有限公司 | 一种基于组件的数据处理方法及装置 |
| CN115268861A (zh) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | 自定义组件的引入方法、系统、设备和存储介质 |
| CN115756449A (zh) * | 2022-12-02 | 2023-03-07 | 之江实验室 | 一种页面复用方法、装置、存储介质及电子设备 |
| CN115756449B (zh) * | 2022-12-02 | 2023-06-06 | 之江实验室 | 一种页面复用方法、装置、存储介质及电子设备 |
| US20240184543A1 (en) * | 2022-12-02 | 2024-06-06 | Zhejiang Lab | Page multiplexing method, page multiplexing device, storage medium and electronic apparatus |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112286529B (zh) | 2024-05-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112286529B (zh) | 前端页面的开发方法、装置、设备及存储介质 | |
| CN111338623B (zh) | 一种开发用户界面的方法、装置、介质和电子设备 | |
| CN111580879A (zh) | 小程序的运行方法、装置、电子设备及计算机存储介质 | |
| CN111367516B (zh) | 应用界面生成方法、装置及电子设备 | |
| CN111309375B (zh) | 生成远程过程调用工具包的方法、装置、介质和电子设备 | |
| CN111309304B (zh) | 一种生成idl文件的方法、装置、介质和电子设备 | |
| CN111324376B (zh) | 功能配置方法、装置、电子设备及计算机可读介质 | |
| CN112631590A (zh) | 组件库生成方法、装置、电子设备和计算机可读介质 | |
| CN112965713B (zh) | 可视化编辑器的开发方法、装置、设备及存储介质 | |
| EP4134904A1 (en) | Image special effect configuration method, image recognition method, apparatuses, and electronic device | |
| CN113126985B (zh) | 用于页面渲染的方法、装置、电子设备和计算机可读介质 | |
| CN109669720B (zh) | 基于Promise的链式异步请求处理方法、装置及电子设备 | |
| CN111209205B (zh) | 配置方法、装置和电子设备 | |
| CN114327453B (zh) | 页面显示方法、装置、设备及存储介质 | |
| CN113296771B (zh) | 页面显示方法、装置、设备和计算机可读介质 | |
| CN111008178B (zh) | 数据处理方法、装置、电子设备及计算机可读存储介质 | |
| CN111381898B (zh) | 一种接口调用方法、装置、移动终端及存储介质 | |
| CN113778566A (zh) | 原生应用调用方法、装置、电子设备和计算机可读介质 | |
| CN114237819A (zh) | 基于Java虚拟机进行处理的方法及装置、电子设备 | |
| CN113419716A (zh) | 一种代码生成方法、装置、终端设备及存储介质 | |
| CN113709171A (zh) | 一种用于跨组件状态通信的方法和装置 | |
| CN110750242A (zh) | 一种部署文件的方法、系统、介质和电子设备 | |
| CN112445517B (zh) | 入口文件生成方法、装置、电子设备和计算机可读介质 | |
| CN118012470B (zh) | 电力信息管理应用更新方法、装置、电子设备与介质 | |
| CN112688863B (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |