CN107632826B - 一种源代码的编译方法和客户端 - Google Patents

Abstract

本发明公开了一种源代码的编译方法和客户端，用于实现客户端和服务器之间的代码同构，只需要编写一套源代码即可分别实现客户端和服务器两端的页面开发，提高页面开发效率，降低页面维护成本。本发明实施例提供一种源代码的编译方法，包括：客户端获取本地前端的源代码文件；所述客户端将所述源代码文件打包压缩为网页编程语言格式的页面文件；所述客户端将所述网页编程语言格式的页面文件编译转换成服务器端直出模板。

Description

一种源代码的编译方法和客户端

技术领域

本发明涉及计算机技术领域，尤其涉及一种源代码的编译方法和客户端。

背景技术

在移动端的编程开发中，页面开发通常可涉及两种实现方式：一种是AJAX(英文名称：Asynchronous Javascript and XML)的页面开发方式，另一种是数据与页面通过服务器直出的方式。即页面开发在拉取数据时有客户端作为前端异步拉取数据和服务器作为后台直出拉取数据这两种方式。服务器后台直出拉取数据方式往往能减少页面的首屏时间，带来更快的页面加载速率和更好的用户体验。

但是前端和后台这两端的页面编写逻辑和编写方式是完全不同的，前端异步拉取数据采用的编写逻辑是：打开页面-异步加载数据-渲染页面-客户端展现最终效果，而服务端直出拉取数据采用的编写逻辑是：打开页面-服务端直接响应带有数据的页面-客户端展现的方式。前端异步数据拉取的开发方式与服务端直出拉取数据的开发方式存在显著的差异，上述两种页面开发需要使用不同的代码才能实现，因此需要有两套不同的代码来实现各自的页面开发方案，编译出前端和后端分别使用的不同代码会导致页面开发的效率很低，加重了开发任务，并且按照两套代码在进行页面维护时也需要针对前端代码和后台代码单独进行页面维护，从而提高了页面维护成本。

发明内容

本发明实施例提供了一种源代码的编译方法和客户端，用于实现客户端和服务器之间的代码同构，只需要编写一套源代码即可分别实现客户端和服务器两端的页面开发，提高页面开发效率，降低页面维护成本。

为解决上述技术问题，本发明实施例提供以下技术方案：

第一方面，本发明实施例提供一种源代码的编译方法，包括：

客户端获取本地前端的源代码文件；

所述客户端将所述源代码文件打包压缩为网页编程语言格式的页面文件；

所述客户端将所述网页编程语言格式的页面文件编译转换成服务器端直出模板。

第二方面，本发明实施例还提供一种客户端，包括：

源代码获取模块，用于客户端获取本地前端的源代码文件；

打包压缩模块，用于将所述源代码文件打包压缩为网页编程语言格式的页面文件；

编译转换模块，用于将所述网页编程语言格式的页面文件编译转换成服务器端直出模板。

从以上技术方案可以看出，本发明实施例具有以下优点：

在本发明实施例中，首先客户端获取本地前端的源代码文件，然后客户端将源代码文件打包压缩为网页编程语言格式的页面文件，最后客户端将网页编程语言格式的页面文件编译转换成服务器端直出模板。本发明实施例中本地前端只需要编写出一套源代码文件即可，通过对源代码文件的打包压缩可以得到网页编程语言格式的页面文件，再通过对网页编程语言格式的页面文件进行编译转换，就可以得到服务器端直出模板，从而避免服务器端再重新编写源代码，使得服务器可以使用服务器端直出模板完成页面直出。本发明实施例中服务器端和客户端本地可以使用同构的代码，不需要针对前端和后台编写两套代码，只需要编写一套源代码即可分别实现客户端和服务器两端的页面开发，提高页面开发效率，在需要进行页面维护时，只需要修改本地前端的源代码文件即可，因此可以降低页面维护成本。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的技术人员来讲，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种源代码的编译方法的流程方框示意图；

图2为本发明实施例提供的源代码的编译方法的一种应用场景示意图；

图3-a为本发明实施例提供的一种客户端的组成结构示意图；

图3-b为本发明实施例提供的一种编译转换模块的组成结构示意图；

图3-c为本发明实施例提供的另一种编译转换模块的组成结构示意图；

图3-d为本发明实施例提供的另一种客户端的组成结构示意图；

图4为本发明实施例提供的源代码的编译方法应用于终端的组成结构示意图。

具体实施方式

本发明实施例提供了一种源代码的编译方法和客户端，用于实现客户端和服务器之间的代码同构，只需要编写一套源代码即可分别实现客户端和服务器两端的页面开发，提高页面开发效率，降低页面维护成本。

为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部实施例。基于本发明中的实施例，本领域的技术人员所获得的所有其他实施例，都属于本发明保护的范围。

本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，以便包含一系列单元的过程、方法、系统、产品或设备不必限于那些单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它单元。

客户端和服务器端在页面开发时采用的页面编写逻辑和编写方式是不同的。客户端作为前端是指在客户端上开发的一端，前端的源代码会影响到浏览器或者其他的网页客户端，服务器端直出页面往往能减少页面的首屏时间，带来更快的页面加载和用户体验。通常情况下，前端数据拉取的开发方式与服务端直出页面有许多地方是存在着差异，往往需要有两套代码来实现不同方案。其中，服务端的直出可以指的是服务器将数据直接渲染到模板中并输出给客户端，即服务器直接将带有数据的模板发送给客户端的浏览器，从而客户端可以打开网页即能一次性看到页面内容。本发明实施例中，可以通过构建实现一套源代码，编译出前端和后端直出都可用的源代码，从而有效的减少开发任务，提高页面开发效率以及减少页面维护成本。

在目前的同构代码开发中，有一种react的实现方案，其通过一种新型的视图(英文名称：view)层的扩展JavaScript编写方式和所拥有的虚拟文档对象模型(英文全称：Document Object Model，英文简称：DOM)方式，这两大特点的组合使得react方案具有强大的自上而下的页面渲染能力。但在实际应用中，react的实现方案仍存在着许多问题：1、开发文档较难和学习曲线较抖，开发人员需较高的学习成本才能投入生产。2、react的源码库很大，大约占140多千字节，即使压缩后也需要35千字节，而这种react的方案占用空间过大，不适合移动客户端开发页面使用。3、react设计目标就是来规范一个view层，许多地方需要依赖其他的库和工具才能实现连贯的开发，例如数据流处理库redux和打包工具webpack等，另外react的编译需要较长的时间。基于上述存在的问题，本发明实施例中提供一种源代码的编译方法，对客户端的前端几乎是透明的，能够通过前端的页面开发技术实现前端和后台两端同构代码的效果，并且本发明实施例中不依赖大型的代码库，只需要使用很小的框架代码就可以完成服务器端的页面直出，经过实测，本发明的一些实施例中，采用依赖Qjs的MVVM(英文全称：Model-View-ViewModel)代码库也只有7千字节，这对于移动客户端来说占用的存储空间很小。

接下来对本发明实施例提供的源代码的编译方法进行详细说明。请参阅图1所示，本发明一个实施例提供的源代码的编译方法，可以包括如下步骤：

101、客户端获取本地前端的源代码文件。

在本发明实施例中，本地前端已经编写有供客户端侧进行页面开发的源代码文件。本发明实施例中客户端可以通过对该源代码文件的编译，使得服务器端可以直接使用编译完成的源代码文件进行页面直出。具体的，客户端首先从本地前端读取到源代码文件。该源代码文件包括有在前端拉取页面数据时所需要的页面逻辑代码。

在本发明的一些实施例中，源代码文件可以包括：样式文件、页面模板内容文件和逻辑操作代码文件。其中，逻辑操作代码文件具体可以为直译式脚本语言数据文件，例如可以是JavaScript(英文简称:JS)语言数据，还可以是C Shell语言数据、VBScript语言数据等，此处不做限定。样式文件用来表现页面的文件样式，具体可以有多种实现方式，例如样式文件具体可以为层叠样式表(英文全称：Cascading Style Sheets，英文简称：CSS)。页面模板内容文件记录有在页面需要显示的内容，该页面模板内容文件可以以打包压缩在源代码文件中。需要说明的是，在实际应用中，本地前端编写好的源代码文件可以不局限于上述举例说明，可以根据具体应用场中需要开发的页面来配置源代码文件的具体内容，举例说明如下，本地前端的源代码文件可以包括：img、inline、lego_modules、lib、modules、pages、agencyIntro.html等文件。

在本发明的一些实施例中，步骤101客户端获取本地前端编写完成的源代码文件，具体可以包括如下步骤：

A1、客户端采用MVVM框架编写本地前端的页面逻辑代码，得到本地前端的源代码文件。

其中，客户端采用的MVVM框架可以有多种实现方式。例如VUE、QJS等MVVM框架，通过MVVM框架编写出的页面逻辑代码的具体内容取决于页面的具体编写逻辑和编写方式，此处不做限定。

102、客户端将源代码文件打包压缩为网页编程语言格式的页面文件。

在本发明实施例中，客户端获取到本地前端的源代码文件之后，可以将源代码文件打包压缩，得到网页编程语言格式的页面文件。其中页面文件采用网页编程语言格式，该网页编程语言格式可以是网页静态页面，例如超级文本标记语言(英文全称：HyperTextMarkup Language，英文简称：HTML)，也可以是可扩展超文本标记语言(英文全称：Extensible HyperText Markup Language，英文简称：XHTML)等。在本发明的实际应用中，可以采用多种方式来完成对源代码文件的打包压缩，举例说明如下，采用如下的构建工具对源代码文件进行打包压缩得到页面文件，该构建工具可以是fis构建工具，也可以是grunt、gulp以及webpack等构建工具，具体实现方式不做限定。

在本发明的一些实施例中，步骤102客户端将源代码文件打包压缩为网页编程语言格式的页面文件，具体可以包括如下步骤：

B1、客户端将源代码文件打包压缩为AJAX上线版本的HTML页面文件。

其中，客户端在对源代码文件进行打包压缩时可以按照AJAX上线版本进行压缩，即采用异步的页面开发方式将源代码文件打包压缩为HTML页面文件，流入可以通过fis3dist代码运行完成打包压缩。

103、客户端将网页编程语言格式的页面文件编译转换成服务器端直出模板。

在发明实施例中，客户端在获取到网页编程语言格式的页面文件之后，客户端对该网页编程语言格式的页面文件进行编译转换，从而可以生成服务器端直出模板，该服务器端直出模板可以用于服务器侧进行页面直出。在实际应用中，客户端可以对网页编程语言格式的页面文件进行文件内容解析，将页面文件的文件内容按照定义的规则转换成通用的逻辑，完成上述转换后可以得到服务器端直出模板。本发明实施例中，客户端编译转换得到的服务器端直出模板可以用于服务器直接发送带有数据的模板给客户端的浏览器，从而客户端可以打开网页即能一次性看到页面内容。其中，服务器的直出可以指的是服务器将数据直接渲染到模板中并输出给客户端。举例说明，客户端可以使用编译插件工具来对网页编程语言格式的页面文件进行解析，从而完成对页面文件的编译转换。

在本发明的一些实施例中，步骤103客户端将网页编程语言格式的页面文件编译转换成服务器端直出模板，具体可以包括如下步骤：

C1、客户端将网页编程语言格式的页面文件中的文本标题标签转换为直译式脚本语言数据，并将网页编程语言格式的页面文件中的框架指令转换为名称字段；

C2、客户端根据直译式脚本语言数据和名称字段生成服务器端直出模板，并为服务器端直出模板配置模板直出标志和使用服务器端直出模板的基础方法。

其中，客户端首先对网页编程语言格式的页面文件中的文本标题标签转换为直译式脚本语言数据，例如可以将HTML页面文件中的H1标签转换为JavaScript语言数据，另外文本标题标签可以不局限于H1标签，只要在页面文件中对文字标题起强调作用的标签都可以转换为直译式脚本语言数据。另外，在网页编程语言格式的页面文件中还包括有不同实现框架配置的框架指令，将该框架指令转换为名称(英文名称：name)字段。该客户端根据直译式脚本语言数据和名称字段可以生成服务器端直出模板，例如可以生成的服务器端直出模板为lodash模板，或者handlebars模板，或者juicer模板等，具体实现方式不做限定。在本发明实施例中生成服务器端直出模板时，还可以为该模板设置模板直出标志，在服务器端进行页面直出时通过该直出标识可以使用对应的服务器端直出模板。另外，本发明的上述实施例中还可以配置使用服务器端直出模板的基础方法。举例说明，每个服务器端直出模板会提供两个基础方法：1、filterValue，设置每个组成部分(英文名称：component)的过滤函数的相应分发和调用。2、getData：component的数据获取器getter函数。

进一步的，在本发明的一些实施例中，步骤C1客户端根据直译式脚本语言数据和名称字段生成服务器端直出模板之前，本发明实施例提供的步骤103还可以包括如下步骤：

D1、客户端从网页编程语言格式的页面文件中获取到过滤(英文名称：filter)函数；

D2、客户端将filter函数赋值到filter函数对应的作用域。

其中，若在页面文件中还配置有filter函数，则可以将该filter函数从页面文件中抽离掉，将filter函数赋值到filter函数对应的作用域，该作用域由filter函数需要作用到的位置和作用范围来确定。例如，通过filter函数针对不同业务在不同的作用域内需要进行额外的数据加工或者数据替换等操作。

在本发明的一些实施例中，步骤103客户端将网页编程语言格式的页面文件编译转换成服务器端直出模板之后，本发明实施例提供的源代码的编译方法还包括如下步骤：

E1、客户端将服务器端直出模板发送给服务器。

其中，客户端将网页编程语言格式的页面文件编译转换成服务器端直出模板，客户端和服务器之间建立有通信连接，则客户端可以向服务器发送服务器端直出模板，服务器端不需要重新编写源代码，直接使用该服务器端直出模板就可以完成页面直出。

通过以上实施例对本发明实施例的描述可知，首先客户端获取本地前端的源代码文件，然后客户端将源代码文件打包压缩为网页编程语言格式的页面文件，最后客户端将网页编程语言格式的页面文件编译转换成服务器端直出模板。本发明实施例中本地前端只需要编写出一套源代码文件即可，通过对源代码文件的打包压缩可以得到网页编程语言格式的页面文件，再通过对网页编程语言格式的页面文件进行编译转换，就可以得到服务器端直出模板，从而避免服务器端再重新编写源代码，使得服务器可以使用服务器端直出模板完成页面直出。本发明实施例中服务器端和客户端本地可以使用同构的代码，不需要针对前端和后台编写两套代码，只需要编写一套源代码即可分别实现客户端和服务器两端的页面开发，提高页面开发效率，在需要进行页面维护时，只需要修改本地前端的源代码文件即可，因此可以降低页面维护成本。

为便于更好的理解和实施本发明实施例的上述方案，下面举例相应的应用场景来进行具体说明。

请参阅图2所示，为本发明实施例提供的源代码的编译方法的一种应用场景示意图。主要可包括如下步骤：

S01、客户端本地拥有项目的源代码文件，标记为src文件夹，在源代码文件中包括有页面JS、页面HTML内容、页面CSS。例如，前端页面可以使用Qjs mvvm框架编写页面的逻辑代码。

S02、接下来通过运行fis3dist插件工具将源代码文件打包成一个前端运行的HTML页面文件。使用插件工具将页面文件打包压缩成异步ajax上线版本的页面html文件。这里的插件文件可以是将源代码进行分析页面依赖，然后进行打包压缩文件内容等的开发工具。

S03、将HTML页面文件编译转换为服务器端直出模板。例如可以使用腾讯开发的d-tpl插件工具，通过解析页面文件内容，将页面文件内容按照定义的规则转换成通用的逻辑，例如将打包的前端页面文件转换成服务器端直出模板，最终生成的服务器端直出模板可以如下。

打包压缩得到的HTML页面文件如下：agencyIntro.html

<section class＝"f-com abanner component-2"q-show＝"show"q-cname＝"aba nner"id＝"banner"><img class＝"abanner_pic"width＝"100％"q-attr＝"src:url"></section>

将HTML页面文件编译转换成的服务器端直出模板如下：

需要说明的是，在上述得到的服务器端直出模板中，举例说明，可以将agencyIntro.html中的页面html文件内容，转换成服务器端直出模板中的javascript文件内容，例如，在上述模板中的abanner则是一个对照点。

例如，在步骤S03中，可以将异步ajax上线版本的页面文件转成node直出上线版本的服务器端直出模板。举例说明如下：

首先，异步AJAX版本转换成直出版本js文件的规则如下，原页面的mvvm指令(英文名称：directive)转换为相应js数据拼接。例如下面的转换，将h1标签这个html文件内容换成javascript模板，将文本标标题标签例如q-text的指令，转换成相应的name字段的数据拼接。例如可以通过如下方式完成编译转换。

<h1class＝"aheader_name"q-text＝"name"></h1>

//translated

'<h1class＝"aheader_name"q-text＝"name">'+

_e(_filterValue(_obj,{

"arg":null,

"name":"name",

"filters":[]},

"aheader"))+

'</h1>'

然后，将页面数据中的filter函数抽离，例如，该filter函数可以实现数据格式化或者其余逻辑操作，并将filter赋值到相应作用域上。这一部分需要分析每个directive涉及到的过滤函数，并把其抽离起来放在filterFuns中，在需要调用地方设置起filters属性，如下方式完成过滤函数的映射。

//translated

'<h1class＝"aheader_name"q-text＝"name">'+

_e(_filterValue(_obj,{

"arg":null,

"name":"name",

"filters":[_filterFuns.replaceName]},

"aheader"))+

'</h1>'

最后，可以为服务器端直出模板设置直出模板标志并为该模板提供一些基础方法。例如，可以在模板的头部设置alpca＝1表示是直出。并且每个直出模板会提供两个基础方法：1、filterValue，设置每个component的过滤filter函数的相应分发和调用。2、getData：component的数据获取器getter函数。

接下来对本发明实施例服务器端实现的页面直出进行说明。以辅导机构的介绍页面使用本发明实施例实现为例进行如下效果说明，通过右键点击查看网页的源代码，可以看到网页的源代码中直接带有页面数据，这证明数据和模板是一起输出到浏览器客户端的。其直出页面的源代码的效果展示如下：

<section class＝"f-com aroad component-4"q-show＝"show"q-cname＝"aroad"id＝"road"style＝"display:block；"><h2class＝"u-title">

&#x53D1；&#x5C55；&#x5386；&#x7A0B；</h2><ul class＝"aroad_list"><liclass＝"aroad_list-item"><p class＝"aroad_time"q-text＝"date">2016年5月</p><pclass＝"aroad_intro"

q-text＝"introduce">云中帆启用《云艺帆》为教育品牌。云意为天空、网络；艺意为艺术、技艺；帆意为自由、一帆风顺。云艺帆教育</p></li><li class＝"aroad_list-item"><p class＝"aroad_time"q-text＝"date">2015年12月</p><p class＝"aroad_intro"q-text＝"introduce">2014年属于腾讯课堂第一梯队机构，2015年VIP学员人数突破十万人；荣获2015年腾讯课堂年度金课堂奖！</p></li><li class＝"aroad_list-item"><p class＝"aroad_time"

q-text＝"date">2013年5月</p><p class＝"aroad_intro"q-text＝"introduce">2013年获得国际建筑装饰室内设计协会、国信息化教育认证中心授权。可在云中帆考取各类职业及设计师相关证书</p></li><li class＝"aroad_list-item"><pclass＝"aroad_time"q-text＝"date">2012年9月</p><p class＝"aroad_intro"q-text＝"introduce">成立云中帆绘图有限公司、同年创办云中帆网络传媒科技有限公司。2013年云中帆网络教程学员达到上万人。</p></li><li class＝"aroad_list-item"><p class＝"aroad_time"

q-text＝"date">2003年3月</p><p class＝"aroad_intro"q-text＝"introduce">云中帆从事成立线下职业技能培训机构，开设置专业：平面设计、商务文秘、机械模具设计、室内设计等。</p></li></ul></section>

从上述模板中可以看出，服务器端数据和页面是一起返回到浏览器，减少数据的拉取，提高页面加载速度。通过nodejs服务端拉取页面数据，然后导入模版中渲染整个页面，并输出带有数据的页面。本发明实施例中客户端前端和服务器后台使用的代码同构，即客户端前端和服务器后台使用一套源代码，能够同时运行于客户端和服务器。因此只需编写一次源代码，即能适用于服务端的页面直出的方式和客户端的异步加载逻辑的方式。

本发明实施例提供的方案使开发人员能够在花费开发一套代码的时间和精力下，较低成本的通过本发明实施例获取前端和服务端直出运行的相应代码，减少开发人员开发时间和精力的投入。于此同时也降低了node直出的门槛和开发难度，让更多数据强依赖或者加载缓慢的页面能够通过转换为node直出版本来进一步提速。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

为便于更好的实施本发明实施例的上述方案，下面还提供用于实施上述方案的相关装置。

请参阅图3-a所示，本发明实施例提供的一种客户端300，可以包括：源代码获取模块301、打包压缩模块302和编译转换模块303，其中，

源代码获取模块301，用于客户端获取本地前端的源代码文件；

打包压缩模块302，用于将所述源代码文件打包压缩为网页编程语言格式的页面文件；

编译转换模块303，用于将所述网页编程语言格式的页面文件编译转换成服务器端直出模板。

在本发明的一些实施例中，所述打包压缩模块302，具体用于将所述源代码文件打包压缩为AJAX上线版本的超文本标记语言HTML页面文件。

在本发明的一些实施例中，请参阅图3-b所示，所述编译转换模块303，包括：

转换模块3031，用于将所述网页编程语言格式的页面文件中的文本标题标签转换为直译式脚本语言数据，并将所述网页编程语言格式的页面文件中的框架指令转换为名称字段；

模板配置模块3032，用于根据所述直译式脚本语言数据和所述名称字段生成服务器端直出模板，并为所述服务器端直出模板配置模板直出标志和使用所述服务器端直出模板的基础方法。

在本发明的一些实施例中，请参阅图3-c所示，相对于图3-b所示，所述编译转换模块303，还包括：过滤处理模块3033，其中，

所述过滤处理模块3033，用于所述模板配置模块3032根据所述直译式脚本语言数据和所述名称字段生成服务器端直出模板之前，从所述网页编程语言格式的页面文件中获取到过滤filter函数；将所述filter函数赋值到所述filter函数对应的作用域。

在本发明的一些实施例中，请参阅图3-d所示，相对于图3-a所示，所述客户端300还包括：发送模块304，其中，

所述发送模块304，用于所述编译转换模块303将所述网页编程语言格式的页面文件编译转换成服务器端直出模板之后，将所述服务器端直出模板发送给服务器。

在本发明的一些实施例中，所述源代码文件包括：样式文件、页面模板内容文件和逻辑操作代码文件。

通过以上对本发明实施例的描述可知，首先客户端获取本地前端的源代码文件，然后客户端将源代码文件打包压缩为网页编程语言格式的页面文件，最后客户端将网页编程语言格式的页面文件编译转换成服务器端直出模板。本发明实施例中本地前端只需要编写出一套源代码文件即可，通过对源代码文件的打包压缩可以得到网页编程语言格式的页面文件，再通过对网页编程语言格式的页面文件进行编译转换，就可以得到服务器端直出模板，从而避免服务器端再重新编写源代码，使得服务器可以使用服务器端直出模板完成页面直出。本发明实施例中服务器端和客户端本地可以使用同构的代码，不需要针对前端和后台编写两套代码，只需要编写一套源代码即可分别实现客户端和服务器两端的页面开发，提高页面开发效率，在需要进行页面维护时，只需要修改本地前端的源代码文件即可，因此可以降低页面维护成本。

本发明实施例还提供了另一种终端，如图4所示，为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照本发明实施例方法部分。该终端可以为包括手机、平板电脑、PDA(Personal Digital Assistant，个人数字助理)、POS(Point ofSales，销售终端)、车载电脑等任意终端设备，以终端为手机为例：

图4示出的是与本发明实施例提供的终端相关的手机的部分结构的框图。参考图4，手机包括：射频(Radio Frequency，RF)电路1010、存储器1020、输入单元1030、显示单元1040、传感器1050、音频电路1060、无线保真(wireless fidelity，WiFi)模块1070、处理器1080、以及电源1090等部件。本领域技术人员可以理解，图4中示出的手机结构并不构成对手机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图4对手机的各个构成部件进行具体的介绍：

RF电路1010可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器1080处理；另外，将设计上行的数据发送给基站。通常，RF电路1010包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(Low NoiseAmplifier，LNA)、双工器等。此外，RF电路1010还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(GlobalSystem of Mobile communication，GSM)、通用分组无线服务(General Packet RadioService，GPRS)、码分多址(Code Division Multiple Access，CDMA)、宽带码分多址(Wideband Code Division Multiple Access,WCDMA)、长期演进(Long Term Evolution，LTE)、电子邮件、短消息服务(Short Messaging Service，SMS)等。

存储器1020可用于存储软件程序以及模块，处理器1080通过运行存储在存储器1020的软件程序以及模块，从而执行手机的各种功能应用以及数据处理。存储器1020可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器1020可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元1030可用于接收输入的数字或字符信息，以及产生与手机的用户设置以及功能控制有关的键信号输入。具体地，输入单元1030可包括触控面板1031以及其他输入设备1032。触控面板1031，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板1031上或在触控面板1031附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板1031可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器1080，并能接收处理器1080发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板1031。除了触控面板1031，输入单元1030还可以包括其他输入设备1032。具体地，其他输入设备1032可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元1040可用于显示由用户输入的信息或提供给用户的信息以及手机的各种菜单。显示单元1040可包括显示面板1041，可选的，可以采用液晶显示器(LiquidCrystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板1041。进一步的，触控面板1031可覆盖显示面板1041，当触控面板1031检测到在其上或附近的触摸操作后，传送给处理器1080以确定触摸事件的类型，随后处理器1080根据触摸事件的类型在显示面板1041上提供相应的视觉输出。虽然在图4中，触控面板1031与显示面板1041是作为两个独立的部件来实现手机的输入和输入功能，但是在某些实施例中，可以将触控面板1031与显示面板1041集成而实现手机的输入和输出功能。

手机还可包括至少一种传感器1050，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板1041的亮度，接近传感器可在手机移动到耳边时，关闭显示面板1041和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于手机还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路1060、扬声器1061，传声器1062可提供用户与手机之间的音频接口。音频电路1060可将接收到的音频数据转换后的电信号，传输到扬声器1061，由扬声器1061转换为声音信号输出；另一方面，传声器1062将收集的声音信号转换为电信号，由音频电路1060接收后转换为音频数据，再将音频数据输出处理器1080处理后，经RF电路1010以发送给比如另一手机，或者将音频数据输出至存储器1020以便进一步处理。

WiFi属于短距离无线传输技术，手机通过WiFi模块1070可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图4示出了WiFi模块1070，但是可以理解的是，其并不属于手机的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器1080是手机的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器1020内的软件程序和/或模块，以及调用存储在存储器1020内的数据，执行手机的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器1080可包括一个或多个处理单元；优选的，处理器1080可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1080中。

手机还包括给各个部件供电的电源1090(比如电池)，优选的，电源可以通过电源管理系统与处理器1080逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，手机还可以包括摄像头、蓝牙模块等，在此不再赘述。

在本发明实施例中，该终端所包括的处理器1080还具有控制执行以上由终端执行的源代码的编译方法流程。

另外需说明的是，以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。另外，本发明提供的装置实施例附图中，模块之间的连接关系表示它们之间具有通信连接，具体可以实现为一条或多条通信总线或信号线。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件的方式来实现，当然也可以通过专用硬件包括专用集成电路、专用CPU、专用存储器、专用元器件等来实现。一般情况下，凡由计算机程序完成的功能都可以很容易地用相应的硬件来实现，而且，用来实现同一功能的具体硬件结构也可以是多种多样的，例如模拟电路、数字电路或专用电路等。但是，对本发明而言更多情况下软件程序实现是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在可读取的存储介质中，如计算机的软盘，U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

综上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照上述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对上述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (8)

1.一种源代码的编译方法，其特征在于，包括：

客户端获取本地前端通过所述前端的页面开发技术已编写好的供所述客户端侧进行页面开发的源代码文件，所述源代码文件包括有在所述前端拉取页面数据时所需的页面逻辑代码，所述页面逻辑代码使用Qjs mvvm框架编写，所述源代码文件包括样式文件、页面模板内容文件和逻辑操作代码文件；

所述客户端将所述源代码文件打包压缩为网页编程语言格式的页面文件，所述网页编程语言格式是网页静态页面；

所述客户端对所述网页编程语言格式的页面文件进行文件内容解析，将所述页面文件的文件内容按照定义的规则转换成通用的逻辑得到服务器端直出模板，所述服务器端直出模版用于所述服务器端进行页面直出，所述页面直出指示所述服务器将数据直接渲染到所述服务器端直出模版中并输出给所述客户端；

所述客户端将所述服务器端直出模板发送给服务器；

所述客户端打开网页，接收所述服务器发送的带有数据的所述服务器端直出模板，一次性显示所述网页的网页内容。

2.根据权利要求1所述的方法，其特征在于，所述客户端将所述源代码文件打包压缩为网页编程语言格式的页面文件，包括：

所述客户端将所述源代码文件打包压缩为AJAX上线版本的超文本标记语言HTML页面文件。

3.根据权利要求1所述的方法，其特征在于，所述客户端对所述网页编程语言格式的页面文件进行文件内容解析，将所述页面文件的文件内容按照定义的规则转换成通用的逻辑得到服务器端直出模板，包括：

所述客户端将所述网页编程语言格式的页面文件中的文本标题标签转换为直译式脚本语言数据，并将所述网页编程语言格式的页面文件中的框架指令转换为名称字段；

所述客户端根据所述直译式脚本语言数据和所述名称字段生成服务器端直出模板，并为所述服务器端直出模板配置模板直出标志和使用所述服务器端直出模板的基础方法。

4.根据权利要求3所述的方法，其特征在于，所述客户端根据所述直译式脚本语言数据和所述名称字段生成服务器端直出模板之前，所述方法还包括：

所述客户端从所述网页编程语言格式的页面文件中获取到过滤filter函数；

所述客户端将所述filter函数赋值到所述filter函数对应的作用域。

5.一种客户端，其特征在于，包括：

源代码获取模块，用于客户端获取本地前端通过所述前端的页面开发技术已编写好的供所述客户端侧进行页面开发的源代码文件，所述源代码文件包括有在所述前端拉取页面数据时所需的页面逻辑代码，所述页面逻辑代码使用Qjs mvvm框架编写，所述源代码文件包括样式文件、页面模板内容文件和逻辑操作代码文件；

打包压缩模块，用于将所述源代码文件打包压缩为网页编程语言格式的页面文件，所述网页编程语言格式是网页静态页面；

编译转换模块，用于对所述网页编程语言格式的页面文件进行文件内容解析，将所述页面文件的文件内容按照定义的规则转换成通用的逻辑得到服务器端直出模板，所述服务器端直出模版用于所述服务器端进行页面直出，所述页面直出指示所述服务器将数据直接渲染到所述服务器端直出模版中并输出给所述客户端；

发送模块，用于将所述服务器端直出模板发送给服务器；所述客户端打开网页，接收所述服务器发送的带有数据的所述服务器端直出模板，一次性显示所述网页的网页内容。

6.根据权利要求5所述的客户端，其特征在于，所述打包压缩模块，具体用于将所述源代码文件打包压缩为AJAX上线版本的超文本标记语言HTML页面文件。

7.根据权利要求5所述的客户端，其特征在于，所述编译转换模块，包括：

转换模块，用于将所述网页编程语言格式的页面文件中的文本标题标签转换为直译式脚本语言数据，并将所述网页编程语言格式的页面文件中的框架指令转换为名称字段；

模板配置模块，用于根据所述直译式脚本语言数据和所述名称字段生成服务器端直出模板，并为所述服务器端直出模板配置模板直出标志和使用所述服务器端直出模板的基础方法。

8.根据权利要求7所述的客户端，其特征在于，所述编译转换模块，还包括：过滤处理模块，其中，

所述过滤处理模块，用于所述模板配置模块根据所述直译式脚本语言数据和所述名称字段生成服务器端直出模板之前，从所述网页编程语言格式的页面文件中获取到过滤filter函数；将所述filter函数赋值到所述filter函数对应的作用域。

Images