CN106227523A - 一种通用JavaScript数据源组件 - Google Patents

Abstract

本发明公开了一种通用JavaScript数据源组件，该数据源组件采用数据源对象包装数组原型对象的方式，将数据源对象模拟为数组，使数据源对象可以直接作为数组操作；使用Object底层API实现可观察对象，直接为可观察对象的属性赋值即可记录数据变更。本发明的一种通用JavaScript数据源组件与现有技术相比，采用原型模式、观察模式实现了覆盖JavaScript数组接口的数据源对象，并且在不污染JavaScript数组原型的情况下，实现了对数组标准接口的扩展，使数据源对象既支持数组接口也支持数据变更捕获等高级功能，实用性强，适用范围广泛，易于推广。

Description

一种通用JavaScript数据源组件

技术领域

本发明涉及计算机软件技术领域，具体地说是一种通用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。伪代码如下：

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

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

Claims (5)

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

2.根据权利要求1所述的一种通用JavaScript数据源组件，其特征在于，数据源组件包括若干数据源对象，数据源对象实现了JavaScript数组接口，具有过滤、排序、确认数据变更、回滚数据变更、数据变更捕获功能；该数据源对象是数据的容器，其中包括若干数据项。

3.根据权利要求2所述的一种通用JavaScript数据源组件，其特征在于，所述数据项是数据源组件中存储数据的最小单元，对应一个JavaScript对象；数据项中的属性对应数据字段，属性采用Object对象定义属性的API方法defineProperty定义，即使用Object底层API观察对象，直接为观察对象的属性赋值即可记录数据变更。

4.根据权利要求1-3任一所述的一种通用JavaScript数据源组件，其特征在于，数据源组件具有数据视图功能，数据视图中包含的数据为视图项，视图项是对数据项的包装。

5.根据权利要求4所述的一种通用JavaScript数据源组件，其特征在于，数据视图时将数据源对象进行过滤、排序后的数据子集用于以不同形式展示的数据，且一个数据源对象创建至少一个数据视图。