应用架构图的解析(如何画应用架构图)

一、 应用架构图的概述

应用架构图通常是以图形的形式，直观地呈现出一个应用系统的体系结构，它能够将系统中各个部分及其关系呈现出来，同时也可通过其结构和组成部分来直观地了解整个系统的运行方式和机制。这种系统的图形化呈现对于维护、优化系统是非常有益的。

我们通过构建一种完整的、清晰的架构图，可以向其他的开发者和利益者们传递到系统的构架和关键要素，并帮助他们了解如何更好地使用和维护系统。此外，架构图也能够使得系统的结构变得更加明晰和可靠，从而更有利于构建和维护高质量的软件。

下面介绍在应用架构图中常见的三种架构类型：MVC、MVP和MVVM。

二、MVC（模型-视图-控制器）

MVC是一种设计模式，通常被用于创建Web应用程序，通过分离应用程序的模型、视图和控制器来实现。

MVC的主要优点是分离代码的关注点，使得代码更易于管理和组织。在MVC中，每个组件都有一个特定的目的。模型层包含所有数据和业务逻辑；控制器负责响应请求并调用相关的模型、视图或其他控制器，确保在用户界面（视图）上显示正确的数据；视图层呈现模型和控制器产生的数据和事件，而不负责处理它们。

class Model {
  private data: Object;

  constructor(data: Object) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

class View {
  private model: Model;

  constructor(model: Model) {
    this.model = model;
  }

  render() {
    const data = this.model.getData();
    // render view with data
  }
}

class Controller {
  private model: Model;
  private view: View;

  constructor(model: Model, view: View) {
    this.model = model;
    this.view = view;
  }

  handleData() {
    const data = this.model.getData();
    // handle data
    this.view.render();
  }
}

三、MVP（模型-视图-表示器）

MVP是一种模式，与MVC相似，但有一些重要的差异。

在MVP中，视图层不直接监视模型的状态，而是通过表示器来实现。表示器是视图和模型之间的中介，负责控制流程并确保视图层正确呈现模型数据。

这种模式可以更好地分离表现逻辑与业务逻辑，使代码更具可维护性。同时，也便于单元测试。

class Model {
  private data: Object;

  constructor(data: Object) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

interface View {
  render(data: Object): void;
}

class Presenter {
  private model: Model;
  private view: View;

  constructor(model: Model, view: View) {
    this.model = model;
    this.view = view;
  }

  handleData() {
    const data = this.model.getData();
    // handle data
    this.view.render(data);
  }
}

四、MVVM（模型-视图-视图模型）

MVVM是一个增强版的MVP模式，将视图和视图逻辑（视图模型）分离，以保证视图的独立性。在MVVM模式中，视图模型是接收并处理模型数据的中介，同时支持视图的声明性数据绑定。

这种模式的好处是代码更具可维护性、可复用性和可测试性。视图是完全由视图模型控制的，因此视图模型可以自己测试

class Model {
  private data: Object;

  constructor(data: Object) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

class ViewModel {
  private model: Model;

  constructor(model: Model) {
    this.model = model;
  }

  getData() {
    return this.model.getData();
  }
}

// View Template
const template = `
  
    MVVM Example:
    
  
`;

// View (with data binding)
class View {
  private viewModel: ViewModel;
  private el: HTMLElement;

  constructor(viewModel: ViewModel, el: HTMLElement) {
    this.viewModel = viewModel;
    this.el = el;
    this.bindData();
  }

  private bindData() {
    const bindings = this.el.querySelectorAll('[data-bind]');
    bindings.forEach((binding: Element) => {
      const exp = binding.getAttribute('data-bind');
      binding.innerHTML = this.getVal(exp);
    });
  }

  private getVal(exp: string) {
    const parts = exp.split(':').map((s) => s.trim());
    const prop = parts[1];
    return this.viewModel[prop] || '';
  }
}

// Usage
const model = new Model({ data: 'Hello, MVVM!' });
const viewModel = new ViewModel(model);
const el = document.querySelector('#app');
el.innerHTML = template;
new View(viewModel, el);

五、总结

应用架构图是我们在构建软件时，为了更好地理解系统的整体结构和各个组件的相互关系，而提供的有力工具。无论是MVC，MVP，还是MVVM等多种不同的应用架构模式，都旨在让我们在代码的编写和图形的构建之间建立更紧密的沟通渠道，使我们更加高效地完成开发工作。