# ClassX

**Repository Path**: TinyClass/class-x

## Basic Information

- **Project Name**: ClassX
- **Description**: 支持继承和多态的前端状态管理器
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-08-09
- **Last Updated**: 2022-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <atarget="_blank" rel="noopener noreferrer">
    <img width="280" src="./icon.png" alt="Pinia logo">
  </a>
</p>


<br/>
<br/>

# ClassX

> 面向对象的前端状态管理器，提供金融类、表单类等项目的前端数据解决方案

- 完全面向对象，支持继承与多态
- 支持 TypeScript
- 针对数组数据优化设计
- 简单，轻量化
- 千人一面，提供灵活的代码控制功能，保证不同基础的开发人员代码风格完全一致
- 提供模板复用功能，高效复用页面代码
- 面向低代码平台
- UI，逻辑，组件调用逻辑三部分完全分离。组件全生命周期 API 支持

| 包名 | 功能 | 
| :-----| :---- | 
| classx-state | 提供前端状态管理功能，实现UI与业务代码分离 ，提升代码可读性| 
|  | 通过类的继承与多态实现代码复用 | 
|  | 提供前端页面数据缓存功能（keepAlive） | 
|  | 提供前端异步处理功能 | 
|  | 提供前端跨组件异步通信功能 | 
|  | 提供数组数据排序，筛选等处理功能 | 
| classx-form | 实现在状态管理器中维护表单数据，提供与表单UI双向绑定功能，提供表单数据校验，交互，获取等API | 
|  | 通过配置自动渲染表单，从此告别复杂的表单UI开发 | 
|  | 实现UI，业务逻辑，表单组件调用逻辑分离，提升代码可读性 | 
|  | 支持 class 或者 JSON 数据进行表单渲染，灵活适配业务场景 | 
|  | 代码控制，保证代码风格千人一面 | 
|  | 自动注册的组件化系统，实现对组件调用的全生命周期覆盖 | 
| classx-antd-form | 提供基于Antd的classx-form表单接入方案 | 
| classx-react | 提供基于react的classx-state接入方案，vue方案开发中 | 

---
<br/>
<br/>
<p align="center">
  <a href="https://www.zbotol.com/" target="_blank" rel="noopener noreferrer">
    <img width="580" src="./lowcode.jpg" alt="Pinia logo">
  </a>
</p>
<br/>
<br/>
## 安装

```bash
yarn add CassX
# or with npm
npm install CassX
```

建议搭配 ClassX-Form 和 ClassX-React 使用:

```bash
npm install ClassX-Form ClassX-React
```

## 使用

### 状态管理器使用

你可以创建任意个 State，并且单独或者全局的使用它们

```tsx
import { ClassX } from "classx-state";
//提供一个state，对应的页面获取此state后将其实例化单独使用
export class State extends ClassX {
  onCreate() {
    setInterval(() => {
      this.reset();
      this.$updateView();
    }, 1000);
  }
  secondsPassed = 0;
  increase() {
    this.secondsPassed += 1;
  }
  reset() {
    this.secondsPassed = 0;
  }
}
//提供一个全局使用的state
export const GlobalState = new State();
```

`connect` 提供一个高阶组件，将 state 数据浅拷贝后通过 props 注入到 UI 中。如果你希望用户返回某个页面依旧保持之前操作状态，connect 的 keepAlive 属性请传 true。

```tsx
function Page(props: any) {
  return (
    <>
      <Button onClick={() => props.dispatch(null, "reset")}>
        reset: {props.secondsPassed}
      </Button>
      <Button onClick={() => props.dispatch({ secondsPassed: 0 })}>
        reset: {props.secondsPassed}
      </Button>
      <Button onClick={() => props.dispatch(null, "increase")}>
        Seconds passed: {props.secondsPassed}
      </Button>
    </>
  );
}
export default connect("/demo", State, true)(Page);
```

异步处理：

```tsx
import { ClassX } from "classx-state";

export class UserState extends ClassX {
  name;
  password;
  async login(from) {
    let rst = await httpPost({
      url: "/login",
      data: { name: this.name, password: this.password, ...from },
    });
  }
}
function LoginPage(props: any) {
  return (
    <>
      <Button
        loading={props.buttonLoding}
        onClick={() => props.dispatch({ from: "PC" }, "login", "buttonLoding")}
      >
        登录
      </Button>
    </>
  );
}
export default connect("/login", UserState)(LoginPage);
```
跨组件之间简单的异步通讯：

```tsx
import { ClassX } from "classx-state";

export class List extends ClassX {
  async queryList(params){
    let rst = await httpPost(params)
  }
}
export class Filter extends ClassX {
  get data(){
    return {}
  }
  async click(){
    await this.dispatch("ListUniqueName",this.data,"queryList")//dispatch为异步通信,在List组件加载前会一直保持pending状态
  }
}

```

### 表单使用

你可以在 State 中创建任意个 表单

```tsx
import { ClassX } from 'classx-state';
import connect from 'classx-react';
import { setForm, setConfig, setRule } from 'classx-form';
import NForm from 'classx-antd-form';
import { Input } from 'antd';
export class State extends ClassX {
  @setForm('loginForm') //注册一个名为'loginForm'的表单
  @setConfig(function() {
    return {
      required: true, //必填
      label: '用户名',
      ele: 'Input', //全局注册的组件
      props: { //组件对应的props
        placeHolder: '请输入用户名',
      },
    };
  })
  name = 'newUser';

  @setForm('loginForm')
  @setConfig(function() {
    return {
      required: true, //必填
      label: '密码',
      ele: <Input placeHolder='请输入用户名'/>, //严格模式将只能够使用全局组件以加强对代码的控制
    };
  })
  @setRule([
    function() {
      if (!v) {
        throw new DBError('密码不能为空');
      }
    },
    { required: true },
  ])
  @setPack(function(v){
    return {password:Md5.encode(v)}
  })
  password;

  async login(from) {
    let rst = await httpPost({
      url: '/login',
      data: { this.config('loginForm').getAllNeedParams(), ...from },
    });
  }
}
```

在 UI 中绑定这个表单

```tsx
//绑定loginForm表单，对应的布局和UI会通过组件会自动生成
function Page(props: any) {
  return (
    <Form bind="loginForm">
      <Button onClick={() => props.dispatch({ from: "PC" }, "login")}>
        登录
      </Button>
    </Form>
  );
}
export default connect("/login", State, false)(Page);
```

使用 JSON 渲染表单

```tsx
function Page(props) {
  let form = Form.useForm()
  let [config, setConfig] = useState()

  useEffect(() => {
    setTimeout(() => {
      setConfig({
        name: {
          config: {
            label: '用户名',
            ele: 'Input'
          }
        },
        password: {
          config: {
            label: '密码',
            ele: 'Input'
          }
        }
      })

    }, 5000)
  }, [])
  let login = ()=>{
    let rst = await httpPost({
      url: '/login',
      data: { props.config('loginForm').getAllNeedParams(), ...from },
    });
  }
  return (
    <Form formConfig={config} form={form}>
      <Button onClick={login}>
        登录
      </Button>
    </Form>
  );
}
export default connect('/login', State, false)(Page);
```

文件名以`.component.tsx`结尾的组件会自动注册为全局组件。

```tsx
//Input.component.tsx
import React from "react";
import { Input as AInput } from "antd";
const Input = (props) => {
  return <AInput {...props} />;
};
export { Input };
```

提供组件的全生命周期 API 支持，同一组件相关代码写在一起，维护轻而易举。

```tsx
  @setForm('loginForm') //注册一个名为'loginForm'的表单
  @reset()//清空所有配置,在继承时使用
  @setConfig(()=>{//组件常规配置
    return {
      required: true, //必填
      label: '用户名',
      ele: 'Input', //全局注册的组件
      props: { //组件对应的props
        placeHolder: '请输入用户名',
      },
    };
  })
  @setRule([(v)=>{//async-validator功能已集成，完成测试后将推送到开源版本
    if(v === 'admin'){
      throw new DBError("非法用户名")
    }
  }])
  @setInit(({userName})=>{//调用form.init(data)时将调用此方法给组件赋值,同时去除校验状态
    return userName
  })
  @setPack(({userName})=>{//提交数据时将调用此方法对组件值进行处理
    return {name:}
  })
  @setWatch(function(v){//监听用户输入
    this.password=''//若需要this指向当前class示例,则不能使用箭头函数
  })
  @setHide(function(){//隐藏此组件
    this.loginType === 'phone'//若需要this指向当前class示例,则不能使用箭头函数
  })//隐藏
  name = 'newUser';
```

### 高级使用

代码复用与控制：开发一套报表模板以复用 UI 和部分逻辑代码并达到代码控制的效果

```tsx
class InitState extends db {
  // url
  // dataSource
  // title
  async getList(p) {
    if (this.config("form").checkAll()) {
      let rst = await $Manager
        .httpPost({
          url: this.url,
          data: { ...this._config("form").getAllNeedParams(), ...p },
        })
        .catch((error) => {
          message.error(error.msg || "错误");
        });
      if (rst) {
        if (Array.isArray(rst.data)) {
          this.dataSource = rst.data;
        } else {
          Object.keys(rst.data).forEach((key) => {
            if (Array.isArray(rst.data[key])) {
              this.dataSource = rst.data[key];
            }
          });
        }
        this.$updateView();
      }

      return rst;
    }
  }
}

function Page(props) {
  return (
    <Fragment>
      <Title>{props.title}</Title>
      <Content>
        <Form bind="form">
          <ButtonContent>
            <Button
              type="primary"
              onClick={async () => {
                props.dispatch(null, "getList");
              }}
            >
              查询
            </Button>
          </ButtonContent>
        </Form>
        <Table columns={props.columns} dataSource={props.dataSource} />
      </Content>
    </Fragment>
  );
}
export { InitState, Page };
```

使用模板。修饰器中的表单数据也支持继承和多态

```tsx
class MIndexPage extends IndexPage {
  url = "/list";
  title = "用户列表";

  @setForm("form")
  @setConfig(function() {
    return {
      label: "姓名",
      ele: "Input",
    };
  })
  name;

  columns = [
    {
      title: "姓名",
      align: "center",
      dataIndex: "name",
    },
    {
      title: "年龄",
      align: "center",
      dataIndex: "age",
    },
  ];
}
export default connect("/list", MIndexPage)(Page);
```

状态管理器数组相关使用

```tsx
import { CassX } from "CassX";
//班级
class Class extends CassX {
  name;
  num;
  fun() {
    //指向父亲节点
    this.$PARENT;
    //指向根节点
    this.$THIS;
  }
}

//学校
class School extends CassX {
  //可以添加任意属性,这些属性都可以在VIEW层通过props获取到
  name;
  location;
  constructor() {
    //给表新建一个对象
    let mClass = new Class();
    //将对象保存到库
    this.save(mClass);
    //删除这个对象
    this.delete(mClass);
    //返回一个数组,数组中数据可以直接在UI层使用
    let list = this.selectFrom("Class").findAll(true);
    //返回一个数组,数组中对象都是被实例化的Class,不可以直接在UI层使用
    list = this.selectFrom("Class").findAll();
    //排序
    list = this.selectFrom("Class")
      .orderBy("num", false)
      .findAll();
    //条件查找
    list = this.selectFrom("Class")
      .where('name == "一班"')
      .orderBy("num", false)
      .findAll();
    //返回一个对象
    let theFirst = this.selectFrom("Class").findFirst(true);
    let theLast = this.selectFrom("Class").findLast(false);
  }
}
```

## License

[MIT](http://opensource.org/licenses/MIT)
© 2022 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHub
Pricing
API
Training
Blog
About