Skip to content

一个包含状态库、IOC容器的辅助库,帮助你在在react和vue中管理状态, 简单, 轻量, 方便测试;

Notifications You must be signed in to change notification settings

lulusir/clean-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@clean-js/presenter

NPM version Gzip size GitHub

Docs

目的

为了进一步实现整洁架构,使用 mvp 的方式组织你的前端代码,让项目更加清晰

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

import { Presenter, injectable } from '@clean-js/presenter';

interface IViewState {
  loading: boolean;
  name: string;
}

@injectable()
export class NamePresenter extends Presenter<IViewState> {
  constructor() {
    super();
    this.state = {
      loading: false,
      name: 'lujs',
    };
  }

  changeName() {
    this.setState((s) => {
      s.name += '!';
    });
  }
}

View

import React from 'react';

import { usePresenter } from '@clean-js/react-presenter';
import { NamePresenter } from './presenter';

const Name = () => {
  const { presenter, state } = usePresenter(NamePresenter);
  return (
    <div>
      <p>name: {state.name}</p>
      <button
        onClick={() => {
          presenter.changeName();
        }}
      >
        hi
      </button>
    </div>
  );
};

export default Name;

tsconfig.json

设置 tsconfig.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'],
});

About

一个包含状态库、IOC容器的辅助库,帮助你在在react和vue中管理状态, 简单, 轻量, 方便测试;

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published