[发明专利]一种在前端实现行为、数据、视图联动的方法及系统

摘要

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

主权项

1.一种在前端实现行为、数据、视图联动的方法，其特征在于，该方法包括以下步骤：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代码插入到网站对应的由开发者预先设定的区块中，并根据生成的数据实例进行首个视图页面的渲染，展示首个视图页面。