面向数据源的编程

数据源:

JList
type: fixed、get、post

下拉框组件设计

数据源:
dropDownValues: JList

属性绑定:
output: JString

组件说明:
从该组件拖动到表单编排器的编辑区域时,需要在右侧配置dropDownValues,该值必须为JList类型。该组件会将值写到output所绑定的属性中,然后通过请求发送给后端。

这一部分是为了进一步阐述我在动态表单设计中提到的组件面向数据源编程。数据源这个概念的提出,是考虑了这么一个场景:有些时候一个组件中会写死一些内容,而有时候这些数据是从服务器动态获取的,前端需要提高一个组件的复用性,那他就不应该假设这个数据是写死的或者是从服务器获取的,他面向的始终是一个叫做数据源的数据结构。

先举一个例子,说明下数据源是怎样的一个存在吧。在不使用数据源的情况下,我们做一个下拉菜单的伪代码可能是这样的:


# 写死的数据
组件被点击时:
    使用一个数组渲染下拉框

# 从服务器获取数据
组件被点击时:
    从服务器获取数据:
        回调中渲染下拉框

这个功能的具体实现可能是页面在加载组件的时候,就通过写死的方式,或者通过链接获取到了一个数组,然后都走的是当组件被点击时,通过数组渲染下拉框。我之所以要将案例设计成在组件被点击时,再发送服务器请求获取数组,是因为在我们生产场景中,我们是存在用户往下滚动,然后加载更多数据的设计。

如果使用数据源,相应的代码又是怎样的呢:


# 写死的数据
组件被点击时:
    数组 = 数据源.getAll()
    使用一个数组渲染下拉框

# 从服务器获取数据
组件被点击时:
    数组 = 数据源.getAll()
    使用一个数组渲染下拉框

有没有发现两种写法是完全一致的,这就是我想达到的目标。数据源本身就是一种数据结构,它是我们表单框架里重要的一部分(具体实现,我有些自己的想法,这个稍后再谈)。我们用数据源来描述下稍微复杂点的需求如何实现,这个需求大概是这样的,用户点开下拉框后,先显示20条数据,用户往下拖动到底部的时候,会继续加载10条数据。


# 写死的数据
组件被点击时:
    渲染数组 = 数据源.get(20)
    使用一个数组渲染下拉框
    当组件滚动时:
        新的数组 = 数据源.next(10)
        渲染数组.append(新的数组)
        使用渲染数组渲染下拉框

# 从服务器获取数据
组件被点击时:
    渲染数组 = 数据源.get(20)
    使用一个数组渲染下拉框
    当组件滚动时:
        新的数组 = 数据源.next(10)
        渲染数组.append(新的数组)
        使用渲染数组渲染下拉框

实际上我没有系统的学习过前端组件的开发,我并不知道我的设计是否正确。

我对数据源的设计是,将数据源包装成我们JavaScript中常用的容器类型,比如包装成一个map,如果数据是写死的,那么这个map中的数据也是固定的,如果数据是需要从服务端获取的,那么这个map的get操作会自动拼接出请求,从而从服务端获取数据。如何实现异步效果呢?我不知道js中的原生容器是否支持异步,如果支持,会使用相同的包装方法,如果不支持,则可能会设计新的方法。

当前,参考以前的表单实现,我们也能够得到一些数据结构。并对这些数据结构进行整理,从而总结出我们自己需要的数据结构。