CN106250128A - 用户界面的显示处理方法及装置 - Google Patents

Abstract

本发明公开了一种用户界面的显示处理方法及装置。其中，该方法包括：获取待执行的功能组件集合，其中，功能组件集合是对来自于服务端的待发布脚本文件进行模拟和打包后生成的；根据用户界面的组件结构将功能组件集合渲染至用户界面；响应用户执行的输入操作，对用户界面的显示内容进行更新。本发明解决了相关技术中所提出的H5页面的生成方式操作复杂度较高，无法实现前端与后端相分离的技术问题。

Description

用户界面的显示处理方法及装置

技术领域

本发明涉及互联网领域，具体而言，涉及一种用户界面的显示处理方法及装置。

背景技术

H5由超文本标记语言的第五次重大修改(HTML5)简化而来，其原本是一种制作网页的计算机标记语言。目前，主要是指通过移动平台(主要是指微信社交平台)来传播推广的由文字、图片、音频、视频、动画效果集于一身的页面。随着移动互联网的蓬勃发展，H5页面也渐渐的成为了营销人员用来推广、宣传的最佳选择。许多快速生成H5页面的工具也随之应运而生，并提出了“像制作PPT一样来制作绚丽的H5页面”的口号。

常见的H5页面生成系统通常使用AngularJS作为前端开发框架。AngularJS为一款MV*JavaScript框架，是由Google推出的SPA应用框架，其通过声明式的编程方式来构建用户界面，指令式编程来编写业务逻辑，采用指令(Directive)来丰富HTML，创造自定义的标签。通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。

但遗憾的是，AngularJS的学习曲线相对较陡。指令Directive入门容易，深入学习较难，定义指令的符号和函数繁多，开发人员需要耗费大量的时间学习才能够将其用于实际的工作项目中去。另外，双向数据绑定是Angular的一大特性，界面的操作能够实时反映到数据，数据的变更同样也能够实时展现到页面。不过，其为一把双刃剑，AngularJS使用一种称为“脏检查”的机制来跟踪数据变化并同步到用户界面，因此，过多的数据绑定会导致性能下降。不仅如此，还有一个问题便是：需要严格管理数据之间的绑定关系，否则容易出现项目混乱，一旦发现漏洞(bug)也会难以跟踪，不利于项目维护。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种用户界面的显示处理方法及装置，以至少解决相关技术中所提出的H5页面的生成方式操作复杂度较高，无法实现前端与后端相分离的技术问题。

根据本发明实施例的一个方面，提供了一种用户界面的显示处理方法，包括：

获取待执行的功能组件集合，其中，功能组件集合是对来自于服务端的待发布脚本文件进行模拟和打包后生成的；根据用户界面的组件结构将功能组件集合渲染至用户界面；响应用户执行的输入操作，对用户界面的显示内容进行更新。

可选地，获取功能组件集合包括：根据访问路径信息查找预设模拟数据生成器生成的模拟脚本文件，其中，访问路径信息是由预设模拟数据生成器通过拦截发送至服务端的资源请求消息配置而成的，模拟脚本文件是由预设模拟数据生成器对通过资源请求消息向服务端请求的待发布脚本文件进行模拟得到的；按照模拟脚本文件之间的依赖关系对模拟脚本文件进行打包处理，生成功能组件集合。

可选地，按照模拟脚本文件之间的依赖关系对模拟脚本文件进行打包处理，生成功能组件集合包括：选取步骤：通过预先配置的模拟脚本文件的后缀名类型与脚本加载器类型的对应关系，选取待使用的脚本加载器；获取步骤：采用脚本加载器从访问路径信息获取任一模拟脚本文件对应的脚本加载器，并递归查找与该模拟脚本文件存在依赖关系的全部模拟脚本文件；通过脚本加载器对存在依赖关系的对应部分模拟脚本文件进行打包，生成对应的功能组件，返回执行选取步骤，直至对模拟脚本文件打包完毕。

可选地，响应用户执行的输入操作，对显示内容进行更新包括：根据输入操作确定待执行的动作以及在执行动作的前一时刻对应的功能组件的第一状态；通过动作和第一状态确定待更新的第二状态；按照第二状态对用户界面对应的文档对象模型进行更新。

可选地，根据输入操作确定动作包括：在预设时长内记录输入操作的操作轨迹；当预设时长达到时，将操作轨迹中最后执行的操作确定为动作。

可选地，上述方法用于生成超文本标记语言(HTML)5页面。

根据本发明实施例的另一方面，还提供了一种用户界面的显示处理装置，包括：

获取模块，用于获取待执行的功能组件集合，其中，功能组件集合是对来自于服务端的待发布脚本文件进行模拟和打包后生成的；渲染模块，用于根据用户界面的组件结构将功能组件集合渲染至用户界面；更新模块，用于响应用户执行的输入操作，对用户界面的显示内容进行更新。

可选地，获取模块包括：查找单元，用于根据访问路径信息查找预设模拟数据生成器生成的模拟脚本文件，其中，访问路径信息是由预设模拟数据生成器通过拦截发送至服务端的资源请求消息配置而成的，模拟脚本文件是由预设模拟数据生成器对通过资源请求消息向服务端请求的待发布脚本文件进行模拟得到的；处理单元，用于按照模拟脚本文件之间的依赖关系对模拟脚本文件进行打包处理，生成功能组件集合。

可选地，处理单元包括：选取子单元，用于通过预先配置的模拟脚本文件的后缀名类型与脚本加载器类型的对应关系，选取待使用的脚本加载器；获取子单元，用于采用脚本加载器从访问路径信息获取任一模拟脚本文件对应的脚本加载器，并递归查找与该模拟脚本文件存在依赖关系的全部模拟脚本文件；处理子单元，用于通过脚本加载器对存在依赖关系的对应部分模拟脚本文件进行打包，生成对应的功能组件。

可选地，更新模块包括：第一确定单元，用于根据输入操作确定待执行的动作以及在执行动作的前一时刻对应的功能组件的第一状态；第二确定单元，用于通过动作和第一状态确定待更新的第二状态；更新单元，用于按照第二状态对用户界面对应的文档对象模型进行更新。

可选地，第一确定单元，用于在预设时长内记录输入操作的操作轨迹，并在预设时长达到时，将操作轨迹中最后执行的操作确定为动作。

在本发明实施例中，采用获取待执行的功能组件集合；根据用户界面的组件结构将功能组件集合渲染至用户界面；响应用户执行的输入操作，对用户界面的显示内容进行更新的方式，通过对来自于服务端的待发布脚本文件进行模拟和打包后生成功能组件集合的方式，达到了前端开发不依赖于后端的目的，从而实现了降低操作复杂度、提高开发效率的技术效果，进而解决了相关技术中所提出的H5页面的生成方式操作复杂度较高，无法实现前端与后端相分离的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的用户界面的显示处理方法的流程图；

图2是根据本发明实施例的用户界面的显示处理装置的结构框图；

图3是根据本发明优选实施例的用户界面的显示处理装置的结构框图。

具体实施方式

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

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

根据本发明实施例，提供了一种用户界面的显示处理方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的用户界面的显示处理方法的流程图，如图1所示，该方法包括如下步骤：

步骤S12，获取待执行的功能组件集合，其中，功能组件集合是对来自于服务端的待发布脚本文件进行模拟和打包后生成的；

步骤S14，根据用户界面的组件结构将功能组件集合渲染至用户界面；

步骤S16，响应用户执行的输入操作，对用户界面的显示内容进行更新。

采用上述步骤，通过对来自于服务端的待发布脚本文件进行模拟和打包后生成功能组件集合的方式，达到了前端开发不依赖于后端的目的，从而实现了降低操作复杂度、提高开发效率的技术效果，进而解决了相关技术中所提出的H5页面的生成方式操作复杂度较高，无法实现前端与后端相分离的技术问题。

在优选实施过程中，上述方法用于生成超文本标记语言(HTML)5页面。

在本发明实施例所提供的技术方案中，可以采用React+Redux+Webpack+Mockjs的开发架构来快速生成H5页面。

具体地，用户界面(UI)框架可以采用React来实现。React是Facebook提供的用户界面框架，其可以通过使用类可扩展标记语言(XML)或HTML的语法的JSX来构建组件，并提供尽可能少的应用程序编程接口(API)来实现一个UI组件，从而极大地减少了开发者的学习成本。而且React速度很快，相较于其他框架，其使用特定的方式来访问文档对象模型(DOM)，不允许开发者直接操作DOM，而是在JavaScript代码逻辑与真正的DOM之间引进了一个被称为“虚拟DOM”的虚拟中间层。虚拟DOM能够有效地提高Web性能，通过高效的预设类型算法(例如：diff算法)，对界面中真正需要发生变化的部分进行实际的DOM操作。另外，Facebook还提出了一种管理React数据流的架构Flux。Redux是Flux中的优秀实现库，其可以确保数据单向流动，使得数据的变化变得可预测，便于项目的逻辑控制与测试。除此之外，使用功能强大的Webpack作为前端模块管理和打包工具，将各种资源都作为模块来处理和使用；以及通过Mockjs简单的API、丰富的数据类型能够使得前端可以独立于后端进行开发，进而实现前后端分离。

关于上述开发架构中各个组成的具体实现功能将在下文中做进一步阐述。

可选地，在步骤S12中，获取功能组件集合可以包括以下执行步骤：

步骤S121，根据访问路径信息查找预设模拟数据生成器生成的模拟脚本文件，其中，访问路径信息是由预设模拟数据生成器通过拦截发送至服务端的资源请求消息配置而成的，模拟脚本文件是由预设模拟数据生成器对通过资源请求消息向服务端请求的待发布脚本文件进行模拟得到的；

步骤S122，按照模拟脚本文件之间的依赖关系对模拟脚本文件进行打包处理，生成功能组件集合。

在优选实施例中，可以采用Webpack对模拟脚本文件进行打包处理。Webpack是前端模块管理和打包工具，功能强大，其可以将项目中所使用到的一切静态资源，例如：js文件、less文件、css文件、图片资源都视作模块，并且各个模块之间可以互相依赖。Webpack可以对这些模块进行统一的管理以及打包发布。多个复杂而又相互依赖的资源模块通过Webpack的模块打包功能，生成独立的静态资源。

另外，上述预设模拟数据生成器可以采用Mockjs。Mockjs是能够拦截页面ajax请求并模拟返回数据的简易工具，其可以通过Mockjs实现前后端分离，前端与后端共同沟通定义完成接口文档，Mockjs根据该接口文档的数据结构来定义接口返回的数据，如下所示：

这样在前端调用接口时，会返回上面定义的数据，让前端开发顺利展开，以确保开发时前端不依赖后端的进度，从而提高开发效率。

可选地，在步骤S122中，按照模拟脚本文件之间的依赖关系对模拟脚本文件进行打包处理，生成功能组件集合可以包括以下执行步骤：

步骤S1221，通过预先配置的模拟脚本文件的后缀名类型与脚本加载器类型的对应关系，选取待使用的脚本加载器；

步骤S1222，采用脚本加载器从访问路径信息获取任一模拟脚本文件对应的脚本加载器，并递归查找与该模拟脚本文件存在依赖关系的全部模拟脚本文件；

步骤S1223，通过脚本加载器对存在依赖关系的对应部分模拟脚本文件进行打包，生成对应的功能组件，返回执行步骤S1221，直至对模拟脚本文件打包完毕。

Webpack可以完美支持React，其具备简单的配置，丰富的加载器(loader)和插件项(plugins)。

在如下示例函数中：

其中，test项为对应文件后缀的文件，loaders项为对应需要加载的loader列表，include项表示该目录下的符合test项的文件，需要加载loader；相反地，exclude项表示除去该目录，query项是针对loader的特性标示。

本发明实施例通过使用以上配置，完美地支持less、scss等类型文件，小图片编译成base64位，另外，采用JSX语法、ES6以及Hot Loading Component能够极大地提高开发效率。

可选地，在步骤S16中，响应用户执行的输入操作，对显示内容进行更新可以包括以下执行步骤：

步骤S161，根据输入操作确定待执行的动作以及在执行动作的前一时刻对应的功能组件的第一状态；

步骤S162，通过动作和第一状态确定待更新的第二状态；

步骤S163，按照第二状态对用户界面对应的文档对象模型进行更新。

采用React作为UI框架,将通用的设计元素拆分成接口良好定义的可复用的组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后再将各部分小的组件通过组合或者嵌套的方式构成更大的组件，以最终完成整体UI的构建。

React并非是一个模型-视图-控制器(MVC)框架，而是构建易于可重复调用的web组件，侧重于UI。换言之，React是view层(web应用的表现层)，是用户可以直观地接触到的页面)。

React使用声明式的编程方式，使得代码更加容易被理解，同时也有利于项目的后期维护；

React使用JSX语法直观地定义用户界面，其看起来更像是XML的JavaScript语法扩展，通过使用类似HTML的树形结构来定义React组件，使得React的表现形式十分简明。

React通过对状态的管理来管理组件，使得React改变了传统的开发模式，先前如果希望显示/隐藏一个div，则需要预先获取对应的DOM节点，然后通过调用$(dom).show()或者$(dom).hide()来控制一个div的显示或隐藏，而在React的组件模型中，用户界面被看作是简单的状态机器。当组件处于特定状态时，便会输出与特定状态对应的界面，因此，只需要使用this.setState({show:true})或者this.setState({show:false})，来更新特定组件的状态，然后输出基于最近更新状态的整个界面。因此，React负责以最高效的方式来比较两个界面并更新DOM树。

虚拟DOM是通过js来实现的，其为存储在内存中的类似DOM的数据结构。复杂频繁的DOM操作通常是性能的瓶颈，而虚拟DOM是内存数据，并通过diff算法来一次性地更新真实DOM，进而减少对DOM的实际操作，从而有效地降低复杂频繁的DOM操作次数。在React中，构建的UI界面是由当前状态决定的。前后两个状态即为对应两套界面，比较两者的区别需要对DOM数进行diff算法分析。标准的diff算法复杂度需要O(n^3)，而通过结合web界面的特点做出以下两个简单的假设，便可以使得diff算法的复杂度直接降到O(n)，其中，这两个假设分别为：

假设一、两个相同的组件产生类似的DOM结构，而两个不同的组件则产生不同的DOM结构；

假设二、对于同一层次的一组子节点，可以通过唯一的标识进行区分。

通过大量试验证明，上述两个假设是合理而又精确的，进而有效地改善了整体界面构建的性能。

Redux是Facebook提出的Flux架构的一种优秀实现方式，负责管理数据状态。通过Redux来管理数据状态，以确保数据的单向流动，从而使得视图组件仅包含渲染逻辑和触发动作(action)这两个职责；然后再通过store上注册的action便可以轻松理解store可能发生的状态变化。即任何状态的变化都必须通过action触发，而action又必须通过dispatch来实现，所以整个应用的每一次状态变化都会从同一个地方流过,便于对数据进行记录。

Redux主要分为以下三个部分：Action、Reducer、Store。

(1)Action主要用来传递操作状态(State)的信息，是操作Store数据的唯一来源，以JavaScript Plain Object的形式存在。在通常情况下，可以通过创建函数来生成action，这类函数被称为Action Creator。在该类函数中，type为必要属性，其用于表示将要执行的动作，在通常情况下，type会被定义成，而其他结构字段则完全取决于开发者的实际需求。

(2)Reducer通常为简单的处理函数，其用于指明如何更新state，通过传入旧的state和指示操作的action，进而返回新的state。保持reducer纯净很重要，只要传入参数一样，返回必须一样。没有特殊情况、没有副作用，没有API请求、没有修改参数，单纯执行计算。以下就是一个获取公告列表的示例reducer函数。

但是随着action类型的增加，reducer会变得原来越庞大，这样会导致代码不够清晰。所以，通常会将Reducer根据不同的功能模块拆分成子reducer，通过主reducer调用多个子reducer分别处理state中的一部分数据，然后再将这些数据合成一个完整的单一对象，每个子reducer只负责管理全局state中对应的一部分。每个子reducer的state参数都不同，分别对应其管理的那部分state数据。React-redux模块提供了combineReducers()方法来合并子reducer。

具体地，combinerReducers()主要负责生成一个函数，这个函数来调用一系列子reducer，每个子reducer根据各自的key来筛选出state中的一部分数据并处理，然后这个生成的函数所有子reducer的结果可以合并成一个完整的对象。

(3)与Flux不同，在Redux项目中，Store是单一的，维护着一个全局的State树。通过Store的API来将Action和Reducer关联在一起。

为配合React，可以使用React-Redux库来结合redux和react的模块，其提供了两个接口Provider、connect，其中,这两个接口所能够实现的功能分别如下：

第一个接口、Provider是一个React组件,其作用在于：将store与视图(view)绑定在一起，并配合connect方法以便于子组件获取store数据。

第二个接口、connect连接React组件与Redux store，负责将State和act ion合并到props传递给子组件。具体地，connect不仅可以通过将store的中state映射成props，以便于子组件获取相应的数据，还可以通过将aciotn映射成props，以便于子组件获取相应的数据；

基于上述分析，各个子reducer通过combineReducers()合成主reducer。Redux提供createStore()方法来生成Store。通过React-Reduxt提供的Provider组件将Store传递给子组件。子组件通过connect()将state和action合并到子组件的props中。mapStateToProps()返回对应的state，合并到props中；mapDispatchToProps()返回对应的action，合并到props中。子组件通过Props中获取的state来渲染页面，通过调用Props中的action来更新state，重新渲染页面，达到交互效果。

可选地，在步骤S161中，根据输入操作确定动作可以包括以下执行步骤：

步骤S1611，在预设时长内记录输入操作的操作轨迹；

步骤S1612，当预设时长达到时，将操作轨迹中最后执行的操作确定为动作。

当然，react-redux在实际运用中还存在如下缺陷：当频繁操作action，不断更新store，重新渲染页面时，易导致性能严重下降。在上述方案中存在这样一个场景，编辑页面时拖动元素，实时更改对应的定位属性值，如此频繁的操作action，易导致页面卡顿严重。

本发明优选实施例通过采用以下方案来改善上述问题：在操作action之前，引入“防抖动(Debouncing)”机制，将原本通过action来更新store的大数据流循环优化成在组件内部的数据流循环，在满足特定条件后(例如：当放开鼠标后)才将数据通过action同步到store，从而极大地减少了action的频繁操作；其具体实现过程如下：在拖动元素时，将定位属性保存在组件内部state属性中，而直到放开鼠标，才将元素最终的定位属性通过触发action，更新至store，进而使得属性栏中的定位属性值也相应地变化，从而避免在一段预设时长内，在用户连续执行一系列操作的情况下，需要持续性地触发action，更新至store。

根据本发明实施例，还提供了一种用户界面的显示处理装置的实施例。图2是根据本发明实施例的用户界面的显示处理装置的结构框图。如图2所示，该装置可以包括：获取模块10，用于获取待执行的功能组件集合，其中，功能组件集合是对来自于服务端的待发布脚本文件进行模拟和打包后生成的；渲染模块20，用于根据用户界面的组件结构将功能组件集合渲染至用户界面；更新模块30，用于响应用户执行的输入操作，对用户界面的显示内容进行更新。

可选地，图3是根据本发明优选实施例的用户界面的显示处理装置的结构框图。如图3所示，获取模块10可以包括：查找单元100，用于根据访问路径信息查找预设模拟数据生成器生成的模拟脚本文件，其中，访问路径信息是由预设模拟数据生成器通过拦截发送至服务端的资源请求消息配置而成的，模拟脚本文件是由预设模拟数据生成器对通过资源请求消息向服务端请求的待发布脚本文件进行模拟得到的；处理单元102，用于按照模拟脚本文件之间的依赖关系对模拟脚本文件进行打包处理，生成功能组件集合。

可选地，处理单元102包括：选取子单元(图中未示出)，用于通过预先配置的模拟脚本文件的后缀名类型与脚本加载器类型的对应关系，选取待使用的脚本加载器；获取子单元(图中未示出)，用于采用脚本加载器从访问路径信息获取任一模拟脚本文件对应的脚本加载器，并递归查找与该模拟脚本文件存在依赖关系的全部模拟脚本文件；处理子单元(图中未示出)，用于通过脚本加载器对存在依赖关系的对应部分模拟脚本文件进行打包，生成对应的功能组件。

可选地，如图3所示，更新模块30可以包括：第一确定单元300，用于根据输入操作确定待执行的动作以及在执行动作的前一时刻对应的功能组件的第一状态；第二确定单元302，用于通过动作和第一状态确定待更新的第二状态；更新单元304，用于按照第二状态对用户界面对应的文档对象模型进行更新。

可选地，第一确定单元300，用于在预设时长内记录输入操作的操作轨迹，并在预设时长达到时，将操作轨迹中最后执行的操作确定为动作。

上述装置可以适用于React+Redux+Webpack+Mockjs的开发架构来快速生成H5页面，具有以下技术优势：选择React，以组件化开发方式，编写出可复用的组件，减少代码编写量；相较于Angular，引入了虚拟DOM的React速度更快。Redux保证数据单项流动，让数据更可预测。任何一次交互，都能清晰地知道数据的流向，大大提高了维护效率。Webpack作为一个前端工程化解决方案，将各类资源都视为模块进行打包，配合相关loader和plugin，从而提高开发效率。借助Mockjs实现前后端分离，让前端在开发时不依赖后端，提高开发效率

需要说明的是，上述优选实施例中提到的Redux可以采用类Flux库(例如：Reflux、Fluxxor、Fluxette)来代替；另外，Browserify、Grunt、Glup配合相关的插件都可以完成大部分Webpack的工作。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (11)

1.一种用户界面的显示处理方法，其特征在于，包括：

获取待执行的功能组件集合，其中，所述功能组件集合是对来自于服务端的待发布脚本文件进行模拟和打包后生成的；

根据用户界面的组件结构将所述功能组件集合渲染至所述用户界面；

响应用户执行的输入操作，对所述用户界面的显示内容进行更新。

2.根据权利要求1所述的方法，其特征在于，获取所述功能组件集合包括：

根据访问路径信息查找预设模拟数据生成器生成的模拟脚本文件，其中，所述访问路径信息是由所述预设模拟数据生成器通过拦截发送至所述服务端的资源请求消息配置而成的，所述模拟脚本文件是由所述预设模拟数据生成器对通过所述资源请求消息向所述服务端请求的所述待发布脚本文件进行模拟得到的；

按照所述模拟脚本文件之间的依赖关系对所述模拟脚本文件进行打包处理，生成所述功能组件集合。

3.根据权利要求2所述的方法，其特征在于，按照所述模拟脚本文件之间的所述依赖关系对所述模拟脚本文件进行打包处理，生成所述功能组件集合包括：

选取步骤：通过预先配置的所述模拟脚本文件的后缀名类型与脚本加载器类型的对应关系，选取待使用的脚本加载器；

获取步骤：采用所述脚本加载器从所述访问路径信息获取任一模拟脚本文件对应的脚本加载器，并递归查找与该模拟脚本文件存在所述依赖关系的全部模拟脚本文件；

通过所述脚本加载器对存在所述依赖关系的对应部分模拟脚本文件进行打包，生成对应的功能组件，返回执行所述选取步骤，直至对所述模拟脚本文件打包完毕。

4.根据权利要求1所述的方法，其特征在于，响应所述用户执行的所述输入操作，对所述显示内容进行更新包括：

根据所述输入操作确定待执行的动作以及在执行所述动作的前一时刻对应的功能组件的第一状态；

通过所述动作和所述第一状态确定待更新的第二状态；

按照所述第二状态对所述用户界面对应的文档对象模型进行更新。

5.根据权利要求4所述的方法，其特征在于，根据所述输入操作确定所述动作包括：

在预设时长内记录所述输入操作的操作轨迹；

当所述预设时长达到时，将所述操作轨迹中最后执行的操作确定为所述动作。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述方法用于生成超文本标记语言HTML5页面。

7.一种用户界面的显示处理装置，其特征在于，包括：

获取模块，用于获取待执行的功能组件集合，其中，所述功能组件集合是对来自于服务端的待发布脚本文件进行模拟和打包后生成的；

渲染模块，用于根据用户界面的组件结构将所述功能组件集合渲染至所述用户界面；

更新模块，用于响应用户执行的输入操作，对所述用户界面的显示内容进行更新。

8.根据权利要求7所述的装置，其特征在于，所述获取模块包括：

查找单元，用于根据访问路径信息查找预设模拟数据生成器生成的模拟脚本文件，其中，所述访问路径信息是由所述预设模拟数据生成器通过拦截发送至所述服务端的资源请求消息配置而成的，所述模拟脚本文件是由所述预设模拟数据生成器对通过所述资源请求消息向所述服务端请求的所述待发布脚本文件进行模拟得到的；

处理单元，用于按照所述模拟脚本文件之间的依赖关系对所述模拟脚本文件进行打包处理，生成所述功能组件集合。

9.根据权利要求8所述的装置，其特征在于，所述处理单元包括：

选取子单元，用于通过预先配置的所述模拟脚本文件的后缀名类型与脚本加载器类型的对应关系，选取待使用的脚本加载器；

获取子单元，用于采用所述脚本加载器从所述访问路径信息获取任一模拟脚本文件对应的脚本加载器，并递归查找与该模拟脚本文件存在所述依赖关系的全部模拟脚本文件；

处理子单元，用于通过所述脚本加载器对存在所述依赖关系的对应部分模拟脚本文件进行打包，生成对应的功能组件。

10.根据权利要求7所述的装置，其特征在于，所述更新模块包括：

第一确定单元，用于根据所述输入操作确定待执行的动作以及在执行所述动作的前一时刻对应的功能组件的第一状态；

第二确定单元，用于通过所述动作和所述第一状态确定待更新的第二状态；

更新单元，用于按照所述第二状态对所述用户界面对应的文档对象模型进行更新。

11.根据权利要求10所述的装置，其特征在于，所述第一确定单元，用于在预设时长内记录所述输入操作的操作轨迹，并在所述预设时长达到时，将所述操作轨迹中最后执行的操作确定为所述动作。