CN115113869A - 基于浏览器的在线网页开发方法及装置 - Google Patents

Abstract

本申请公开了一种基于浏览器的在线网页开发方法及装置，本申请方法包括代码编辑模块获取编辑的源代码；代码处理模块对编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件，然后将目标代码文件发送给存储模块进行存储，并向控制模块发送包括目标代码文件的处理完成通知；控制模块根据完成通知向渲染模块发送代码变更范围通知；渲染模块根据代码变更范围通知向目标浏览器发送文件请求；路由模块监听到文件请求后将存储模块中的与文件请求对应的目标代码文件返回给渲染模块，使渲染模块接收与文件请求对应的目标代码文件，并进行输出渲染。本申请解决现有网页开发方式难度大、后端资源消耗大的问题。

Description

基于浏览器的在线网页开发方法及装置

技术领域

本申请涉及网页开发技术领域，具体而言，涉及一种基于浏览器的在线网页开发方法及装置。

背景技术

目前，对于网页的开发方式，包括基于本地电脑的开发方式，还包括基于云环境的开发方式。

对于基于本地电脑的开发方式，开发者需要在本地电脑启动开发服务，用它来将代码和网页连接起来。如图1所示，当代码的改动时，代码的改动以及该改动事件会经过本地开发服务器的处理，让页面内容得以更新。对于基于云环境的开发方式，是一些网络服务供应商提供面向网页作品的在线开发服务，如图2所示，在用户将网页上的编辑区的代码修改后，这些代码会被发送到云端的服务器进行处理，然后网页上的效果显示区会被通知刷新，最后效果显示区会重新加载最新的网页代码进行渲染显示。

发明人在进行网页的开发时，发现现有的无论是基于本地电脑的开发方式、抑或基于云环境的开发方式，都需要一个后端服务来处理开发时发生的代码变更。这种开发方式依赖于一个可以进行实时代码处理的服务。搭建这样的后端服务会有一定难度，不易让一般的入门学习者自行搭建。如果需要提供在线式的服务时，对后端资源的消耗也很大。

发明内容

本申请的主要目的在于提供一种基于浏览器的在线网页开发方法及装置，解决现有网页开发方式难度大、后端资源消耗大的问题。

为了实现上述目的，根据本申请的第一方面，提供了一种基于浏览器的在线网页开发方法。

根据本申请的基于浏览器的在线网页开发方法包括：代码编辑模块获取编辑的源代码；代码处理模块根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；所述代码处理模块将所述目标代码文件发送给存储模块，并向控制模块发送处理完成通知，所述处理完成通知中包括所述目标代码文件；所述存储模块接收所述目标代码文件并将所述目标代码文件进行存储；所述控制模块根据所述完成通知向渲染模块发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；所述渲染模块根据代码变更范围通知向所述目标浏览器发送文件请求；路由模块监听到所述文件请求后将所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块；所述渲染模块接收与所述文件请求对应的目标代码文件，并进行输出渲染。

可选的，所述代码处理模块根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件包括：所述代码处理模块将编辑的源代码进行解析；根据解析的结果以及语法结构产生语法树；对语法树内的节点进行转换处理；根据转换处理后的语法树，生成目标浏览器能够使用的目标代码文件。

可选的，所述渲染模块根据代码变更范围通知向所述目标浏览器发送文件请求包括：所述渲染模块根据代码变更范围通知判断发送局部更新的文件请求或整页面更新的文件请求。

可选的，在监听到文件请求后，所述方法还包括：获取所述文件请求的路径；判断所述路径是否为相对路径；若为相对路径，则执行所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块。

可选的，所述方法还包括：代码编辑模块调用控制模块的第一接口发送第一存储请求，所述第一接口为存储模块查询源代码和更新源代码的接口，所述第一存储请求种包括所述编辑的源代码；控制模块接收所述第一存储请求，将所述第一存储请求中的所述编辑的源代码发送给存储模块；所述存储模块接收所述编辑的源代码并将所述编辑的源代码进行存储。

可选的，所述方法还包括：所述控制模块将所述第一存储请求中的所述编辑的源代码以及代码变更事件发送给代码处理模块。

可选的，所述对语法树内的节点进行转换处理包括：将节点中的非标准语言特性、试验性语言特性转换为能够被所述目标浏览器使用的版本；和/或，将节点中非HTML、CSS、JavaScript、WebAssembly语言编写成的源代码转换为能够被所述目标浏览器使用的文件形式；和/或，将所述节点中代码里引用到的库文件获取到本地，并且转换为所述目标浏览器使用的文件形式。

可选的，所述进行输出渲染包括：在页面嵌套元素内输出渲染。

可选的，所述方法还包括：所述路由模块基于浏览器的ServiceWorker功能实现。

为了实现上述目的，根据本申请的第二方面，提供了一种基于浏览器的在线网页开发装置。

根据本申请的基于浏览器的在线网页开发装置包括：代码编辑模块、代码处理模块、存储模块、控制模块、渲染模块、路由模块：代码编辑模块，用于获取编辑的源代码；代码处理模块，用于根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；将所述目标代码文件发送给存储模块，并向控制模块发送处理完成通知，所述处理完成通知中包括所述目标代码文件；所述存储模块，用于接收所述目标代码文件并将所述目标代码文件进行存储；所述控制模块，用于根据所述完成通知向渲染模块发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；所述渲染模块，用于根据代码变更范围通知向所述目标浏览器发送文件请求；还用于接收路由模块发送的与所述文件请求对应的目标代码文件，并进行输出渲染。

可选的，所述代码处理模块包括：解析单元，用于所述代码处理模块将编辑的源代码进行解析；产生单元，用于根据解析的结果以及语法结构产生语法树；转换单元，用于对语法树内的节点进行转换处理；生成单元，用于根据转换处理后的语法树，生成目标浏览器能够使用的目标代码文件。

可选的，所述渲染模块还用于：根据代码变更范围通知判断发送局部更新的文件请求或整页面更新的文件请求。

可选的，所述渲染模块还包括：获取单元，用于在监听到文件请求后，获取所述文件请求的路径；判断单元，用于判断所述路径是否为相对路径；执行单元，用于若为相对路径，则执行所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块。

可选的，所述代码编辑模块，还用于调用控制模块的第一接口发送第一存储请求，所述第一接口为存储模块查询源代码和更新源代码的接口，所述第一存储请求种包括所述编辑的源代码；所述控制模块，还用于接收所述第一存储请求，将所述第一存储请求中的所述编辑的源代码发送给存储模块；所述存储模块，还用于接收所述编辑的源代码并将所述编辑的源代码进行存储。

可选的，所述控制模块，还用于将所述第一存储请求中的所述编辑的源代码以及代码变更事件发送给代码处理模块。

可选的，所述转换单元还用于：将节点中的非标准语言特性、试验性语言特性转换为能够被所述目标浏览器使用的版本；将节点中非HTML、CSS、JavaScript、WebAssembly语言编写成的源代码转换为能够被所述目标浏览器使用的文件形式；将所述节点中代码里引用到的库文件获取到本地，并且转换为所述目标浏览器使用的文件形式。

可选的，所述渲染模块还用于：在页面嵌套元素内输出渲染。

可选的，所述路由模块基于浏览器的ServiceWorker功能实现。

为了实现上述目的，根据本申请的第三方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行上述第一方面中任意一项所述的基于浏览器的在线网页开发方法。

为了实现上述目的，根据本申请的第四方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行上述第一方面中任意一项所述的基于浏览器的在线网页开发方法。

在本申请实施例的基于浏览器的在线网页开发方法及装置中，代码编辑模块获取编辑的源代码；代码处理模块根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；所述代码处理模块将所述目标代码文件发送给存储模块，并向控制模块发送处理完成通知，所述处理完成通知中包括所述目标代码文件；所述存储模块接收所述目标代码文件并将所述目标代码文件进行存储；所述控制模块根据所述完成通知向渲染模块发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；所述渲染模块根据代码变更范围通知向所述目标浏览器发送文件请求；路由模块监听到所述文件请求后将所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块；所述渲染模块接收与所述文件请求对应的目标代码文件，并进行输出渲染。本申请实施例中的基于浏览器的在线网页开发方式可以让开发者打开网页就得到开箱即用的网页开发环境，不需要进行后端服务的搭建，开发难度大大降低；在浏览器中直接完成代码编辑、代码处理和效果渲染大部分工作，各模块之间的数据交互发生在浏览器的脚本代码所影响的进程、内存之间，而不是网络请求的形式，从而可以节省服务提供方的后端文件输入输出端口占用、CPU计算资源、网络带宽资源等后端资源。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是现有的一种基于本地电脑的开发方式的一种示例图；

图2是现有的一种基于云环境的开发方式的一种示例图；

图3是根据本申请实施例提供的一种基于浏览器的在线网页开发方法流程图；

图4是根据本申请实施例提供的一种基于浏览器的在线网页开发装置的组成框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

首先需要说明的是，本申请实施例中的基于浏览器的在线网页开发方法是提供一种网页开发环境的服务，可以让开发者打开网页就得到开箱即用的网页开发环境。本方案的思路是在浏览器中直接完成代码编辑、代码处理和效果渲染大部分工作，让现有方案里的网络请求变成浏览器脚本代码之间的函数调用和过程调用，从而节省服务提供方的后端文件I/O占用、CPU计算资源、网络带宽资源等后端资源。

根据本申请实施例，提供了一种基于浏览器的在线网页开发方法，如图3所示，该方法包括如下的步骤S101-S108：S101.代码编辑模块获取编辑的源代码；S102.代码处理模块根据编辑的源代码以及编辑的源代码对应的代码变更事件对编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；S103.代码处理模块将目标代码文件发送给存储模块，并向控制模块发送处理完成通知；其中，处理完成通知中包括目标代码文件；S104.存储模块接收目标代码文件并将目标代码文件进行存储；S105.控制模块根据完成通知向渲染模块发送代码变更范围通知，代码变更范围通知的形式为页面更新事件的形式；S106.渲染模块根据代码变更范围通知向目标浏览器发送文件请求；S107.路由模块监听到文件请求后将存储模块中的与文件请求对应的目标代码文件返回给渲染模块；S108.渲染模块接收与文件请求对应的目标代码文件，并进行输出渲染。

步骤S101中，代码编辑模块是为用户提供网页源代码编辑功能的模块，用户通过代码编辑模块可以进行代码的编辑、修改等。因此，当用户通过代码编辑模块进行源代码的修改后，代码编辑模块可以获取到用户编辑的源代码。本申请实施例中的源代码是指包括但不限于超文本标记语言(HyperText Markup Language，HTML)、层叠样式表(CascadingStyle Sheets，CSS)、爪哇脚本(JavaScript，JS)、WebAssembly等语言编写成的代码内容。

当代码编辑模块获取到编辑的源代码后会调用控制模块的接口发起存储请求。本申请实施例中将该接口记作第一接口，具体的发起存储请求的过程为：代码编辑模块调用控制模块的第一接口发送第一存储请求，其中第一接口为存储模块查询源代码和更新源代码的接口，所述第一存储请求种包括所述编辑的源代码；当控制模块接收到第一存储请求后，会将所述第一存储请求中的所述编辑的源代码发送给存储模块；当存储模块接收到控制模块发送的编辑的源代码后，会将所述编辑的源代码进行存储。

当控制模块接收到第一存储请求还会将第一存储请求中的编辑的源代码以及代码变更事件发送给代码处理模块，使代码处理模块对编辑的源代码进行处理。其中，代码变更事件可以包括当前次源代码编辑对应的文件描述、编辑时间、用户账号等。

步骤S102中，代码处理模块根据编辑的源代码以及编辑的源代码对应的代码变更事件对编辑的源代码进行编译处理之前，代码处理模块会接收到控制模块发送的编辑的源代码以及代码变更事件。然后对编辑的源代码进行编译处理得到目标浏览器能够使用的目标代码文件。具体的编译处理包括：将编辑的源代码进行解析，此处的解析具体是指按照源代码编辑时所用的编程语言的语法进行解析；根据解析的结果以及语法结构产生语法树；对语法树内的节点进行转换处理；根据转换处理后的语法树，生成目标浏览器能够使用的目标代码文件。其中对语法树内的节点进行转换处理具体包括但不限于执行以下操作：将节点中的非标准语言特性、试验性语言特性转换为能够被目标浏览器使用的版本；和/或，将节点中非HTML、CSS、JavaScript、WebAssembly语言编写成的源代码转换为能够被所述目标浏览器使用的文件形式；和/或，将所述节点中代码里引用到的库文件获取到本地，并且转换为目标浏览器使用的文件形式，其中，库文件是指以代码重复使用为意图而托管在公有或者私有CDN服务上的、由当前开发者或者其他开发者开发并对外发布的、遵循开发社区常用库接口约定形式而提供功能接口的代码文件。上述转换处理是为了能够得到目标浏览器可以正常使用的代码文件的形式。其中，目标浏览器是指本次网页开发工作完成后取得最终网页以后，为实现网页可以正常被打开浏览，按照开发者意图而确定相应版本范围的、由某个或者若干个供应厂商提供的浏览器。最终得到的目标代码文件是指使用了能被目标浏览器能正确识别和运行的HTML、CSS、JavaScript、WebAssembly等语言编写的代码文件。

步骤S103中代码处理模块将编译处理完的目标代码文件发送给存储模块，并向控制模块发送处理完成通知，该处理完成通知中包括目标代码文件。将目标代码文件发送给存储模块后，执行步骤S104，即存储模块会接收所述目标代码文件并将所述目标代码文件进行存储。将目标代码文件发送给控制模块是为了将目标代码文件存储以及向渲染模块发送通知，让其进行渲染更新。将目标代码文件发送给控制模块后会执行S105，即根据完成通知向渲染模块发送代码变更范围通知，代码变更范围通知的形式为页面更新事件的形式。其中，代码变更范围是指以一个文件为最小单位进行计量的代码变动情况。

步骤S106中，渲染模块接收到代码变更范围通知后可以根据代码变更范围判断发送局部更新的文件请求或整页面更新的文件请求。具体的如果可以单独地获取发生变动的源代码所对应的、经过代码处理模块处理得到的目标代码文件然后执行更新，即可以单独获取用户编辑的那部分代码对应的目标代码文件进行更新，则在目标浏览器里发送局部更新的文件请求；否则，将整个页面刷新，在目标浏览器里发送整页面更新的文件请求，即请求全部源代码经过编译处理后的浏览器可以使用的目标代码文件。

步骤S107中，路由模块可以负责监听渲染模块发送的网络请求，本实施例中路由模块是基于浏览器的ServiceWorker功能实现的。ServiceWorker是独立于当前页面的一段运行在浏览器后台进程里的脚本，是一个可编程的网络代理，允许开发者控制页面上处理的网络请求。本实施例中路由模块监听到文件请求后，将所述存储模块中的与文件请求对应的目标代码文件返回给所述渲染模块之前，还需要获取文件请求的路径；判断所述路径是否为相对路径；若为相对路径，则将该文件请求拦截执行将存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块；若为绝对路径，则不做处理、将请求放行。其中，相对路径是指以渲染模块里的页面所在的目录为当前目录时，在网页的根目录下任意目录下的、以当前目录为起点进行路径编码的文件路径。绝对路径，是指指向任意因特网文件的完整的统一资源定位符(Uniform Resource Locator，URL)。另外，与文件请求对应的目标代码文件是指：局部更新的文件请求就获取局部目标代码文件，整页面更新的文件请求就获取对应的整个页面源代码对应的去全部目标代码文件。

步骤S108中，渲染模块接收路由模块返回的与文件请求对应的目标代码文件，并进行输出渲染。需要说明的是，本实施例中的输出渲染是将源代码所构建的网页在一个页面嵌套元素内即HTML iframe元素内渲染输出。

从以上的描述中，可以看出，本申请实施例的基于浏览器的在线网页开发方法中，代码编辑模块获取编辑的源代码；代码处理模块根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；所述代码处理模块将所述目标代码文件发送给存储模块，并向控制模块发送处理完成通知，所述处理完成通知中包括所述目标代码文件；所述存储模块接收所述目标代码文件并将所述目标代码文件进行存储；所述控制模块根据所述完成通知向渲染模块发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；所述渲染模块根据代码变更范围通知向所述目标浏览器发送文件请求；路由模块监听到所述文件请求后将所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块；所述渲染模块接收与所述文件请求对应的目标代码文件，并进行输出渲染。本申请实施例中的基于浏览器的在线网页开发方式可以让开发者打开网页就得到开箱即用的网页开发环境，不需要进行后端服务的搭建，开发难度大大降低；在浏览器中直接完成代码编辑、代码处理和效果渲染大部分工作，各模块之间的数据交互发生在浏览器的脚本代码所影响的进程、内存之间，而不是网络请求的形式，从而可以节省服务提供方的后端文件输入输出端口占用、CPU计算资源、网络带宽资源等后端资源。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机***中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例，还提供了一种用于实施上述图3方法的基于浏览器的在线网页开发装置200，如图4所示，该装置包括：代码编辑模块21、代码处理模块22、存储模块23、控制模块24、渲染模块25、路由模块26：代码编辑模块21，用于获取编辑的源代码；代码处理模块22，用于根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；将所述目标代码文件发送给存储模块23，并向控制模块24发送处理完成通知，所述处理完成通知中包括所述目标代码文件；所述存储模块23，用于接收所述目标代码文件并将所述目标代码文件进行存储；所述控制模块24，用于根据所述完成通知向渲染模块25发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；所述渲染模块25，用于根据代码变更范围通知向所述目标浏览器发送文件请求；还用于接收路由模块26发送的与所述文件请求对应的目标代码文件，并进行输出渲染。

具体的，本申请实施例的装置中各单元、模块实现其功能的具体过程可参见方法实施例中的相关描述，此处不再赘述。

从以上的描述中，可以看出，本申请实施例的基于浏览器的在线网页开发装置中，代码编辑模块获取编辑的源代码；代码处理模块根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；所述代码处理模块将所述目标代码文件发送给存储模块，并向控制模块发送处理完成通知，所述处理完成通知中包括所述目标代码文件；所述存储模块接收所述目标代码文件并将所述目标代码文件进行存储；所述控制模块根据所述完成通知向渲染模块发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；所述渲染模块根据代码变更范围通知向所述目标浏览器发送文件请求；路由模块监听到所述文件请求后将所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块；所述渲染模块接收与所述文件请求对应的目标代码文件，并进行输出渲染。本申请实施例中的基于浏览器的在线网页开发方式可以让开发者打开网页就得到开箱即用的网页开发环境，不需要进行后端服务的搭建，开发难度大大降低；在浏览器中直接完成代码编辑、代码处理和效果渲染大部分工作，各模块之间的数据交互发生在浏览器的脚本代码所影响的进程、内存之间，而不是网络请求的形式，从而可以节省服务提供方的后端文件输入输出端口占用、CPU计算资源、网络带宽资源等后端资源。

进一步的，所述代码处理模块22包括：解析单元，用于所述代码处理模块22将编辑的源代码进行解析；产生单元，用于根据解析的结果以及语法结构产生语法树；转换单元，用于对语法树内的节点进行转换处理；生成单元，用于根据转换处理后的语法树，生成目标浏览器能够使用的目标代码文件。

进一步的，所述渲染模块25还用于：根据代码变更范围通知判断发送局部更新的文件请求或整页面更新的文件请求。

进一步的，所述渲染模块25还包括：获取单元，用于在监听到文件请求后，获取所述文件请求的路径；判断单元，用于判断所述路径是否为相对路径；执行单元，用于若为相对路径，则执行所述存储模块23中的与所述文件请求对应的目标代码文件返回给所述渲染模块25。

进一步的，所述代码编辑模块21，还用于调用控制模块24的第一接口发送第一存储请求，所述第一接口为存储模块23查询源代码和更新源代码的接口，所述第一存储请求种包括所述编辑的源代码；所述控制模块24，还用于接收所述第一存储请求，将所述第一存储请求中的所述编辑的源代码发送给存储模块23；所述存储模块23，还用于接收所述编辑的源代码并将所述编辑的源代码进行存储。

进一步的，所述控制模块24，还用于将所述第一存储请求中的所述编辑的源代码以及代码变更事件发送给代码处理模块22。

进一步的，所述转换单元还用于：将节点中的非标准语言特性、试验性语言特性转换为能够被所述目标浏览器使用的版本；将节点中非HTML、CSS、JavaScript、WebAssembly语言编写成的源代码转换为能够被所述目标浏览器使用的文件形式；将所述节点中代码里引用到的库文件获取到本地，并且转换为所述目标浏览器使用的文件形式。

进一步的所述渲染模块25还用于：在页面嵌套元素内输出渲染。

进一步的所述路由模块26基于浏览器的ServiceWorker功能实现。

具体的，本申请实施例的装置中各单元、模块实现其功能的具体过程可参见方法实施例中的相关描述，此处不再赘述。

根据本申请实施例，还提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行上述方法实施例中的基于浏览器的在线网页开发方法。

根据本申请实施例，还提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行上述方法实施例中的基于浏览器的在线网页开发方法。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种基于浏览器的在线网页开发方法，其特征在于，所述方法包括：

代码编辑模块获取编辑的源代码；

代码处理模块根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；

所述代码处理模块将所述目标代码文件发送给存储模块，并向控制模块发送处理完成通知，所述处理完成通知中包括所述目标代码文件；

所述存储模块接收所述目标代码文件并将所述目标代码文件进行存储；

所述控制模块根据所述完成通知向渲染模块发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；

所述渲染模块根据代码变更范围通知向所述目标浏览器发送文件请求；

路由模块监听到所述文件请求后将所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块；

所述渲染模块接收与所述文件请求对应的目标代码文件，并进行输出渲染。

2.根据权利要求1所述的基于浏览器的在线网页开发方法，其特征在于，所述渲染模块根据代码变更范围通知向所述目标浏览器发送文件请求包括：

所述渲染模块根据代码变更范围通知判断发送局部更新的文件请求或整页面更新的文件请求。

3.根据权利要求1所述的基于浏览器的在线网页开发方法，其特征在于，在监听到文件请求后，所述方法还包括：

获取所述文件请求的路径；

判断所述路径是否为相对路径；

若为相对路径，则执行所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块。

4.根据权利要求1所述的基于浏览器的在线网页开发方法，其特征在于，所述方法还包括：

代码编辑模块调用控制模块的第一接口发送第一存储请求，所述第一接口为存储模块查询源代码和更新源代码的接口，所述第一存储请求种包括所述编辑的源代码；

控制模块接收所述第一存储请求，将所述第一存储请求中的所述编辑的源代码发送给存储模块；

所述存储模块接收所述编辑的源代码并将所述编辑的源代码进行存储。

5.根据权利要求4所述的基于浏览器的在线网页开发方法，其特征在于，所述方法还包括：

所述控制模块将所述第一存储请求中的所述编辑的源代码以及代码变更事件发送给代码处理模块。

6.根据权利要求1所述的基于浏览器的在线网页开发方法，其特征在于，所述代码处理模块根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件包括：

所述代码处理模块将编辑的源代码进行解析；

根据解析的结果以及语法结构产生语法树；

对语法树内的节点进行转换处理；

根据转换处理后的语法树，生成目标浏览器能够使用的目标代码文件。

7.根据权利要求6所述的基于浏览器的在线网页开发方法，其特征在于，所述对语法树内的节点进行转换处理包括：

将节点中的非标准语言特性、试验性语言特性转换为能够被所述目标浏览器使用的版本；和/或，

将节点中非HTML、CSS、JavaScript、WebAssembly语言编写成的源代码转换为能够被所述目标浏览器使用的文件形式；和/或，

将所述节点中代码里引用到的库文件获取到本地，并且转换为所述目标浏览器使用的文件形式。

8.一种基于浏览器的在线网页开发装置，其特征在于，所述装置包括：代码编辑模块、代码处理模块、存储模块、控制模块、渲染模块、路由模块：

代码编辑模块，用于获取编辑的源代码；

代码处理模块，用于根据所述编辑的源代码以及所述编辑的源代码对应的代码变更事件对所述编辑的源代码进行编译处理，得到目标浏览器能够使用的目标代码文件；将所述目标代码文件发送给存储模块，并向控制模块发送处理完成通知，所述处理完成通知中包括所述目标代码文件；

所述存储模块，用于接收所述目标代码文件并将所述目标代码文件进行存储；

所述控制模块，用于根据所述完成通知向渲染模块发送代码变更范围通知，所述代码变更范围通知的形式为页面更新事件的形式；

所述渲染模块，用于根据代码变更范围通知向所述目标浏览器发送文件请求；还用于接收路由模块发送的与所述文件请求对应的目标代码文件，并进行输出渲染；

路由模块，用于监听到所述文件请求后将所述存储模块中的与所述文件请求对应的目标代码文件返回给所述渲染模块。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行权利要求1至7中任意一项所述的基于浏览器的在线网页开发方法。

10.一种电子设备，其特征在于，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行权利要求1至7中任意一项所述的基于浏览器的在线网页开发方法。

Images