一种通用JavaScript数据源组件的制作方法

文档序号:13760180阅读:268来源:国知局

本发明涉及计算机软件技术领域,具体地说是一种通用JavaScript数据源组件。



背景技术:

随着浏览器技术的发展,Html渲染效率和JavaScript解析速度得到大幅提升。使用Html+JavaScript技术开发绚丽的Web应用越来越流行。各个控件厂商随即推出了各自基于Html5技术的Html控件,每套控件都有各成体系的数据绑定机制。有的控件提供自己的数据源组件,有的控件直接使用JavaScript对象或者数组作为数据源。各成体系的UI控件为我们带来了一系列的问题:

控件厂商的侧重点不同,对数据增量捕获、查询、排序等特性支持程度不同;

控件各自的数据管理机制,使前端业务逻辑代码严重绑定某一特定UI,难以开发一个稳定的业务逻辑框架;

混合使用不同系列UI控件,或者替换已有UI的难度较大。

针对以上问题,本发明提出了一种有效的解决方法。



技术实现要素:

本发明的技术任务是针对以上不足之处,提供一种通用JavaScript数据源组件。

一种通用JavaScript数据源组件,该数据源组件采用数据源对象包装数组原型对象的方式,将数据源对象模拟为数组,使数据源对象可以直接作为数组操作;使用Object底层API实现可观察对象,直接为可观察对象的属性赋值即可记录数据变更。

数据源组件包括若干数据源对象,数据源对象实现了JavaScript数组接口,具有过滤、排序、确认数据变更、回滚数据变更、数据变更捕获功能;该数据源对象是数据的容器,其中包括若干数据项。

所述数据项是数据源组件中存储数据的最小单元,对应一个JavaScript对象;数据项中的属性对应数据字段,属性采用Object对象定义属性的API方法defineProperty定义,即使用Object底层API观察对象,直接为观察对象的属性赋值即可记录数据变更。

数据源组件具有数据视图功能,数据视图中包含的数据为视图项,视图项是对数据项的包装。

数据视图时将数据源对象进行过滤、排序后的数据子集用于以不同形式展示的数据,且一个数据源对象创建至少一个数据视图。

本发明的一种通用JavaScript数据源组件和现有技术相比,具有以下有益效果:

本发明的一种通用JavaScript数据源组件,采用原型模式、观察模式实现了覆盖JavaScript数组接口的数据源对象,并且在不污染JavaScript数组原型的情况下,实现了对数组标准接口的扩展,使数据源对象既支持数组接口也支持数据变更捕获等高级功能;因为商业、开源控件均支持JavaScript数组数据源,本发明完全覆盖JavaScript数组接口,所以本发明可以适配各种Html控件,为不同厂商的控件提供统一的数据源管理功能,屏蔽UI控件层的差异,保持业务逻辑代码稳定,实用性强,适用范围广泛,易于推广。

附图说明

附图1为本发明的实现示意图。

具体实施方式

下面结合附图及具体实施例对本发明作进一步说明。

如附图1所示,本发明的一种通用JavaScript数据源组件,适用于开发Html5+JavaScript技术的Html应用。本发明的目的是提供一个独立的数据源组件,该组件不依赖于具体的UI控件,并提供数据变更记录、排序、数据查找等数据管理功能。通过该组件使前端业务逻辑层代码与具体的UI控件解耦,增强前端代码对不同UI的适配性。

本发明采用原型模式、观察模式实现了覆盖JavaScript数组接口的数据源对象,并且在不污染JavaScript数组原型的情况下,实现了对数组标准接口的扩展,使数据源对象既支持数组接口也支持数据变更捕获等高级功能。

本发明总结了Html控件均支持数组数据源的规律,以JavaScript数组接口为标准接口与控件进行交互。该数据源组件独立于UI控件,提供添加数据、删除数据、过滤、排序、增量捕获等功能。

一、该数据源组件采用数据源对象包装数组原型对象的方式,将数据源对象模拟为数组,使数据源对象可以直接作为数组操作;

本发明灵活利用了JavaScript原型对象的原理,使数据源对象具有JavaScript数组的功能。JavaScript使用原型链的方式实现继承,数据源组件使用此种继承方式覆盖数组所有方法较为死板,难以复写数组原因方法并增加扩展。本发明采用直接引用数组原型对象的方式覆盖数组功能并增加扩展。

伪代码如下:

本发明采用的方法避免更改数据源对象的原型链,为数据源对象增加数组接口的同时,保留了使用数据源对象的灵活性,并在数据源对象上简单直接的扩展数组同名方法。

二、使用Object底层API实现可观察对象,直接为可观察对象的属性赋值即可记录数据变更;

一般情况下,JavaScript数组元素的某个属性值被改变后,不会发出任何通知。开发者为了记录属性值变化,通常采用将属性值声明为方法的方式。如:

示例1:

执行上面的代码后,object1.field1的值将变为“Hello World”,但是开发者无法捕获这个变化。

示例2:

通过上面的代码,开发者在为field2赋值时可以捕获变化了,但是严格限制了获取和设置对象属性值的方式,即必须通过方法访问对象的属性。目前许多流行的开发框架均使用这种方式记录数据的变化。

这种方式在与第三方控件进行集成时将遇到困难,如果控件按照示例1中的方式为数据复制,数据源中仍然无法捕获到数据变化。因此示例2的方式仅适用于特定的控件。

本发明使用Object对象的defineProperty方式定义对象属性。示例代码如下:

示例3:

执行上面代码后,将捕获到field3属性值的变化。

本发明采用这种方式创建数据源中的数据,实现了数据值变化的自动捕获。这种方式适用范围广,为数据源组件提供了一种通用的数据值变化捕获机制。

三、可直接用于第三方控件,为第三方控件提供统一的数据源管理功能。

商业控件和开源控件一般均支持数组作为数据源,本发明数据源组件覆盖了JavaScript数组对象的方法,可以直接替换替换数组做为第三方控件的数据源。

数据源组件提供的数据变更记录功能可以直接用在第三方控件。基于上述特征,第三方控件更新数组值的同时,本数据源组件可以自动记录数据变化,具有很好的适配性。

本数据源组件下包含若干数据源对象,数据源对象实现了JavaScript数组接口,并且本身支持过滤、排序、确认数据变更、回滚数据变更、数据变更捕获功能。

数据源对象是数据的容器,其中包含若干数据项。数据项是数据源组件中存储数据的最小单元,对应一个JavaScript对象。数据项中的属性对应数据字段,属性采用Object对象定义属性的API方法defineProperty定义。采用这种方式定义的属性,可以在获取、设置属性值时增加扩展逻辑,本发明采用此种方式实现数据字段的变更捕获。

数据源组件提供数据视图功能。数据视图时对数据源对象进行过滤、排序后的数据子集,用于已不同的形式展示数据。一个数据源对象可以创建多个数据视图。

数据视图中包含的数据为视图项,视图项是对数据项的包装。

以下将通过一个具体实施例,使本发明的上述目标、特征和优点更加清晰、易懂。

实例一,将数据源组件用于以数组为数据源的数据列表控件。该控件为jQuery插件,插件名为datagrid。伪代码如下:

通过上面具体实施方式,所述技术领域的技术人员可容易的实现本发明。但是应当理解,本发明并不限于上述的具体实施方式。在公开的实施方式的基础上,所述技术领域的技术人员可任意组合不同的技术特征,从而实现不同的技术方案。

除说明书所述的技术特征外,均为本专业技术人员的已知技术。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1