一种Web前后端代码融合办法

摘要

本发明涉及一种Web前后端代码融合办法，解决的是编写效率低下、交接成本高的技术问题，通过采用前后端代码融合，基于事件相应的开发编译，打破现有的Web开发前后端分写代码的限制的技术方案，较好的解决了该问题，可用于Web开发中。

说明书

技术领域

本发明涉及Web前后端技术领域，具体涉及一种Web前后端代码融合办法。

背景技术

目前所有的Web开发中，均需要Web前端开发和后端开发，前后端代码分别运行于用户的浏览器环境和服务器环境上，是高度分离的，前后端的信息交换全部需要开发者手动编写基于HTTP、Websocket等网络协议的请求来完成。因为前后端代码语言基本不互通，代码逻辑高度分离。即便完成诸如注册、登录等简单操作时，也需要前后端双方对用户数据进行重复的验证，效率十分低下。前后端代码的分离，导致代码执行逻辑无法融合，并导致前后端对接的成本十分高昂。

现有的Web开发方案基本分为两大类：第一类：前后端采用不同的编程语言，如：前端语言采用JavaScript、VBScript，后端语言采用Java、PHP、Python、C#等。采用本方案的突出缺点是：前后端完全无法读懂对方的代码逻辑、双方难以对接、维护同一个功能需要两套语言的代码逻辑。针对个人开发者来说，学习两门语言的难度更高；对于公司来说，招聘掌握不同语言的程序员成本更高。第二类：前后端均采用基于JavaScript的编程语言，如：前端采用JavaScript，后端采用Node.JS(一种基于JavaScript语言的后端编程语言)。采用这类方案能缓解前后端代码相互的阅读障碍。但即使是语法相近，由于没有一套自动化的前后端信息交换方案，使得前后端代码逻辑仍然高度分离。

现有的Web开发存在编写效率低下、交接成本高、学习成本高、代码可读性差的，所有提供一种Web前后端对接简单的Web前后端代码融合办法就很有必要。

发明内容

本发明所要解决的技术问题是现有技术中存在的解决Web开发中需要前端和后端不同代码、编写效率低下、交接成本高的技术问题。提供一种新的Web前后端代码融合办法，该Web前后端代码融合办法具有编写效率高、交接成本低、学习成本低、代码可读性稿的特点。

为解决上述技术问题，采用的技术方案如下：

一种Web前后端代码融合办法，所述Web前后端代码融合办法包括：

步骤1，编译融合代码形成编译文件存入融合代码端，融合代码端接收Web前端发送的预请求，预请求包括事件名称和触发标签的ID；

步骤2，融合代码端将需要取值的对象属性和方法以数组形式返回给Web前端；

步骤3，融合代码端接收Web前端发送的正式请求，正式请求包括Web前端依据步骤2的数组逐一从Web前端HTML页面所有文档对象模型标签中匹配出的对应值；

步骤4，融合代码端依据正式请求创建各个文档对象模型对象，使用步骤3得到的对应值初始化各个文档对象模型对象；

步骤5，融合代码端执行事件处理函数，判断各个文档对象模型对象是否有变更，将有变更的文档对象模型对象的属性和对应的对象方法返回给Web前端，更新相应的对应文档对象模型，渲染更新标签，并执行对应的Web前端方法。

上述方案中，为优化，进一步地，所述编译融合代码是基于事件响应的开发编译。

进一步地，所述开发编译包括：

步骤A，读取Web前端HTML页面，对Web前端HTML页面进行文档对象模型树分析，提取出含ID属性的文档对象模型标签并读取标签类别；

步骤B，将开发者的代码转换为抽象语法树，定义Web前端发起的动作为事件；

步骤C，提取每一个事件响应函数中使用到的文档对象模型对象，并将所述文档对象模型对象的赋值属性、调用的属性、调用的函数及调用参数保存在编译文件中，其中每一个事件响应函数对应一个数组进行保存；

步骤D,根据步骤A所述Web前端HTML页面中所有被调用到的文档对象模型对象，生成对象初始化的代码写入到编译文件；

步骤E，保存一个处理类到编译文件；

步骤F，向Web前端的HTML页面中插入进行信息交换的代码；

步骤G，编写事件处理函数和逻辑代码存入编译文件。

进一步地，所述处理类包括初始化方法、事件预响应、事件响应和结果返回。

进一步地，所述进行信息交换的代码包含监听事件、触发事件处理函数、对象读取和对象赋值渲染。

进一步地，Web前端HTML中页面的文档对象模型标签是通过名为ID的对象来访问的。

本发明的有益效果：本发明通过前后端代码融合，基于事件相应的开发编译，打破现有的Web开发前后端分写代码的限制，使得完整的Web开发仅需一种语言的一套代码逻辑，由此大幅度降低Web开发的学习成本，极大提高代码编写效率，有效提升代码可读性和维护便利性。由于可以自动处理请求的发送、返回和视图的渲染，结合前后端代码融合的特性，开发者不再需要关注请求的处理，而需要关注Event的触发。

附图说明

下面结合附图和实施例对本发明进一步说明。

图1，实施例1中开发编译过程示意图。

图2，实施例1中使用时执行过程示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

实施例1

本实施例提供一种Web前后端代码融合办法，如图2，所述Web前后端代码融合办法包括：

1、用户打开网页访问前端超级文本标记语言(HTML)文件。

2、用户在浏览器触发页面中的某一事件(Event)，JavaScript代码自动将该事件名和触发标签的标识符(ID)向融合代码端发送一次预请求。

3、融合代码端接收到预请求后，融合代码端根据编译开发生成的数组进行分析、计算，将需要取值的对象属性和方法返回给前端。

4、前端JavaScript根据返回的数组，逐一从DOM标签中取得相应的值。例如：$hello->value会令JavaScript寻找ID为hello的标签并取得其内容。

5、前端JavaScript将取得的值再次向融合代码端发送一次正式请求。

6、融合代码先进行各个DOM对象的创建，再将获取到的值用来初始化各个对象。

7、融合代码执行用户编写的Event处理函数。执行结束后，执行结果返回函数，将所有存在变更的对象属性和执行到的对象方法返回给前端。

8、前端根据返回结果，自动更新相应的DOM标签，并执行相应的前端方法。

其中，开发编译过程如图1，包括：

1、读取开发者提供的网站前端超级文本标记语言即HTML页面，对其进行DOM树分析，提取出其中由用户添加的含有ID属性的DOM标签并读取其标签类别，例如文本<p>、输入框<input>、按钮<button>等。

2、读取开发者提供的前后端融合的代码。利用代码的词法分析工具，将开发者的代码转换为抽象语法树(AST)。

在Web项目中，用户功能的完成都遵从以下流程：先由前端发起特定的动作，称之为Event；再传递相应请求给后端；后端再根据请求执行相应的代码；最后将代码的执行结果返回给前端，前端根据结果渲染试图。

在本实施例中，由于可以自动处理请求的发送、返回和视图的渲染，结合前后端代码融合的特性，开发者不再需要关注请求的处理，而需要关注Event的触发。

以页面为单位，一个页面对应一个类(Class)，而类中需要包含对各个Event的响应函数以及当前页面需要使用的变量。

在代码编写过程中，可以通过名为ID的对象来访问HTML中页面的DOM标签。例如，若HTML中存在“<input id＝”hello”>”的输入框，则在PHP语言中，可以通过$hello->value获取用户输入的内容，$hello->visible取得输入框的显示状态。也可以通过给对象的属性赋值来更改相应DOM标签的属性。

3、提取每一个Event响应函数中使用到的DOM对象，并将该对象赋值、调用的属性和调用的函数和参数保存在编译文件中，每一个响应函数对应一个数组进行保存。

4、根据该页面(即对应的Class类)中所有被调用到的DOM对象，生成对象初始化的代码写入到编译文件。例如，“<input id＝”hello”>”对应一个input对象，input类拥有value(输入框的值)、visible(是否可见)、type(输入数据的类型)等属性，则在编译文件的初始化函数中会有如下语句$hello＝new Input()；来初始化这个对象。

5、向编译文件中保存一个用于自动处理请求、返回结果的类。该类包含四个核心方法：初始化、Event预响应、Event响应和结果返回。

6、向网站前端的HTML中插入一段用于与融合代码进行信息交换的JavaScript代码。该JavaScript代码包含四个核心方法：监听Event、触发Event处理函数、对象读取和对象赋值渲染。

7、将用户编写的Event处理函数和逻辑代码存入编译文件。

本实施例通过前后端代码融合，基于事件相应的开发编译，打破现有的Web开发前后端分写代码的限制，使得完整的Web开发仅需一种语言的一套代码逻辑，由此大幅度降低Web开发的学习成本，极大提高代码编写效率，有效提升代码可读性和维护便利性。

尽管上面对本发明说明性的具体实施方式进行了描述，以便于本技术领域的技术人员能够理解本发明，但是本发明不仅限于具体实施方式的范围，对本技术领域的普通技术人员而言，只要各种变化只要在所附的权利要求限定和确定的本发明精神和范围内，一切利用本发明构思的发明创造均在保护之列。