MVP分层架构的实际项目运用：避免概念化，直面现实

2024-02-12 02:54:19

MVP分层架构是一种软件开发中的常见架构模式，众所周知，它将应用程序分为模型（Model）、视图（View）和表示层（Presenter）三个部分。这种架构模式具有良好的可测试性、可维护性和可扩展性，但我们不能止步于概念，是时候抛开泛泛的论调，将目光聚焦在现实应用的落地上，窥见技术演进更微观的一面。

#1 亲身实践，拆解真实场景下的MVP分层架构

要充分理解MVP分层架构，切勿止步于理论的表象，而是要以身作则，融入实际的项目之中，在此环节，本文将以一个真实项目作为切入点，细致拆解MVP分层架构的具体实现，让你从概念过渡到实践，脱离空中楼阁般的漂浮。

项目概览：某个电商网站的前端重构之旅

这场重构的出发点是彻底革新架构，重整代码结构，让开发流程变得更加顺畅与可维护，对于这种大型且复杂的前端项目，MVP分层架构无疑是首选。

项目概况：

页面数量：约200个
开发人员数量：4人
项目周期：6个月
代码量：约20万行

模块剖析：分层架构的具体落实

以登录模块作为案例，具体剖析MVP分层架构的具体落实方式。

模型层（Model）：

Model层主要负责业务逻辑，如用户认证、数据获取等。

// 登录模块的Model层
class LoginModel {
  async login(username, password) {
    // 调用接口，验证用户登录信息
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username,
        password
      })
    });
    return res.json();
  }
}

视图层（View）：

View层主要负责页面的展示，如登录表单、登录结果展示等。

// 登录模块的View层
const LoginView = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const loginModel = new LoginModel();
    const result = await loginModel.login(username, password);
    // 根据登录结果，展示相应的提示信息
  };

  return (
    <div className="login-container">
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="用户名" value={username} onChange={(e) => setUsername(e.target.value)} />
        <input type="password" placeholder="密码" value={password} onChange={(e) => setPassword(e.target.value)} />
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

表示层（Presenter）：

Presenter层主要负责协调Model层和View层，处理用户交互并更新视图。

// 登录模块的Presenter层
const LoginPresenter = () => {
  const loginModel = new LoginModel();
  const [loginState, setLoginState] = useState({
    isLoading: false,
    errorMessage: ''
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoginState({
      isLoading: true,
      errorMessage: ''
    });
    const result = await loginModel.login(username, password);
    setLoginState({
      isLoading: false,
      errorMessage: result.error || ''
    });
  };

  return (
    <LoginView 
      isLoading={loginState.isLoading} 
      errorMessage={loginState.errorMessage} 
      onSubmit={handleSubmit} 
    />
  );
};