@lujs/mvp

Docs

整洁架构

• 独立于框架。支持 vue react
• 可测试。 业务逻辑方便测试
• 独立于 UI。
• 依赖单向，外层依赖内层，内层不知道外层

来源于 Bob 大叔的一篇文章

目的

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

• Model，一般是要在界面上显示需要的数据，或者临时数据

• View，一般是 react，vue 之类的视图层，它显示数据，并将事件绑定到 Presenter

• Presenter, 提供方法和 Model 给到 View

• service 实现我们的业务逻辑

快速上手

install

npm install @lujs/mvp @lujs/react-mvp-adaptor --save

or

yarn add @lujs/mvp @lujs/react-mvp-adaptor

Model

import { Model } from '@lujs/mvp';

interface IViewState {
  loading: boolean;
  name: string
}

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

Presenter

import { Presenter, injectable } from '@lujs/mvp';
@injectable()
export class NamePresenter extends Presenter<NameModel> {
  constructor(protected readonly model: OrderModel) {
    super();
  }

  changeName() {
    this.setState('aha'); // api of set model state
    this.updateView(); // api of update view
  }
}

View

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

export default Name;

tsconfig.json

设置 tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}