CN113836469A - 网站前端开发方法和设备 - Google Patents

Abstract

本申请实施例公开了网站前端开发方法和设备。该方法的一具体实施方式包括：接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求；解析资源请求，得到处理结果；将处理结果发送给终端浏览器。该实施方式在开发阶段不使用模块打包器解析处理源代码文件，而是通过服务端进行按需解析和处理，可以提升网站前端开发速度。

Description

网站前端开发方法和设备

技术领域

本申请实施例涉及计算机技术领域，具体涉及网站前端开发方法和设备。

背景技术

在现代软件开发领域，前后端分离是一项业界公认的最佳实践。前后端各司其职，并行开发。在开发阶段结束后，一起联调上线，能够达到降低耦合、快速交付业务需求的目的。

在前端领域中，常用的本地环境开发模式有：通过以webpack为代表的模块打包器将项目中使用的代码(如HTML(Hyper Text Markup Language，超文本标记语言)、脚本JavaScript、CSS(Cascading Style Sheets，层叠样式表)等)和静态资源进行本地打包后，由终端浏览器加载并渲染。

业界用的较多的是编译打包模式，尤其是以webpack为代表的模块打包器能把各种资源(如脚本JavaScript(JS/JSX/ES6+)、CSS、图片、SVG(Scalable Vector Graphics，可缩放矢量图形)、字体文件等)都作为模块来使用处理。然而，webpack需要提前准备启动开发服务器(dev-server：一种webpack提供的本地开发环境所用的服务器)。开发服务器的启动速度取决于项目的大小，也就是取决于源代码中模块的数量。如果需要webpack处理的模块数量很多，则开发服务器启动的速度就会变慢。

发明内容

本申请实施例提出了网站前端开发方法和设备。

第一方面，本申请实施例提供了一种网站前端开发方法，包括：接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求；解析资源请求，得到处理结果；将处理结果发送给终端浏览器。

在一些实施例中，解析资源请求，得到处理结果，包括：分解和整合目标源代码文件引用的文件，得到处理结果。

在一些实施例中，目标源代码文件是脚本文件；以及分解和整合目标源代码文件引用的文件，得到处理结果，包括：若检测到脚本文件中含有导入模块引用的文件，对导入模块引用的文件发起超文本传输协议请求，获取导入模块引用的文件对应模块的文件内容。

在一些实施例中，导入模块引用的文件是第三方的库；以及获取导入模块引用的文件对应模块的文件内容，包括：从绝对路径获取导入模块引用的文件对应模块的文件内容。

在一些实施例中，导入模块引用的文件是是自己开发的脚本文件；以及获取导入模块引用的文件对应模块的文件内容，包括：从相对路径获取导入模块引用的文件对应模块的文件内容。

在一些实施例中，分解和整合目标源代码文件引用的文件，得到处理结果，包括：创建本地开发服务器并启动；利用本地开发服务器读取目标源代码文件；根据目标源代码文件的文件类型，对目标源代码文件进行不同的逻辑处理。

在一些实施例中，根据目标源代码文件的文件类型，对目标源代码文件进行不同的逻辑处理，包括：若目标源代码文件是脚本文件或层叠样式表文件，通过重写目标源代码文件。

在一些实施例中，根据目标源代码文件的文件类型，对目标源代码文件进行不同的逻辑处理，包括：若目标源代码文件是语法扩展文件或组件文件，解析目标源代码文件。

在一些实施例中，通过创建全双工通信协议建立终端浏览器与服务端的通信。

在一些实施例中，该方法还包括：响应于监听到终端浏览器本地存储的源代码文件的变动，向终端浏览器发送变动提示消息。

第二方面，本申请实施例提供了一种网站前端开发方法，包括：加载网站项目的目标源代码文件；对目标源代码文件进行解析，得到解析结果；基于解析结果，向服务端发送资源请求；接收服务端基于资源请求返回的处理结果；对处理结果进行渲染。

在一些实施例中，目标源代码文件是脚本文件；以及基于解析结果，向服务端发送资源请求，包括：当解析到脚本标签类型为模块时，向服务端发送资源请求。

在一些实施例中，该方法还包括：响应于接收到服务端发送的本地存储的源代码文件的变动提示消息，根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作。

在一些实施例中，根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作，包括：若变动的源代码文件是脚本文件，重新加载脚本文件。

在一些实施例中，根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作，包括：若变动的源代码文件是层叠样式表文件，更新层叠样式表文件的标签。

第三方面，本申请实施例提供了一种网站前端开发装置，包括：接收模块，被配置成接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求；解析模块，被配置成解析资源请求，得到处理结果；第一发送模块，被配置成将处理结果发送给终端浏览器。

在一些实施例中，解析模块包括：解析子模块，被配置成分解和整合目标源代码文件引用的文件，得到处理结果。

在一些实施例中，目标源代码文件是脚本文件；以及解析子模块包括：获取单元，被配置成若检测到脚本文件中含有导入模块引用的文件，对导入模块引用的文件发起超文本传输协议请求，获取导入模块引用的文件对应模块的文件内容。

在一些实施例中，导入模块引用的文件是第三方的库；以及获取单元进一步被配置成：从绝对路径获取导入模块引用的文件对应模块的文件内容。

在一些实施例中，导入模块引用的文件是是自己开发的脚本文件；以及获取单元进一步被配置成：从相对路径获取导入模块引用的文件对应模块的文件内容。

在一些实施例中，解析子模块包括：创建单元，被配置成创建本地开发服务器并启动；读取单元，被配置成利用本地开发服务器读取目标源代码文件；处理单元，被配置成根据目标源代码文件的文件类型，对目标源代码文件进行不同的逻辑处理。

在一些实施例中，处理单元进一步被配置成：若目标源代码文件是脚本文件或层叠样式表文件，通过重写目标源代码文件。

在一些实施例中，处理单元进一步被配置成：若目标源代码文件是语法扩展文件或组件文件，解析目标源代码文件。

在一些实施例中，通过创建全双工通信协议建立终端浏览器与服务端的通信。

在一些实施例中，该装置还包括：第二发送模块，被配置成响应于监听到终端浏览器本地存储的源代码文件的变动，向终端浏览器发送变动提示消息。

第四方面，本申请实施例提供了一种网站前端开发装置，包括：加载模块，被配置成加载网站项目的目标源代码文件；解析模块，被配置成对目标源代码文件进行解析，得到解析结果；发送模块，被配置成基于解析结果，向服务端发送资源请求；接收模块，被配置成接收服务端基于资源请求返回的处理结果；渲染模块，被配置成对处理结果进行渲染。

在一些实施例中，目标源代码文件是脚本文件；以及解析模块进一步被配置成：当解析到脚本标签类型为模块时，向服务端发送资源请求。

在一些实施例中，该装置还包括：更新模块，被配置成响应于接收到服务端发送的本地存储的源代码文件的变动提示消息，根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作。

在一些实施例中，更新模块进一步被配置成：若变动的源代码文件是脚本文件，重新加载脚本文件。

在一些实施例中，更新模块进一步被配置成：若变动的源代码文件是层叠样式表文件，更新层叠样式表文件的标签。

第五方面，本申请实施例提供了一种计算机设备，该计算机设备包括：一个或多个处理器；存储装置，其上存储有一个或多个程序；当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如第一方面中任一实现方式描述的方法或者如第二方面中任一实现方式描述的方法。

第六方面，本申请实施例提供了一种计算机可读介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面中任一实现方式描述的方法如第二方面中任一实现方式描述的方法。

本申请实施例提供的网站前端开发方法和设备，在开发阶段不使用模块打包器解析处理源代码文件，而是通过服务端进行按需解析和处理，可以提升网站前端开发速度。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是根据本申请的网站前端开发方法的第一个实施例的流程图；

图2是根据本申请的网站前端开发方法的第二个实施例的流程图；

图3是根据本申请的网站前端开发方法的第三个实施例的流程图；

图4是根据本申请的网站前端开发方法的第四个实施例的流程图；

图5是根据本申请的网站前端开发方法的第五个实施例的流程图；

图6是根据本申请的网站前端开发方法的第六个实施例的流程图；

图7是网站前端开发的业务流程图；

图8是适于用来实现本申请实施例的计算机设备的计算机***的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

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

图1示出了是根据本申请的网站前端开发方法的第一个实施例的流程100。该网站前端开发方法包括以下步骤：

步骤101，接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求。

在本实施例中，开发者可以将网站项目的目标源代码文件发送给终端浏览器。终端浏览器在加载目标源代码文件时会对其进行解析，得到解析结果，并基于解析结果，向服务端发送资源请求。其中，目标源代码文件可以是开发者在网站项目中更新的文件。

在一些实施例中，在目标源代码文件是脚本文件的情况下，当终端浏览器解析到脚本标签类型为模块时，可以向服务端发送资源请求。

例如，网站项目的首页是index.html文件，该文件包含一个入口JS脚本文件：<script type＝"module"src＝"/src/main.js"></script>。当终端浏览器加载index.html文件时，会对其进行解析。当解析到script标签类型为module时(即type＝“module”)，就会向开发服务器发起一个GET请求，请求地址为：GET http://localhost:3000/src/main.js。

步骤102，解析资源请求，得到处理结果。

在本实施例中，服务端可以通过开发服务器(本地启动的dev-server)解析资源请求，得到处理结果。

通常，服务端中的开发服务器是由Node.js、Java、PHP等开发的。其中，Node.js更加方便，Node.js就是运行在服务端的JavaScript，它的底层使用了V8引擎，大大的提升了开发的性能及便利性。Node.js处理起来效率很高，并且有针对性的按需进行模块解析和处理，可以提升网站前端开发速度。

步骤103，将处理结果发送给终端浏览器。

在本实施例中，服务端可以将处理结果发送给终端浏览器。终端浏览器可以对处理结果进行渲染。

本申请实施例提供的网站前端开发方法，在开发阶段不使用模块打包器解析处理源代码文件，而是通过服务端进行按需解析和处理，可以提升网站前端开发速度。

继续参考图2，其示出了是根据本申请的网站前端开发方法的第二个实施例的流程200。该网站前端开发方法包括以下步骤：

步骤201，接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求。

在本实施例中，步骤201的具体操作已在图1所示的实施例中步骤101中进行了详细的介绍，在此不再赘述。

步骤202，分解和整合目标源代码文件引用的文件，得到处理结果。

在本实施例中，服务端可以分解和整合目标源代码文件引用的文件，得到处理结果。其中，目标源代码文件可以引用JS脚本文件、CSS文件等。

在一些实施例中，在目标源代码文件是脚本文件的情况下，若服务端检测到脚本文件中含有导入模块引用的文件，可以对导入模块引用的文件发起HTTP(Hyper TextTransfer Protocol，超文本传输协议)请求，获取导入模块引用的文件对应模块的文件内容。通常，若导入模块引用的文件是第三方的库，服务端可以从绝对路径获取导入模块引用的文件对应模块的文件内容。若导入模块引用的文件是是自己开发的脚本文件，服务端可以从相对路径获取导入模块引用的文件对应模块的文件内容。

这里，服务端的开发服务器的主要功能是通过解析终端浏览器的HTTP请求，在后端由Node.js进行相应的处理，将网站项目中的源代码文件引用的文件通过分解与整合，然后再返回给终端浏览器并进行页面的渲染。可以看出，整个过程中没有对源代码文件进行编译打包，这一点是和webpack区别最大的点。通过这种方式开发，运行速度要比通过webpack开发编译速度快。

例如，终端浏览器会解析到JS脚本文件内容：

///src/main.js:

import{createApp}from'react'；

import App from'./App.js'；

createApp(App).mount('#app')；

从上往下执行，node.js服务端会检测到JS脚本文件内含有import导入模块引用的文件，又会对其内部的import导入模块引用的文件发起HTTP请求，获取对应模块的文件内容，如：

GET http://localhost:3000/@modules/react.js

GET http://localhost:3000/src/App.js

其中，“react”是第三方的库，“GET http://localhost:3000/@modules/react.js”是绝对路径。“App”是自己开发的脚本文件，“GET http://localhost:3000/src/App.js”是相对路径。

步骤203，将处理结果发送给终端浏览器。

在本实施例中，步骤203的具体操作已在图1所示的实施例中步骤103中进行了详细的介绍，在此不再赘述。

从图2中可以看出，与图1对应的实施例相比，本实施例中的网站前端开发方法的流程200突出了解析资源请求的步骤。由此，在本实施例描述的方案中，服务端的开发服务器的主要功能是通过解析终端浏览器的HTTP请求，在后端由Node.js进行相应的处理，将网站项目中的源代码文件引用的文件通过分解与整合，然后再返回给终端浏览器并进行页面的渲染。可以看出，整个过程中没有对源代码文件进行编译打包，这一点是和webpack区别最大的点。通过这种方式开发，运行速度要比通过webpack开发编译速度快。

进一步参考图3，其示出了是根据本申请的网站前端开发方法的第三个实施例的流程300。该网站前端开发方法包括以下步骤：

步骤301，接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求。

在本实施例中，步骤301的具体操作已在图1所示的实施例中步骤101中进行了详细的介绍，在此不再赘述。

步骤302，创建本地开发服务器并启动。

在本实施例中，服务端可以创建本地开发服务器并启动。例如，使用koa创建一个本地开发服务器：dev-server,并启动好。其中，koa是一个Node.js的服务端框架。

步骤303，利用本地开发服务器读取目标源代码文件。

在本实施例中，服务端可以利用本地开发服务器读取目标源代码文件。例如，使用koa的中间件读取request模块。

步骤304，根据目标源代码文件的文件类型，对目标源代码文件进行不同的逻辑处理。

在本实施例中，服务端可以根据目标源代码文件的文件类型，对目标源代码文件进行不同的逻辑处理。

在一些实施例中，若目标源代码文件是JS脚本文件或CSS文件，通过重写目标源代码文件。若目标源代码文件是JSX文件或VUE文件，解析目标源代码文件。例如，通过rewrite方法重写JS脚本文件或CSS文件，通过compiler解析JSX文件或VUE文件。对于重写，如果请求的资源是携带/@modules/关键字的，将重写路径转换为读取自项目根目录下的node_modules目录中的相对应的内容。

步骤305，将处理结果发送给终端浏览器。

在本实施例中，步骤305的具体操作已在图1所示的实施例中步骤103中进行了详细的介绍，在此不再赘述。

从图3中可以看出，与图1对应的实施例相比，本实施例中的网站前端开发方法的流程300突出了解析资源请求的步骤。由此，在本实施例描述的方案中，根据目标源代码文件的文件类型进行不同的逻辑处理。整个过程中没有对源代码文件进行编译打包，运行速度要比通过webpack开发编译速度快。

进一步参考图4，其示出了是根据本申请的网站前端开发方法的第四个实施例的流程400。该网站前端开发方法包括以下步骤：

步骤401，接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求。

步骤402，解析资源请求，得到处理结果。

步骤403，将处理结果发送给终端浏览器。

在本实施例中，步骤401-403的具体操作已在图1所示的实施例中步骤101-103中进行了详细的介绍，在此不再赘述。

步骤404，响应于监听到终端浏览器本地存储的源代码文件的变动，向终端浏览器发送变动提示消息。

在本实施例中，通过创建全双工通信协议(如WebSocket)可以建立终端浏览器与服务端的通信。服务端可以通过watch监听终端浏览器本地存储的源代码文件的变动。若有文件变动，服务端可以向终端浏览器发送变动提示消息。在接收到变动提示消息的情况下，终端浏览器可以根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作，从而做到热模块及时更新。例如，若变动的源代码文件是JS脚本文件，终端浏览器可以重新加载JS脚本文件。又例如，若变动的源代码文件是CSS文件，终端浏览器可以更新CSS文件的标签。

从图4中可以看出，与图1对应的实施例相比，本实施例中的网站前端开发方法的流程400增加了热模块更新的步骤。由此，本实施例描述的方案通过创建全双工通信协议建立终端浏览器与服务端的通信。服务端可以监听终端浏览器本地存储的源代码文件的变动。若有文件变动，服务端可以向终端浏览器发送变动提示消息，以使终端浏览器根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作，从而做到热模块及时更新。

进一步参考图5，示出了根据本申请的网站前端开发方法的第五个实施例的流程500。该网站前端开发方法包括以下步骤：

步骤501，加载网站项目的目标源代码文件。

在本实施例中，开发者可以将网站项目的目标源代码文件发送给终端浏览器。终端浏览器可以加载目标源代码文件。其中，目标源代码文件可以是开发者在网站项目中更新的文件。

步骤502，对目标源代码文件进行解析，得到解析结果。

在本实施例中，终端浏览器在加载目标源代码文件时会对其进行解析，得到解析结果。

步骤503，基于解析结果，向服务端发送资源请求。

在本实施例中，终端浏览器可以基于解析结果，向服务端发送资源请求。服务端接收到资源请求之后，可以通过开发服务器(本地启动的dev-server)解析资源请求，得到处理结果。

通常，服务端中的开发服务器是由Node.js、Java、PHP等开发的。其中，Node.js更加方便，Node.js就是运行在服务端的JavaScript，它的底层使用了V8引擎，大大的提升了开发的性能及便利性。Node.js处理起来效率很高，并且有针对性的按需进行模块解析和处理，可以提升网站前端开发速度。

在一些实施例中，在目标源代码文件是脚本文件的情况下，当终端浏览器解析到脚本标签类型为模块时，可以向服务端发送资源请求。

例如，网站项目的首页是index.html文件，该文件包含一个入口JS脚本文件：<script type＝"module"src＝"/src/main.js"></script>。当终端浏览器加载index.html文件时，会对其进行解析。当解析到script标签类型为module时(即type＝“module”)，就会向开发服务器发起一个GET请求，请求地址为：GET http://localhost:3000/src/main.js。

步骤504，接收服务端基于资源请求返回的处理结果。

在本实施例中，服务端可以解析资源请求，得到处理结果，并发送至终端浏览器。

通常，服务端可以分解和整合目标源代码文件引用的文件，得到处理结果。其中，目标源代码文件可以引用JS脚本文件、CSS文件等。

在一些实施例中，在目标源代码文件是脚本文件的情况下，若服务端检测到脚本文件中含有导入模块引用的文件，可以对导入模块引用的文件发起HTTP请求，获取导入模块引用的文件对应模块的文件内容。通常，若导入模块引用的文件是第三方的库，服务端可以从绝对路径获取导入模块引用的文件对应模块的文件内容。若导入模块引用的文件是是自己开发的脚本文件，服务端可以从相对路径获取导入模块引用的文件对应模块的文件内容。

这里，服务端的开发服务器的主要功能是通过解析终端浏览器的HTTP请求，在后端由Node.js进行相应的处理，将网站项目中的源代码文件引用的文件通过分解与整合，然后再返回给终端浏览器并进行页面的渲染。可以看出，整个过程中没有对源代码文件进行编译打包，这一点是和webpack区别最大的点。通过这种方式开发，运行速度要比通过webpack开发编译速度快。

例如，终端浏览器会解析到JS脚本文件内容：

///src/main.js:

import{createApp}from'react'；

import App from'./App.js'；

createApp(App).mount('#app')；

从上往下执行，node.js服务端会检测到JS脚本文件内含有import导入模块引用的文件，又会对其内部的import导入模块引用的文件发起HTTP请求，获取对应模块的文件内容，如：

GET http://localhost:3000/@modules/react.js

GET http://localhost:3000/src/App.js

其中，“react”是第三方的库，“GET http://localhost:3000/@modules/react.js”是绝对路径。“App”是自己开发的脚本文件，“GET http://localhost:3000/src/App.js”是相对路径。

步骤505，对处理结果进行渲染。

在本实施例中，终端浏览器可以对处理结果进行渲染。

本申请实施例提供的网站前端开发方法，在开发阶段不使用模块打包器解析处理源代码文件，而是通过服务端进行按需解析和处理，可以提升网站前端开发速度。

进一步参考图6，其示出了是根据本申请的网站前端开发方法的第六个实施例的流程600。该网站前端开发方法包括以下步骤：

步骤601，加载网站项目的目标源代码文件。

步骤602，对目标源代码文件进行解析，得到解析结果。

步骤603，基于解析结果，向服务端发送资源请求。

步骤604，接收服务端基于资源请求返回的处理结果。

步骤605，对处理结果进行渲染。

在本实施例中，步骤601-605的具体操作已在图5所示的实施例中步骤501-505中进行了详细的介绍，在此不再赘述。

步骤606，响应于接收到服务端发送的本地存储的源代码文件的变动提示消息，根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作。

在本实施例中，通过创建全双工通信协议(如WebSocket)可以建立终端浏览器与服务端的通信。服务端可以通过watch监听终端浏览器本地存储的源代码文件的变动。若有文件变动，服务端可以向终端浏览器发送变动提示消息。在接收到变动提示消息的情况下，终端浏览器可以根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作，从而做到热模块及时更新。例如，若变动的源代码文件是JS脚本文件，终端浏览器可以重新加载JS脚本文件。又例如，若变动的源代码文件是CSS文件，终端浏览器可以更新CSS文件的标签。

从图6中可以看出，与图5对应的实施例相比，本实施例中的网站前端开发方法的流程600增加了热模块更新的步骤。由此，本实施例描述的方案通过创建全双工通信协议建立终端浏览器与服务端的通信。服务端可以监听终端浏览器本地存储的源代码文件的变动。若有文件变动，服务端可以向终端浏览器发送变动提示消息，以使终端浏览器根据变动的源代码文件的文件类型，对变动的源代码文件进行不同的更新操作，从而做到热模块及时更新。

进一步参考图7，其示出了网站前端开发的业务流程图。

首先，开发者可以将项目入口main.js发送给终端浏览器。

之后，终端浏览器可以请求服务端资源。

而后，服务端Node.js可以解析浏览器请求，分解与整合源代码中的文件。

然后，返回由服务端处理的结果。

最后，浏览器渲染结果。

下面参考图8，其示出了适于用来实现本申请实施例的计算机设备的计算机***800的结构示意图。图8示出的计算机设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

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

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

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

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

可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码，所述程序设计语言包括面向目标的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或电子设备上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

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

描述于本申请实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括接收模块、解析模块和第一发送模块。其中，这些模块的名称在种情况下并不构成对该模块本身的限定，例如，接收模块还可以被描述为“接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求的模块”。又例如，可以描述为：一种处理器包括加载模块、解析模块、发送模块、接收模块和渲染模块。其中，这些模块的名称在种情况下并不构成对该模块本身的限定，例如，加载模块还可以被描述为“加载网站项目的目标源代码文件的模块”。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的计算机设备中所包含的；也可以是单独存在，而未装配入该计算机设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该计算机设备执行时，使得该计算机设备：接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求；解析资源请求，得到处理结果；将处理结果发送给终端浏览器。或者使得该计算机设备：加载网站项目的目标源代码文件；对目标源代码文件进行解析，得到解析结果；基于解析结果，向服务端发送资源请求；接收服务端基于资源请求返回的处理结果；对处理结果进行渲染。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (17)

1.一种网站前端开发方法，包括：

接收终端浏览器基于对网站项目的目标源代码文件的解析结果发送的资源请求；

解析所述资源请求，得到处理结果；

将所述处理结果发送给所述终端浏览器。

2.根据权利要求1所述的方法，其中，所述解析所述资源请求，得到处理结果，包括：

分解和整合所述目标源代码文件引用的文件，得到所述处理结果。

3.根据权利要求2所述的方法，其中，所述目标源代码文件是脚本文件；以及

所述分解和整合所述目标源代码文件引用的文件，得到所述处理结果，包括：

若检测到所述脚本文件中含有导入模块引用的文件，对所述导入模块引用的文件发起超文本传输协议请求，获取所述导入模块引用的文件对应模块的文件内容。

4.根据权利要求3所述的方法，其中，所述导入模块引用的文件是第三方的库；以及

所述获取所述导入模块引用的文件对应模块的文件内容，包括：

从绝对路径获取所述导入模块引用的文件对应模块的文件内容。

5.根据权利要求4所述的方法，其中，所述导入模块引用的文件是是自己开发的脚本文件；以及

所述获取所述导入模块引用的文件对应模块的文件内容，包括：

从相对路径获取所述导入模块引用的文件对应模块的文件内容。

6.根据权利要求2所述的方法，其中，所述分解和整合所述目标源代码文件引用的文件，得到所述处理结果，包括：

创建本地开发服务器并启动；

利用所述本地开发服务器读取所述目标源代码文件；

根据所述目标源代码文件的文件类型，对所述目标源代码文件进行不同的逻辑处理。

7.根据权利要求6所述的方法，其中，所述根据所述目标源代码文件的文件类型，对所述目标源代码文件进行不同的逻辑处理，包括：

若所述目标源代码文件是脚本文件或层叠样式表文件，通过重写所述目标源代码文件。

8.根据权利要求6所述的方法，其中，所述根据所述目标源代码文件的文件类型，对所述目标源代码文件进行不同的逻辑处理，包括：

若所述目标源代码文件是语法扩展文件或组件文件，解析所述目标源代码文件。

9.根据权利要求1-8中任一项所述的方法，其中，通过创建全双工通信协议建立所述终端浏览器与所述服务端的通信。

10.根据权利要求9所述的方法，其中，所述方法还包括：

响应于监听到所述终端浏览器本地存储的源代码文件的变动，向所述终端浏览器发送变动提示消息。

11.一种网站前端开发方法，包括：

加载网站项目的目标源代码文件；

对所述目标源代码文件进行解析，得到解析结果；

基于所述解析结果，向服务端发送资源请求；

接收所述服务端基于所述资源请求返回的处理结果；

对所述处理结果进行渲染。

12.根据权利要求11所述的方法，其中，所述目标源代码文件是脚本文件；以及

所述基于所述解析结果，向服务端发送资源请求，包括：

当解析到脚本标签类型为模块时，向所述服务端发送所述资源请求。

13.根据权利要求11或12所述的方法，其中，所述方法还包括：

响应于接收到所述服务端发送的本地存储的源代码文件的变动提示消息，根据变动的源代码文件的文件类型，对所述变动的源代码文件进行不同的更新操作。

14.根据权利要求13所述的方法，其中，所述根据变动的源代码文件的文件类型，对所述变动的源代码文件进行不同的更新操作，包括：

若所述变动的源代码文件是脚本文件，重新加载脚本文件。

15.根据权利要求13所述的方法，其中，所述根据变动的源代码文件的文件类型，对所述变动的源代码文件进行不同的更新操作，包括：

若所述变动的源代码文件是层叠样式表文件，更新所述层叠样式表文件的标签。

16.一种计算机设备，包括：

一个或多个处理器；

存储装置，其上存储一个或多个程序；

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

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

Images