Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lulusir/clean-js
一个包含状态库、IOC容器的辅助库,帮助你在在react和vue中管理状态, 简单, 轻量, 方便测试;
https://github.com/lulusir/clean-js
clean-architecture dependency-injection ioc-container presenter react state-management typescript vue
Last synced: about 2 months ago
JSON representation
一个包含状态库、IOC容器的辅助库,帮助你在在react和vue中管理状态, 简单, 轻量, 方便测试;
- Host: GitHub
- URL: https://github.com/lulusir/clean-js
- Owner: lulusir
- Created: 2022-02-07T10:52:17.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-10T09:26:36.000Z (almost 2 years ago)
- Last Synced: 2024-03-14T23:50:31.411Z (9 months ago)
- Topics: clean-architecture, dependency-injection, ioc-container, presenter, react, state-management, typescript, vue
- Language: TypeScript
- Homepage: https://lulusir.github.io/clean-js
- Size: 3.6 MB
- Stars: 23
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
@clean-js/presenter
![NPM version](https://img.shields.io/npm/v/@clean-js/presenter.svg?style=flat)
![Gzip size](https://img.badgesize.io/https:/unpkg.com/@clean-js/presenter/dist/index.js?label=gzip%20size&compression=gzip)
![GitHub](https://img.shields.io/npm/l/@clean-js/presenter)[Docs](https://lulusir.github.io/clean-js/)
目的
为了进一步实现整洁架构,使用 mvp 的方式组织你的前端代码,让项目更加清晰
- ViewState,一般是要在界面上显示需要的数据,或者临时数据
- View,一般是 react,vue 之类的视图层,它显示数据,并将事件绑定到 Presenter
- Presenter, 提供方法和 ViewState 给到 View
- service 实现业务逻辑, 为Presenter提供服务# 快速上手
## install
```
npm install @clean-js/presenter @clean-js/react-presenter --save
```or
```
yarn add @clean-js/presenter @clean-js/react-presenter
```## Presenter
```typescript
import { Presenter, injectable } from '@clean-js/presenter';interface IViewState {
loading: boolean;
name: string;
}@injectable()
export class NamePresenter extends Presenter {
constructor() {
super();
this.state = {
loading: false,
name: 'lujs',
};
}changeName() {
this.setState((s) => {
s.name += '!';
});
}
}
```## View
```typescript | pure
import React from 'react';import { usePresenter } from '@clean-js/react-presenter';
import { NamePresenter } from './presenter';const Name = () => {
const { presenter, state } = usePresenter(NamePresenter);
return (
name: {state.name}
{
presenter.changeName();
}}
>
hi
);
};export default Name;
```## tsconfig.json
设置 tsconfig.json
```json
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
```
### 在umi4中使用
需要在.umirc中添加插件“babel-plugin-transform-typescript-metadata”
```
import { defineConfig } from 'umi';export default defineConfig({
npmClient: 'pnpm',
extraBabelPlugins: ['babel-plugin-transform-typescript-metadata'],
});```