1 | # Kero介绍
|
2 |
|
3 | ## kero出现的背景
|
4 |
|
5 | ### 构建大型企业级应用的痛点:
|
6 |
|
7 | - 复杂单据
|
8 | - 控件复杂,不断扩展
|
9 | - 数据格式不固定,运行时动态调整
|
10 |
|
11 | ### Kero如何解决这些问题:
|
12 |
|
13 |
|
14 | - 数据模型可描述
|
15 |
|
16 | kero 使用了描述性的代码风格定义数据模型。数据被存储在ViewModel中,通过数据模型进行访问和修改。
|
17 |
|
18 | var viewModel = {
|
19 | head : new u.DataTable({
|
20 | meta: {
|
21 | 'pk_org': {
|
22 | 'required': true,
|
23 | 'associations': {
|
24 | "pk_org": "name"
|
25 | },
|
26 | 'associationMeta': 'uap.org'
|
27 | },
|
28 | 'billnumber': {
|
29 | 'precision': 2,
|
30 | 'required': true,
|
31 | 'maxLength': 50
|
32 | }
|
33 | }
|
34 | })
|
35 | }
|
36 |
|
37 |
|
38 | - 统一可扩展的控件描述
|
39 |
|
40 | kero使用了描述性的风格来定义控件
|
41 |
|
42 |
|
43 | <input type="text" u-meta='{"type":"string", "data":"head", "field":"billnumber"}' />
|
44 |
|
45 |
|
46 | 在普通 HTML 中使用kero语法将在指定DOM上创建控件,并与数据模型关联。一旦创建了关联,控件 将与数据模型同步。每当修改了数据,控件便相应地更新,修改了控件,数据模型也会相应的更新.
|
47 |
|
48 | 扩展控件时可以通过数据模型对数据进行获取&监听和修改
|
49 |
|
50 | - 数据模型可变
|
51 |
|
52 | 数据格式可变使得无缝的数据修改称为可能, kero负责把不同控件的数据集中高效地组织并处理,视图层的控件会订阅数据模型及数据的变更,当数据变化时通知相应组件更新,并在客户端维护一份包含所有数据的数据缓存
|
53 |
|
54 | ![](/assets/static/img/kero/overview.png)
|
55 |
|
56 | - 基于元数据的服务器端
|
57 |
|
58 | 在服务器端,我们通过数据模型中的描述将iuap 元数据与底层的数据操作联系起来。
|
59 |
|
60 | iUAP元数据组件遵循元数据设计规范。基于元数据的定义,该组件提供了对数据的增删改查,数据表扩展以及关联关系查询等功能。同时提供热点数据缓存,数据变更日志等功能。
|
61 |
|
62 | ## Kero定位
|
63 |
|
64 | Kero依托基于 [MVVM](mvvm.html) 架构的 [Knockout](./knockout.html) 类库,实现了将NeoUI控件库自由进行数据绑定的前端类库。主要解决问题:
|
65 |
|
66 | - 提供NeoUI完整样式,解决页面UE风格一致的问题
|
67 | - 提供了数据模型,实现数据与UI双向绑定,构建数据驱动型页面。解决具有复杂交互的页面开发问题。
|
68 | - 依托NeoUI控件库,给开发者带来一站式完整前端解决方案
|
69 |
|
70 | ## Kero优势
|
71 |
|
72 | - **兼容IE8以上的主要浏览器**:IE 8+、Firefox、Chrome、safari
|
73 | - **完善的控件体系**:包含常用控件,见[NeoUI](../neoui/index.html),支持多端适配。
|
74 | - **声明式绑定**:使用简明易读的语法很容易地将模型数据关联到DOM元素上
|
75 | - **双向数据绑定**:模型与UI之间的双向自动更新
|
76 | - **多维数据模型**:解决了字段关联、主子数据、主子孙等多维数据模型的绑定问题。
|
77 |
|
78 | ## Kero设计理念
|
79 |
|
80 | ### **UI控件**
|
81 |
|
82 | UI控件遵循iUAP Design设计规范,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。
|
83 |
|
84 | UI控件的使用,采用了类似bootstrap的用法,通过定义class名称来声明控件,如按钮控件的定义:
|
85 |
|
86 | ```html
|
87 | <button class="u-button">BUTTON</button>
|
88 | ```
|
89 |
|
90 | 开发者不需要通过js代码创建控件,简单易用,详见[NeoUI](../neoui/index.html)。
|
91 |
|
92 | ### **模型结构**
|
93 |
|
94 | #### 数据模型
|
95 |
|
96 | 数据模型主要是对MVVM架构中的Model层做增强处理。主要功能有:
|
97 |
|
98 | - 以行、列的形式对数据做存储,并对外暴露一批增删改查的API,方便开发者对页面数据的处理,而且所有开发者之间做到统一,减少出错概率。
|
99 | - 数据增加状态标识新增或修改,方便开发者使用。
|
100 | - 具有分页缓存能力,可在前台处理分页(非必要情况下,不推荐前台分页)。
|
101 | - 具有事件触发器,把数据变化触发出去,供开发者监听使用。
|
102 |
|
103 | #### 控件模型
|
104 |
|
105 | 控件模型是为解决复杂交互页面中,业务逻辑对数据存在一系列处理需求而设计的。用来简化开发者对相关逻辑的开发。比如:数据的必填、数据的各种校验、数据的显示格式等。
|
106 |
|
107 | 控件模型与UI和数据模型之间的关系表现为:
|
108 |
|
109 | ![](/assets/static/img/kero/mvvm.png)
|
110 |
|
111 | 在一般的场景中,数据模型可以直接与UI进行数据绑定。当有数据处理需求时,可以通过控件模型来处理UI和数据模型之间的数据通信。控件模型在处理数据的同时,会进行相关业务逻辑的处理。
|
112 |
|
113 |
|
114 |
|