深入理解iuap design-12-情定kero

Question

深入理解iuap design-12-情定kero

GuoYongfeng opened this issue 8 years ago · 1 comments

GuoYongfeng commented 8 years ago

Answer 1 · 2016-08-20T03:22:08.000Z

背景介绍

构建大型企业级应用的痛点：

复杂单据
控件复杂,不断扩展
数据格式不固定,运行时动态调整

Kero如何解决这些问题

数据模型可描述。

kero 使用了描述性的代码风格定义数据模型。数据被存储在ViewModel中,通过数据模型进行访问和修改。

var viewModel = {
    head : new u.DataTable({
        meta: {
            'pk_org': {
                'required': true,
                'associations': {
                    "pk_org": "name"
                },
                'associationMeta': 'uap.org'
            },
            'billnumber': {
                'precision': 2,
                'required': true,
                'maxLength': 50
            }
        }
    })
}

统一可扩展的控件描述

kero使用了描述性的风格来定义控件
```
<input type="text" u-meta='{"type":"string", "data":"head", "field":"billnumber"}' />
```
在普通 HTML 中使用kero语法将在指定DOM上创建控件,并与数据模型关联。一旦创建了关联，控件将与数据模型同步。每当修改了数据，控件便相应地更新,修改了控件,数据模型也会相应的更新.
数据模型可变

数据格式可变使得无缝的数据修改称为可能， kero负责把不同控件的数据集中高效地组织并处理，视图层的控件会订阅数据模型及数据的变更，当数据变化时通知相应组件更新，并在客户端维护一份包含所有数据的数据缓存

Kero定位

Kero依托基于 MVVM 架构的 Knockout 类库，实现了将NeoUI控件库自由进行数据绑定的前端类库。主要解决问题：

提供NeoUI完整样式，解决页面UE风格一致的问题
提供了数据模型，实现数据与UI双向绑定，构建数据驱动型页面。解决具有复杂交互的页面开发问题。
依托NeoUI控件库，给开发者带来一站式完整前端解决方案

Kero设计理念

数据模型

数据模型主要是对MVVM架构中的Model层做增强处理。主要功能有：
- 以行、列的形式对数据做存储，并对外暴露一批增删改查的API，方便开发者对页面数据的处理，而且所有开发者之间做到统一，减少出错概率。
- 数据增加状态标识新增或修改，方便开发者使用。
- 具有分页缓存能力，可在前台处理分页(非必要情况下，不推荐前台分页)。
- 具有事件触发器，把数据变化触发出去，供开发者监听使用。
控件模型

控件模型是为解决复杂交互页面中，业务逻辑对数据存在一系列处理需求而设计的。用来简化开发者对相关逻辑的开发。比如：数据的必填、数据的各种校验、数据的显示格式等。

起步

引入Kero文件及相关依赖

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Kero Getting Started</title>
</head>
<body>

 <script src="http://design.yyuap.com/static/jquery/jquery-1.9.1.min.js"></script>
 <!--引入knockout依赖-->
 <script src="http://design.yyuap.com/static/knockout/knockout-3.2.0.debug.js"></script>
 <!--引入核心js文件-->
 <script src="http://design.yyuap.com/static/uui/latest/js/u.js"></script>
</body>
</html>

兼容IE8

如需兼容IE8,需要在引入其他JS文件之前加载u-polyfill.js

<!--[if lte IE 8]>
 <script src="http://design.yyuap.com/static/uui/latest/js/u-polyfill.js"></script>
<![endif]-->

快速上手:绑定数据，实现hello world

// JS
var app,viewModel;

/**
* `viewModel = {...}`创建数据模型
* `dt1` 创建名为`dt1`的`u.DataTable`数据集
* `f1` 创建名为`f1`的字段，为`dt1`数据集的一个子集
*/
viewModel = {
   dt1: new u.DataTable({
       meta:{
           f1:{
               type:'string',
               maxLength:12
           }
       }
   })
};

/**
* `app = u.createApp({...})`,页面初始化，创建框架服务
* `el` 指定服务对应的顶层DOM
* `setValue`进行赋值操作
*/
app = u.createApp({
   el:'body',
   model:viewModel
});

var r = viewModel.dt1.createEmptyRow();
r.setValue('f1','Hello World');

/**
* getValue 获取字段对应的值
*/
var demoDiv = document.getElementById('demo_div');
var dtVal = viewModel.dt1.getValue('f1');
demoDiv.innerHTML = dtVal;

<!-- HTML -->
<div id="demo_div"></div>

背景介绍

Kero定位

Kero设计理念

起步

API及示例