一款个人“低代码”框架新鲜出炉 (4) --前端

前端

之所以没有用最新的MVVM框架，是我对这些框架不是很熟悉，我开发的语言主要是java，所以使用TypeScript会更新顺手，应用面向对象的方法会更自然一些。
所以我选择了JQuery,BootStrap,TypeScript作为开发的框架和语言。
框架中主要的类如下图：

BaseUI<T>是最基础的UI类，它定义了控件的创建和销毁，基本事件注册，以及一些模板方法。
BaseComponent<T>在Base类的基础上，进一步定义了数据相关的属性，如字段名，值，确切的事件，使能，可以性等属性。
JQBaseComponent<T extends Component>是框架中基本组件的基类，以JQuery为基础控件，以界面设计器的设计数据为属性。

基础控件

TextInput控件是最常用，也是比较典型的组件，成为了其它控件的基类。
在这些控件中，Panel算是比较特殊的控件，它是一个轻量的容器，可以包含其它子控件，这样，表单上的控件就成了一个树状的结构。
自定义组件，开发者可以自己定义组件，需要做到如下几步：

1. 创建类，并继承自BaseComponent，并且一类上加上@RegComponent(id)的注解，id是这个控件ID值，数字型。
2. 在通用选择中，增加类型ID为“componentType”的数据，ID字段与上面的ID值相同。

记得在index.ts中输出这个类，以便打包时可以打进去。否则在使用时，会报找不到指定类的错误。

组合控件

组合控件相对于基础控件，属于重量级。显示数据多，控制复杂，是菜单功能的组成要素。目前框架中的组合控件有，表单，表格，树，卡片。
1.表单是由基础控件组合而成，是界面设计器设计的成果（也可手动拼接配置信息），它负责子控件整体的管理，提供整体的方法。如取值，设值，使能等。

2.表格算是框架中最复杂的控件了，本框架使用了free-jqgrid表格组件，使用此表格控件是看中其可以分页，多表头，列宽手动调整等功能。表格控件做了包装，将控制部分独立出来一个接口TableRenderProvider，此接口负责表体每个单元格的显示和编辑，表格的分页是后台物理分页。.

3.树使用的jstree，支持拖放，多选，查找等功能。

4.卡片是一系列表单组成的表单列表，具有表单和表格的一些特性。每个卡片可以进行编辑，删除和保存，还可以排序。单个卡片就是Form。

布局组件

布局是为了统一界面风格，简化代码而开发的窗口控件。
1. 边框布局（BorderLayout）,整个页面分为东、西、南、北、中五个块，其中相邻二个块用滑动分隔条（SplitPane)分隔,显示时，中间块必须存在子元素。其它可任意组合。

2. 流式布局（FlowLayout),控件从左向右排列显示，一行尽可能显示多的控件，如果一行显示不下，则转入下行继续显示。

3. 页面，页面是“页面设计”的成果，其内部维护了一个边框布局实例，将页面设计的元素初始化后，加入到相应的块中显示，页面可以嵌套，以实现较复杂的页面。

受控组件

所谓受控组件，就是由设计器设计出来的，自动生成的，并受设计约束的组件。受控组件从组合控件中包装生成的，如受控表单ManagedForm,受控表格ManagedTable等。它们会根据用户的操作，自动做出响应。
如：用户选择了树，如果树是一个“引用”生成，则相关联的表会以选择的树节点为过滤条件进行过滤刷新，关联关系就是在方案中，表与表的关系，表与引用的关系。
又如，一表格的选择变化，会使用与之关联的表单变化，或子表的表格变化，等。
受控组件的状态变化，也会影响其它受控组件的状态。如：一个表单点击修改，则如果存在与之对应的表格，则表格会设置成不可使用状态，直到表单保存或取消操作。

前端未来计划

由于当前MVVM的前端框架应用得很广泛，所以在合适的时候，生成一套基于MVVM的框架。

开发注意事项
控件的开发，要注意对使用资源及时的销毁。在BaseUI类中，可以通过覆写destroy()方法，销毁本控件用到的资源，尤其注意事件的销毁，常常因为闭包而无法自动销毁。