CN111414154A - 前端开发的方法、装置、电子设备和存储介质 - Google Patents

Abstract

本发明公开了前端开发的方法、装置、电子设备和存储介质，涉及计算机技术领域。该方法的一具体实施方式包括：根据目标页面，构建前端开发框架，前端开发框架包括至少一个适配器；根据目标页面和预设应用程序编程接口API接口，开发前端开发框架，得出目标页面的前端页面数据；在待调试环境中运行前端页面数据，并从至少一个适配器中确定与待调试环境对应的目标适配器；通过目标适配器，在待调试环境中对前端页面数据进行调试。该实施方式能够在前端开发时，不同平台和应用需要重复开发，不仅浪费时间，还会提高开发成本的问题。

Description

前端开发的方法、装置、电子设备和存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种前端开发的方法、装置、电子设备和存储介质。

背景技术

前端开发是创建Web页面或app(application，应用)等前端界面呈现给用户的过程，可以通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

在前端开发某功能时，开发需要依托于第三方应用或是PC平台，开发出的代码只能适用于开发时依托的第三方应用或是PC平台，对其他应用和平台并不适用，其他应用和平台需要通过再次开发的方式实现该功能，不仅浪费时间，还会提高开发成本。

发明内容

有鉴于此，本发明实施例提供一种前端开发的方法、装置、系统和存储介质，能够在前端开发时，不同平台和应用需要重复开发，不仅浪费时间，还会提高开发成本的问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种前端开发的方法。

本发明实施例的一种前端开发的方法包括：根据目标页面，构建前端开发框架，所述前端开发框架包括至少一个适配器；根据所述目标页面和预设API(ApplicationProgramming Interface，应用程序编程接口)接口，开发所述前端开发框架，得出所述目标页面的前端页面数据；在待调试环境中运行所述前端页面数据，并从所述至少一个适配器中确定与所述待调试环境对应的目标适配器；通过所述目标适配器，在所述待调试环境中对所述前端页面数据进行调试。

在一个实施例中，所述从所述至少一个适配器中确定与所述待调试环境对应的目标适配器，包括：

根据所述待调试环境中目标参数，确定所述待调试环境所属类型；

根据所述待调试环境所属类型，确定与所述待调试环境对应的目标适配器。

在又一个实施例中，所述目标参数包括所述待调试环境对应的浏览器内置方法和浏览器地址信息；

所述根据所述待调试环境中目标参数，确定所述待调试环境所属类型，包括：

根据所述浏览器内置方法的参数值和浏览器地址信息的参数值，确定所述待调试环境所属类型。

在又一个实施例中，所述待调试环境所属类型包括PC(个人计算机)浏览器类型、SDK类型、移动端类型中的一项或多项。

在又一个实施例中，所述预设API接口包括所述目标参数；

根据所述待调试环境中目标参数，确定所述待调试环境所属类型，包括：

判断所述目标参数是否被调用或者所述目标参数的参数值；

若所述目标参数被调用或者所述目标参数的参数值，则确定所述待调试环境所属类型为挡板测试类型。

在又一个实施例中，所述前端开发框架包括业务展示层、业务逻辑层、接口定义层、组件层和适配器层，所述适配器层包括所述至少一个适配器，所述接口定义层包括所述预设API接口。

在又一个实施例中，所述根据所述目标页面和预设API接口，开发所述前端开发框架，得出所述目标页面的前端页面数据，包括：

使用所述预设API接口，分别对所述业务展示层、所述业务逻辑层、所述组件层和所述适配器层进行开发，使开发后的业务展示层、业务逻辑层、组件层和适配器层实现所述目标页面；

根据开发后的业务展示层、业务逻辑层、组件层和适配器层，确定所述前端页面数据。

在又一个实施例中，所述根据目标页面，构建前端开发框架，包括：

根据所述目标页面的功能，划分开发所述目标页面的功能模块；

将所述目标页面的功能模块确定为所述前端开发框架。

为实现上述目的，根据本发明的另一方面，提供了一种前端开发的装置。

本发明的一种前端开发的装置包括：构建单元，用于根据目标页面，构建前端开发框架，所述前端开发框架包括至少一个适配器；开发单元，用于根据所述目标页面和预设API接口，开发所述前端开发框架，得出所述目标页面的前端页面数据；确定单元，用于在待调试环境中运行所述前端页面数据，并从所述至少一个适配器中确定与所述待调试环境对应的目标适配器；调试单元，用于通过所述目标适配器，在所述待调试环境中对所述前端页面数据进行调试。

在一个实施例中，所述确定单元，具体用于：

根据所述待调试环境中目标参数，确定所述待调试环境所属类型；

根据所述待调试环境所属类型，确定与所述待调试环境对应的目标适配器。

在又一个实施例中，所述目标参数包括所述待调试环境对应的浏览器内置方法和浏览器地址信息；

所述确定单元，具体用于根据所述浏览器内置方法的参数值和浏览器地址信息的参数值，确定所述待调试环境所属类型。

在又一个实施例中，所述待调试环境所属类型包括PC浏览器类型、SDK类型、移动端类型中的一项或多项。

在又一个实施例中，所述预设API接口包括所述目标参数；

所述确定单元，具体用于：

判断所述目标参数是否被调用或者所述目标参数的参数值；

若所述目标参数被调用或者所述目标参数的参数值，则确定所述待调试环境所属类型为挡板测试类型。

在又一个实施例中，所述前端开发框架包括业务展示层、业务逻辑层、接口定义层、组件层和适配器层，所述适配器层包括所述至少一个适配器，所述接口定义层包括所述预设API接口。

在又一个实施例中，所述开发单元具体用于：

使用所述预设API接口，分别对所述业务展示层、所述业务逻辑层、所述组件层和所述适配器层进行开发，使开发后的业务展示层、业务逻辑层、组件层和适配器层实现所述目标页面；

根据开发后的业务展示层、业务逻辑层、组件层和适配器层，确定所述前端页面数据。

在又一个实施例中，所述构建单元具体用于：

根据所述目标页面的功能，划分开发所述目标页面的功能模块；

将所述目标页面的功能模块确定为所述前端开发框架。

为实现上述目的，根据本发明实施例的再一个方面，提供了一种电子设备。

本发明实施例的一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例提供的前端开发的方法。

为实现上述目的，根据本发明实施例的又一个方面，提供了一种计算机可读介质。

本发明实施例的一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例提供的前端开发的方法。

上述发明中的一个实施例具有如下优点或有益效果：本发明实施例中，在前端开发时可以先构建出前端开发框架，然后基于预设API接口，对前端开发框架进行开发，得出能够实现目标页面的前端页面数据，由于前端开发框架包括至少一个适配器，所以基于适配器，前端页面数据可以在不同的运行环境中调试，也就是说开发的前端页面数据可以适用于不同的运行环境。如此本发明实施例中基于前端开发框架进行目标页面开发，并通过适配器可以运行在不同的环境中，即可以不依赖第三方应用或平台，实现跨平台开发，所以对各不同的运行环境，不需要重复开发目标页面，从而减少前端开发的时间，降低开发的成本。

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

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的前端开发框架的一种示意图；

图2是根据本发明实施例的前端开发的方法的一种主要流程的示意图；

图3是根据本发明实施例的确定适配器的方法的又一种主要流程的示意图；

图4是根据本发明实施例的前端开发的装置的主要单元的示意图；

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

图6是适于用来实现本发明实施例的计算机系统的结构示意图。

具体实施方式

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

需要指出的是，在不冲突的情况下，本发明中的实施例以及实施例中的特征可以互相组合。

本发明实施例提供一种前端开发的方法，可以用于对目标页面进行前端开发的场景中，例如对H5页面的开发。在对目标页面进行开发时，为了使开发的数据能够适用于各种运行环境，本发明实施例中可以构建前端开发框架，前端开发框架可以包括与各不同运行环境对应的适配器，所以通过前端开发框架开发的目标页面可以通过适配器在各运行环境中调试和运行，从而对各不同的运行环境，不需要重复开发目标页面，从而减少前端开发的时间，降低开发的成本。

在页面开发时，通常会需要多个开发者共同开发，各开发者可以根据页面所实现的功能来划分开发时负责的内容，所以本发明实施例中前端页面框架也可以根据页面所实现的功能来构建。例如，图1为前端开发框架的一种示意图。如图1所示，前端开发框架可以包括业务展示层、业务逻辑层、接口定义层、组件层和适配器层，其中，组件层包括日志组件、通讯组件、控制台组件和数据挡板组件，适配器层可以包括适配选择器和与不同运行环境的适配器，图1中以原生适配器、PC适配器、挡板适配器为例进行说明。业务展示层用于页面的业务展示内容的开发；业务逻辑层用于页面的业务需求逻辑的开发；接口定义层用于预定义适用于页面业务功能的API接口，前端开发框架中其他部分开发均使用预设的API接口，从而实现各部分之间统一连接；组件层用于基于开源组件进行模块化封装，开源组件可以包括：axios、axios-mock-adapter、mint-ui、vconsole、vue、vue-router、vuejs-logger等；适配器层用于适用于各运行环境的适配器开发。

接口定义层中预先定义了API接口，即预设API接口，前端开发框架基于预设API接口进行开发。预设API接口为上层提供统一的API接口，这样上层开发时代码使用的接口都是统一的，不需要根据不同平台而使用不同的接口代码，所以可以实现对上层(业务展示层、业务逻辑层)屏蔽底层系统差异。同时，在前端开发框架开发页面后的具体实现上，可以根据运行环境的不同，在内部调用不同的适配器，来实现对应的逻辑功能，即实现对下层做不同的适配。

接口定义层通常没有代码逻辑，主要用来定义可供业务逻辑层进行调用的API接口，如接口有哪些，以及各接口的输入参数都是什么。前端开发框架中需要实现接口逻辑的代码通常在适配器层中，由于适配器均需要与运行环境中接口对接，所以适配器中代码实现API接口的接口逻辑。如原生适配器为以手机操作系统所提供的方式来实现接口逻辑，PC适配器为以PC浏览器的方式来实现接口逻辑，挡板适配是基于接口报文模拟的方式来实现接口逻辑。虽然说因为运行环境的不同导致具体的实现逻辑上有差异，但是都需要依据接口定义层定义的统一API接口。

具体的，预设API接口可以如表1所示，表1为定义的一种API接口。

表1

在表1中，getTime()表示调用此接口的时间戳，其为基础的功能函数，用于获取当前的时间戳，有的服务端业务接口传入参数时需要用到，表1中可以封装成一个公共的函数，供业务调用。debug(...args)、info(...args)、warn(...args)、error(...args)、fatal(...args)都是对应的日志输出函数，每一个都对应了不同的输出级别。例如，一些调试日志可以用debug(...args)进行输出，但是对一些验证影响程序运行的错误日志通过fatal(...args)函数输出。再例如，在开发阶段，接口可以将日志级别调成debug(...args)，则可以查看最详细的日志输出；在生产发布阶段，接口可以将日志级别调成warn(...args)，则可以输出warn(...args)、error(...args)、fatal(...args)级别的日志，以减少不必要日志的输出。在每次发送请求时，客户端可以通过getUuid()生成一个唯一的编号(流水号)，此编号会在所有接口的调用过程中使用、传递，如此在使用过程中出现问题的时候，通过此编号可以进行日志的搜索查询，分析问题出现的原因。在一些页面实现的业务中可能涉及人脸识别，所以定义async callFaceCheck(name,identity,phone,token)函数。在一些业务中需要进行一些中间数据的存储，以便后续使用，所以通过getStore(key)函数来实现。setStore(key,value)和getStore(key)为通用方法，业务逻辑层可以根据具体的需要通过此两函数进行数据存储和取出。

本发明实施例提供了一种前端开发的方法，该方法可以由终端设备执行，如图2所示，该方法包括以下步骤。

S201：根据目标页面，构建前端开发框架。

其中，前端开发框架包括至少一个适配器，各适配器对应不同的运行环境。目标页面为需要开发的前端页面。本发明实施例中可以根据目标页面来构建前端开发框架，构建的前端开发框架可以包括业务展示层、业务逻辑层、接口定义层、组件层和适配器层，其中配器层包括至少一个适配器，接口定义层包括预设API接口。具体的，构建的前端开发框架可以如图1所示。

本发明实施例中，对于目标页面，可以根据其所实现的功能来划分功能模块，然后按照划分的功能模块确定出前端开发框架。所以构建前端开发框架的方式可以具体为：根据目标页面的功能，划分开发目标页面的功能模块；将目标页面的功能层确定为前端开发框架。

需要说明的是，构建前端开发框架可以通过JavaScript(通常缩写为JS，一种高级的、解释型的编程语言)来开发，所以构建的前端开发框架可以称为JS开发框架。如图1所示的前端开发框架可以设置为前端开发中通用的前端开发框架，对不同的目标页面构建前端开发框架时，如果图1所示的前端开发框架可以使用，则可以直接使用图1所示的前端开发框架。

S202：根据目标页面和预设API接口，开发前端开发框架，得出目标页面的前端页面数据。

其中，预设API接口为预先定义的，其表示目标页面开发所使用的统一API接口规范。

在步骤S201构建出前端开发框架后，可以基于前端开发框架进行开发，以开发出实现目标页面的代码，即前端页面数据。在开发过程中每个接口需要统一使用预设API接口，以保证前端开发框架的各部分在完成开发后可以根据预设API接口进行数据通信。

具体的，在前端开发框架包括业务展示层、业务逻辑层、组件层和适配器层时，本步骤中可以使用预设API接口，分别对业务展示层、业务逻辑层、组件层和适配器层进行开发，以使开发后的业务展示层、业务逻辑层、组件层和适配器层能够实现目标页面，如此完成开发后的业务展示层、业务逻辑层、组件层和适配器层后，业务展示层、业务逻辑层、组件层和适配器层开发完成的代码即为前端页面数据。

S203：在待调试环境中运行前端页面数据，并从至少一个适配器中确定与待调试环境对应的目标适配器。

其中，在步骤S202中确定前端页面数据后，还需要对各运行环境进行前端页面数据进行调试。

由于不同的运行环境中所使用的接口不同，与本发明实施例中目标页面开发所使用的API接口可能也不相同，所以为了能够使开发得出的前端页面数据能够在不同运行环境中调试和运行，需要在开发出与各运行环境对应的适配器，通过适配器可以实现目标页面开发所使用的API接口与运行环境中接口的转换。所以在本步骤在待调试环境中调试前端页面数据时，需要从前端开发架构包括的适配器中确定出与待调试环境对应的目标适配器。

需要说明的是，待调试环境表示调试前端页面数据的运行环境，通过前端页面数据在待调试环境中运行来进行调试。在调试时，前端开发架构所包括的适配器有可能并不适用于待调试环境，所以在确定前端页面数据进行调试时，还可以基于待调试环境来开发新的适配器，以便于能够使前端页面数据在待调试环境可以运行。

对应相同类型的运行环境，通常所使用的适配器是相同的，所以本发明实施例中可以根据运行环境的类型来确定适配器，即根据待调试环境所属类型来确定目标适配器。具体的，确定目标适配器的过程可以执行为：根据待调试环境中目标参数，确定待调试环境所属类型；根据待调试环境所属类型，确定与待调试环境对应的目标适配器。

前端开发框架所包括的适配器与运行环境所属类型对应关系，可以进行预先设置，在确定出待调试环境所属类型后，根据设置的对应关系可以确定出与待调试环境对应的目标适配器。本发明实施例中，对不同的待调试环境可以通过不同的目标参数来确定所属类型。

例如，待调试环境所属类型可以包括PC浏览器类型、SDK类型、移动端类型，确定待调试环境所属类型的目标参数可以包括待调试环境对应的浏览器内置方法(navigator.userAgent)和浏览器地址信息，其中，浏览器地址信息可以通过location.href参数获取。其中，SDK类型的运行环境对应的适配器可以为图1所示的原生适配器。

再例如，待调试环境所属类型为挡板测试类型时，可以通过预设API接口中目标参数来确定。本发明实施例中，可以在预设API接口设置目标参数，通过目标参数是否被调用或者目标参数的参数值来判断待调试环境所属类型是否为挡板测试类型。具体过程可以为：判断目标参数是否被调用或者目标参数的参数值；若目标参数被调用或者目标参数的参数值，则确定待调试环境所属类型为挡板测试类型。

如果设置目标参数被调用来表示待调试环境所属类型为挡板测试类型，则若目标参数被调用则表示待调试环境所属类型为挡板测试类型。

如果设置目标参数的参数值为目标参数值来表示待调试环境所属类型为挡板测试类型，则若目标参数的参数值为目标参数值则表示待调试环境所属类型为挡板测试类型。

具体的，预设API接口为表示1所示的接口时，目标参数可以为send()函数，例如可以基于开源的axios-mock-adapter模块，对API接口中的send()方法进行拦截，当setMock()方法被调用时，确定待调试环境所属类型为挡板测试类型，则可以对所有服务端请求进行拦截，使用本地的预置报文进行返回。挡板测试类型的运行环境对应的适配器可以为图1所示的挡板适配器。

S204：通过目标适配器，在待调试环境中对前端页面数据进行调试。

其中，在确定出对应待调试环境的目标适配器后，则可以基于目标适配器对前端页面数据在待调试环境中进行调试。在完成调试后即可完成整体的开发过程，调试后的前端页面数据可以直接在待调试环境运行来实现目标页面。

本发明实施例中，在前端开发时可以预先构建出前端开发框架，然后基于预设API接口，对前端开发框架进行开发，得出能够实现目标页面的前端页面数据，由于前端开发框架包括至少一个适配器，所以基于适配器，前端页面数据可以在不同的运行环境中调试，也就是说开发的前端页面数据可以适用于不同的运行环境。如此本发明实施例中基于前端开发框架进行目标页面开发，并通过适配器可以运行在不同的环境中，即不依赖第三方应用或平台，所以对各不同的运行环境，不需要重复开发目标页面，从而减少前端开发的时间，降低开发的成本。

下面结合图2所示的实施例，对本发明实施例中对待调试环境所属类型可以包括PC浏览器类型、SDK类型、移动端类型时，确定目标适配器的方法进行具体说明。如图3所示，该方法包括以下步骤。

S301：获取待调试环境中浏览器的navigator.userAgent的参数值。

其中，浏览器中navigator.userAgent参数可以用于确定浏览器的类型，进而可以基于浏览器的类型确定出待调试环境所属类型。

不同类型的运行环境中，navigator.userAgent参数值不同。具体的，在对应不同类型的运行环境时，navigator.userAgent参数值通常会包括不同的标识。本发明实施例中，以待调试环境所属类型为PC浏览器类型时，navigator.userAgent参数值包括第一标识，待调试环境所属类型为移动端类型时，navigator.userAgent参数值包括第二标识为例进行说明。所以本步骤中获取待调试环境中浏览器的navigator.userAgent的参数值后，可以根据navigator.userAgent的参数值来判断待调试环境所属类型是否为PC浏览器类型或移动端类型。

S302：判断navigator.userAgent的参数值是否包括第一标识；若否，则执行步骤S303；若是，则确定待调试环境所属类型为PC浏览器类型，并确定与PC浏览器类型对应的适配器为目标适配器。

其中，如果navigator.userAgent的参数值包括第一标识，则说明待调试环境所属类型为PC浏览器类型，此时可以确定出与PC浏览器类型对应的适配器为目标适配器。如果navigator.userAgent的参数值不包括第一标识，则还需要再进行判断。与PC浏览器类型对应的适配器可以为图1所示的PC适配器。

在确定与PC浏览器类型对应的适配器为目标适配器后，可以实例化browser.js，按照PC浏览器底层API接口封装实现。

S303：判断navigator.userAgent的参数值是否包括第二标识，若否，则执行步骤S304；若是，则确定待调试环境所属类型为移动端类型，并确定与移动端类型对应的适配器为目标适配器。

其中，如果navigator.userAgent的参数值包括第二标识，则说明待调试环境所属类型为移动端类型，此时可以确定出与移动端类型对应的适配器为目标适配器。如果navigator.userAgent的参数值不包括第二标识，则还需要再进行判断。

S304：获取待调试环境中浏览器的当前网址。

本发明实施例中，可以通过待调试环境中浏览器的当前网址来判断待调试环境所属类型是否为SDK类型。具体方式为，如果浏览器的当前网址包括目标传参，则可以确定待调试环境所属类型为SDK类型。所以本步骤中可以获取待调试环境中浏览器的当前网址。

待调试环境中浏览器的当前网址，可以从location.href参数的参数值中获取。

S305：判断浏览器的当前网址是否包括目标传参，若否，则结束流程；若是，则确定待调试环境所属类型为SDK类型，并确定与SDK类型对应的适配器为目标适配器。

其中，如果浏览器的当前网址包括目标传参，则说明待调试环境所属类型为SDK类型，此时可以确定出与SDK类型对应的适配器为目标适配器。如果浏览器的当前网址不包括目标传参，则通过本发明实施例无法确定待调试环境所属类型，结束本发明实施例的流程，后续可以通过其他参数再来判断待调试环境所属类型。

在确定待调试环境所属类型为SDK类型后，可以实例化bridge.js，即按照jsBridge(一种开源的，在手机浏览器跟原始代码直接做数据通讯的方式)的方式的API接口封装实现。

本发明实施例中，不同待调试环境所属类型，可以通过不同的目标参数来判断，进而确定出与各不同待调试环境所属类型对应的目标适配器，以实现步骤S202得出的前端页面数据可以在各待调试环境种进行调试。

本发明实施例，通过前端开发框架进行开发，无需原生端配合，并且整合了完整的开发、调试工具链，可以获取多端一致的开发调试体验，屏蔽掉系统底层差异、跟网络环境复杂所带来的开发效率低下问题。如可以通过挡板适配器构建测试数据，先行在本地完成目标页面绝大部分逻辑开发、调试工作，然后在终端上借助于日志工具快速定位联调问题。

为了解决现有技术存在的问题，本发明实施例提供了一种前端开发的装置400，如图4所示，该装置400包括：

构建单元401，用于根据目标页面，构建前端开发框架，所述前端开发框架包括至少一个适配器；

开发单元402，用于根据所述目标页面和预设API接口，开发所述前端开发框架，得出所述目标页面的前端页面数据；

确定单元403，用于在待调试环境中运行所述前端页面数据，并从所述至少一个适配器中确定与所述待调试环境对应的目标适配器；

调试单元404，用于根据所述目标适配器，在所述待调试环境中对所述前端页面数据进行调试。

应理解的是，实施本发明实施例的方式与实施图2所示实施例的方式相同，在此不再赘述。

本发明实施例的一种实现方式中，所述确定单元403，具体用于：

根据所述待调试环境中目标参数，确定所述待调试环境所属类型；

根据所述待调试环境所属类型，确定与所述待调试环境对应的目标适配器。

本发明实施例的又一种实现方式中，所述目标参数包括所述待调试环境对应的浏览器内置方法和浏览器地址信息；

所述确定单元403，具体用于根据所述浏览器内置方法的参数值和浏览器地址信息的参数值，确定所述待调试环境所属类型。

本发明实施例的又一种实现方式中，所述待调试环境所属类型包括PC浏览器、SDK类型、移动端类型中的一项或多项。

本发明实施例的又一种实现方式中，所述预设API接口包括所述目标参数；

所述确定单元403，具体用于：

判断所述目标参数是否被调用或者所述目标参数的参数值；

若所述目标参数被调用或者所述目标参数的参数值，则确定所述待调试环境所属类型为挡板测试类型。

本发明实施例的又一种实现方式中，所述前端开发框架包括业务展示层、业务逻辑层、接口定义层、组件层和适配器层，所述适配器层包括所述至少一个适配器，所述接口定义层包括所述预设API接口。

本发明实施例的又一种实现方式中，所述开发单元402具体用于：

使用所述预设API接口，分别对所述业务展示层、所述业务逻辑层、所述组件层和所述适配器层进行开发，使开发后的业务展示层、业务逻辑层、组件层和适配器层实现所述目标页面；

根据开发后的业务展示层、业务逻辑层、组件层和适配器层，确定所述前端页面数据。

本发明实施例的又一种实现方式中，所述构建单元401具体用于：

根据所述目标页面的功能，划分开发所述目标页面的功能模块；

将所述目标页面的功能模块确定为所述前端开发框架。

应理解的是，实施本发明实施例的方式与实施图2或图3所示实施例的方式相同，在此不再赘述。

本发明实施例中，在前端开发时可以先构建出前端开发框架，然后基于预设API接口，对前端开发框架进行开发，得出能够实现目标页面的前端页面数据，由于前端开发框架包括至少一个适配器，所以基于适配器，前端页面数据可以在不同的运行环境中调试，也就是说开发的前端页面数据可以适用于不同的运行环境。如此本发明实施例中基于前端开发框架进行目标页面开发，并通过适配器可以运行在不同的环境中，即可以不依赖第三方应用或平台，所以对各不同的运行环境，不需要重复开发目标页面，从而减少前端开发的时间，降低开发的成本。

根据本发明的实施例，本发明还提供了一种电子设备和一种可读存储介质。

本发明的电子设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行本发明实施例所提供的前端开发的方法。

图5示出了可以应用本发明实施例的前端开发的方法或前端开发的装置的示例性系统架构500。

如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

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

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

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

需要说明的是，本发明实施例所提供的前端开发的方法一般由服务器505执行，相应地，前端开发的装置一般设置于服务器505中。

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

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

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

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

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

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

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

描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括构建单元、开发单元、确定单元和调试单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，构建单元还可以被描述为“构建单元的功能的单元”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备执行本发明所提供的前端开发的方法。

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

Claims (10)

1.一种前端开发的方法，其特征在于，包括：

根据目标页面，构建前端开发框架，所述前端开发框架包括至少一个适配器；

根据所述目标页面和预设API接口，开发所述前端开发框架，得出所述目标页面的前端页面数据；

在待调试环境中运行所述前端页面数据，并从所述至少一个适配器中确定与所述待调试环境对应的目标适配器；

通过所述目标适配器，在所述待调试环境中对所述前端页面数据进行调试。

2.根据权利要求1所述的方法，其特征在于，所述从所述至少一个适配器中确定与所述待调试环境对应的目标适配器，包括：

根据所述待调试环境中目标参数，确定所述待调试环境所属类型；

根据所述待调试环境所属类型，确定与所述待调试环境对应的目标适配器。

3.根据权利要求2所述的方法，其特征在于，所述目标参数包括所述待调试环境对应的浏览器内置方法和浏览器地址信息；

所述根据所述待调试环境中目标参数，确定所述待调试环境所属类型，包括：

根据所述浏览器内置方法的参数值和浏览器地址信息的参数值，确定所述待调试环境所属类型。

4.根据权利要求2所述的方法，其特征在于，所述预设API接口包括所述目标参数；

根据所述待调试环境中目标参数，确定所述待调试环境所属类型，包括：

判断所述目标参数是否被调用或者所述目标参数的参数值；

若所述目标参数被调用或者所述目标参数的参数值，则确定所述待调试环境所属类型为挡板测试类型。

5.根据权利要求1所述的方法，其特征在于，所述前端开发框架包括业务展示层、业务逻辑层、接口定义层、组件层和适配器层，所述适配器层包括所述至少一个适配器，所述接口定义层包括所述预设API接口。

6.根据权利要求5所述的方法，其特征在于，所述根据所述目标页面和预设API接口，开发所述前端开发框架，得出所述目标页面的前端页面数据，包括：

使用所述预设API接口，分别对所述业务展示层、所述业务逻辑层、所述组件层和所述适配器层进行开发，使开发后的业务展示层、业务逻辑层、组件层和适配器层实现所述目标页面；

根据开发后的业务展示层、业务逻辑层、组件层和适配器层，确定所述前端页面数据。

7.根据权利要求1所述的方法，其特征在于，所述根据目标页面，构建前端开发框架，包括：

根据所述目标页面的功能，划分开发所述目标页面的功能模块；

将所述目标页面的功能模块确定为所述前端开发框架。

8.一种前端开发的装置，其特征在于，包括：

构建单元，用于根据目标页面，构建前端开发框架，所述前端开发框架包括至少一个适配器；

开发单元，用于根据所述目标页面和预设API接口，开发所述前端开发框架，得出所述目标页面的前端页面数据；

确定单元，用于在待调试环境中运行所述前端页面数据，并从所述至少一个适配器中确定与所述待调试环境对应的目标适配器；

调试单元，用于使用所述目标适配器，在所述待调试环境中对所述前端页面数据进行调试。

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

一个或多个处理器；

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

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

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

Images