一种在前端实现行为、数据、视图联动的方法及系统

摘要

本发明公开了一种在前端实现行为、数据、视图联动的方法及系统，涉及前端开发技术领域。该方法包括：建立数据模型；根据数据模型建立视图模型；当需要展示供用户进行交互操作的首个视图页面时，利用已有的视图脚本对视图模型进行处理，生成视图模型对应的HTML代码，通过生成的HTML代码进行首个视图页面的渲染，展示首个视图页面；用户利用展示的首个视图页面进行交互操作，生成操作数据，通过视图脚本将所述操作数据更新到当前视图对应的数据实例中；将所述操作数据提交给服务器，结束。本发明能使前端达到行为、数据、视图的联动效果，降低了前端代码开发和调试的复杂度，便于扩展和维护。

说明书

技术领域

本发明涉及前端开发技术领域，具体来讲是一种在前端实现行为、数据、视图联动的方法及系统。

背景技术

前端对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML(HyperText Markup Language，超文本标记语言)、CSS(Cascading Style Sheets，层叠样式表)以及JavaScript/ajax。在前端开发领域，越来越多的业务逻辑与数据处理被强行接入。前端从最初处理简单的表单提交与数据交互，变成如今以MVC(Model-View-Controller，模型-视图-控制器)，MVVM(Model-View-ViewModel，模型-视图-视图模型)等规范为主的单页面应用(SPA，Single Page Application)，对开发人员的要求非常高。

前端从根本意义上来讲，是一种受外部驱动的宿主静态语言。外部驱动包括：用户行为、浏览器行为、服务器行为；宿主为浏览器。前端的整个运行过程主要包括：用户与视图交互，发出浏览器内的请求；根据请求进行数据处理后，重新绘制视图达到用户预期的效果；其中数据处理的过程中可能会与服务器进行交互。

前端的核心的功能是事件管理。如图1所示，目前，前端通用的实现事件管理功能的方案为：事件弹射器(Observer)，事件弹射器对外提供的API(Application Programming Interface，应用编程接口)有：1、新增(增量新增事件)；2、销毁(销毁注册事件)；3、通知(批量执行事件所对应的函数队列)。

事件弹射器在某种程度上确实解决了一些事件管理上的问题，但在真实的前端开发过程中，开发人员可以在多个不同的代码模块进行个性化的事件注册，而事件名称和事件处理没有统一规范，使得代码调试和维护变得非常复杂，维护成本也高，一次视图层的大改版极可能导致整体前端代码的重构，且在执行事件的过程中，一个事件函数出错极可能导致后续的函数无法执行。

发明内容

本发明的目的是为了克服上述背景技术的不足，提供一种在前端实现行为、数据、视图联动的方法及系统，能使前端达到行为、数据、视图的联动效果，降低了前端代码开发和调试的复杂度，便于扩展和维护。

为达到以上目的，本发明提供一种在前端实现行为、数据、视图联动的方法，包括以下步骤：S1：获取用户与服务器之间的交互数据，根据获取的交互数据建立数据模型，所述数据模型包括若干个由数据对象生成的数据实例，每个数据实例对应一条交互数据，每条交互数据对应一个视图，即数据实例与视图对应，转入步骤S2；S2：根据数据模型建立视图模型，转入步骤S3；S3：当需要展示供用户进行交互操作的首个视图页面时，利用已有的视图脚本对视图模型进行处理，生成视图模型对应的HTML代码；通过生成的HTML代码进行首个视图页面的渲染，展示首个视图页面，转入步骤S4；S4：用户利用展示的首个视图页面进行交互操作，生成操作数据；通过视图脚本将所述操作数据更新到当前视图对应的数据实例中，转入步骤S5；S5：将所述操作数据提交给服务器，结束。

在上述技术方案的基础上，每个数据实例中包含数据模型字段、数据模型字段的默认值和数据模型字段的数据处理方式。

在上述技术方案的基础上，步骤S2中所述根据数据模型建立视图模型的具体过程为：将建立的数据模型中各数据实例的数据模型字段依次绑定到视图模型中，从而建立视图模型。

在上述技术方案的基础上，步骤S3具体包括以下操作：

S301：利用已有的视图脚本解析视图模型，找出视图模型中所有与数据模型字段绑定的DOM元素，并给所有的DOM元素加上唯一标识，转入步骤S302；

S302：利用视图脚本收集当前视图模型中DOM元素与数据模型字段的关联关系；同时，利用视图脚本给所有被收集到的DOM元素绑定变更事件，转入步骤S303；

S303：利用视图脚本将视图模型中绑定的数据模型字段更改为数据模型字段的默认值，并转换为HTML代码，同时根据视图模型关联的数据模型生成一个数据实例，转入步骤S304；

S304：将视图脚本解析后的HTML代码插入到网站对应的由开发者预先设定的区块中，并根据生成的数据实例进行首个视图页面的渲染，展示首个视图页面。

在上述技术方案的基础上，步骤S5中，将所述操作数据提交给服务器时，采用实时提交的方式或用户行为触发提交的方式进行提交。

本发明同时还提供一种在前端实现行为、数据、视图联动的系统，包括数据模型建立模块、视图模型建立模块、首视图展示模块、交互更新模块和数据提交模块；所述数据模型建立模块用于：获取用户与服务器之间的交互数据，根据获取的交互数据建立数据模型，所述数据模型包括若干个由数据对象生成的数据实例，每个数据实例对应一条交互数据，每条交互数据对应一个视图，即数据实例与视图对应；所述视图模型建立模块用于：根据数据模型建立视图模型；所述首视图展示模块用于：当需要展示供用户进行交互操作的首个视图页面时，利用已有的视图脚本对视图模型进行处理，生成视图模型对应的HTML代码；通过生成的HTML代码进行首个视图页面的渲染，展示首个视图页面；所述交互更新模块用于：当用户利用展示的首个视图页面进行交互操作，生成操作数据后；通过视图脚本将所述操作数据更新到当前视图对应的数据实例中；所述数据提交模块用于：将用户交互的操作数据提交给服务器。

在上述技术方案的基础上，所述数据模型建立模块建立的数据模型中，每个数据实例中包含数据模型字段、数据模型字段的默认值和数据模型字段的数据处理方式。

在上述技术方案的基础上，所述视图模型建立模块根据数据模型建立视图模型的具体过程为：将建立的数据模型中各数据实例的数据模型字段依次绑定到视图模型中，从而建立视图模型。

在上述技术方案的基础上，所述首视图展示模块展示首个视图页面的具体过程为：利用已有的视图脚本解析视图模型，找出视图模型中所有与数据模型字段绑定的DOM元素，并给所有的DOM元素加上唯一标识；利用视图脚本收集当前视图模型中DOM元素与数据模型字段的关联关系，同时，利用视图脚本给所有被收集到的DOM元素绑定变更事件；利用视图脚本将视图模型中绑定的数据模型字段更改为数据模型字段的默认值，并转换为HTML代码，同时根据视图模型关联的数据模型生成一个数据实例；将视图脚本解析后的HTML代码插入到网站对应的由开发者预先设定的区块中，并根据生成的数据实例进行首个视图页面的渲染，展示首个视图页面。

在上述技术方案的基础上，所述数据提交模块将用户交互的操作数据提交给服务器时，采用实时提交的方式或用户行为触发提交的方式进行提交。

本发明的有益效果在于：

本发明中，能根据获取的用户与服务器之间的交互数据建立数据模型；根据该数据模型能建立视图模型；当需要展示供用户进行交互操作的首个视图页面时，利用已有的视图脚本对所述视图模型进行处理，生成视图模型对应的HTML代码，通过生成的HTML代码进行首个视图页面的渲染，展示首个视图页面；当用户利用展示的首个视图页面进行与网站视图的交互操作并生成操作数据后，能通过视图脚本将所述操作数据更新到当前视图对应的数据实例中；并将该操作数据提交给服务器。整个视图交互过程达到一种行为、数据、视图的联动效果。与现有技术相比，采用本发明的方法使得开发人员仅能对数据模型和视图模型进行修改，交互过程中的数据和视图的更新维护通过数据模型、视图模型及视图脚本自动实现，不但降低了前端代码开发和调试的复杂度，而且便于扩展和维护。

附图说明

图1为背景技术中前端通用的实现事件管理功能的方案示意图；

图2为本发明实施例中在前端实现行为、数据、视图联动的方法的流程图；

图3为本发明实施例中在前端实现行为、数据、视图联动的系统的结构框图。

具体实施方式

下面结合附图及具体实施例对本发明作进一步的详细描述。

参见图1所示，本发明实施例提供一种在前端实现行为、数据、视图联动的方法，包括以下步骤：

步骤S1：获取用户与服务器之间的交互数据，根据获取的交互数据建立数据模型，转入步骤S2。

可以理解的是，所述数据模型包括若干个由数据对象生成的数据实例，每个数据实例对应一条交互数据，每条交互数据对应一个视图(即数据实例与视图对应)。其中，每个数据实例中包含数据模型字段、数据模型字段的默认值和数据模型字段的数据处理方式。

步骤S2：根据数据模型建立视图模型，转入步骤S3。具体来说，根据数据模型建立视图模型的具体过程为：将建立的数据模型中各数据实例的数据模型字段依次绑定到视图模型中，从而建立视图模型。

步骤S3：当需要展示供用户进行交互操作的首个视图页面时，利用已有的视图脚本对视图模型进行处理，生成视图模型对应的HTML代码；通过生成的HTML代码进行首个视图页面的渲染，展示首个视图页面，转入步骤S4。

实际操作时，步骤S3具体包括以下操作：

步骤S301：利用已有的视图脚本解析视图模型，找出视图模型中所有与数据模型字段绑定的DOM(Document Object Model，文档对象模型)元素，并给所有的DOM元素加上唯一标识，其中唯一标识的属性名称为data-id，唯一标识的属性值为客户端当前时间的时间戳，转入步骤S302；

步骤S302：利用视图脚本收集当前视图模型中DOM元素与数据模型字段的关联关系；同时，利用视图脚本给所有被收集到的DOM元素绑定变更事件(原生支持)，转入步骤S303；可以理解的是，关联关系收集完后的结果为：一个数据模型字段对应多个DOM元素唯一标识；

步骤S303：利用视图脚本将视图模型中绑定的数据模型字段更改为数据模型字段的默认值，并转换为HTML代码，同时根据视图模型关联的数据模型生成一个数据实例，转入步骤S304；

步骤S304：将视图脚本解析后的HTML代码插入到网站对应的由开发者预先设定的区块中，并根据生成的数据实例进行首个视图页面的渲染，展示首个视图页面。

步骤S4：用户利用展示的首个视图页面进行与网站视图的交互操作，生成操作数据；通过视图脚本将所述操作数据更新到当前视图对应的数据实例中，转入步骤S5。具体来说，用户在利用展示的首个视图页面进行与网站视图的交互操作生成操作数据的过程，实际是更改DOM元素的属性值的过程，该过程会触发该DOM元素绑定的变更事件，视图脚本会将当前变更的DOM元素的属性值更新到当前视图对应的数据实例中。

步骤S5：将所述操作数据提交给服务器，结束。

可以理解的是，步骤S5中，将所述操作数据提交给服务器时，可采用实时提交的方式或用户行为触发提交的方式进行提交。其中：

实时提交的方式为：一旦生成操作数据(即用户更改了DOM元素的属性值)后，立即将生成的操作数据(即更改的DOM元素的属性值)提交给服务器。该方式在前端开发时，只需要开发者在数据模型中配置数据模型字段的数据处理方式，当用户更改了DOM元素的属性值会触发DOM元素的变更事件，视图脚本在变更事件的逻辑中会默认调用数据模型字段的数据处理方式，以此实现用户数据的实时提交(更新)。

用户行为触发提交的方式为：当用户触发开发者预留的提交入口，提交入口的函数将调用视图脚本中获取视图模板的数据实例，并将数据实例提交给服务器。例如，假设提交入口是“提交按钮”，则用户点击“提交按钮”触发“提交按钮”的函数，该函数将调用视图脚本中获取视图模板的数据实例，并将数据实例提交给服务器。

参见图2所示，本发明实施例还提供一种用于直播网站的直播房间推荐系统。该系统包括数据模型建立模块、视图模型建立模块、首视图展示模块、交互更新模块和数据提交模块。

其中，数据模型建立模块用于：获取用户与服务器之间的交互数据，根据获取的交互数据建立数据模型，所述数据模型包括若干个由数据对象生成的数据实例，每个数据实例对应一条交互数据，每条交互数据对应一个视图，即数据实例与视图对应。

视图模型建立模块用于：根据数据模型建立视图模型。

首视图展示模块用于：当需要展示供用户进行交互操作的首个视图页面时，利用已有的视图脚本对视图模型进行处理，生成视图模型对应的HTML代码；通过生成的HTML代码进行首个视图页面的渲染，展示首个视图页面。

交互更新模块用于：当用户利用展示的首个视图页面进行与网站视图的交互操作，生成操作数据后；通过视图脚本将所述操作数据更新到当前视图对应的数据实例中。

数据提交模块用于：将用户交互的操作数据提交给服务器。

需要说明的是：上述实施例提供的系统在进行操作时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将系统的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

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

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。