1. MVC（Model-View-Controller）

概念介紹： MVC是一種軟件架構(gòu)模式，用于組織應(yīng)用程序的代碼和邏輯。它將應(yīng)用程序分為三個核心部分：模型（Model）、視圖（View）和控制器（Controller）。

• **模型（Model）**負責處理應(yīng)用程序的數(shù)據(jù)邏輯和狀態(tài)。它表示應(yīng)用程序的數(shù)據(jù)源，并封裝了與數(shù)據(jù)相關(guān)的操作和業(yè)務(wù)邏輯。
• **視圖（View）**負責向用戶展示數(shù)據(jù)并接收用戶的輸入。它是用戶界面的可視化呈現(xiàn)，可以是頁面、窗口或其他用戶交互形式。
• **控制器（Controller）**充當模型和視圖之間的協(xié)調(diào)者。它接收用戶的輸入，更新模型的數(shù)據(jù)，然后將更新后的數(shù)據(jù)反映到視圖上。

舉例說明： 以一個簡單的登錄頁面為例，實現(xiàn)MVC架構(gòu)的方式如下：

1. 模型（Model）：定義一個User類，包含用戶名和密碼等屬性，并提供相應(yīng)的方法來驗證用戶的登錄信息。

class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }

  isValid() {
    // 驗證用戶名和密碼是否正確
    // 返回 true 或 false
  }
}

1. 視圖（View）：創(chuàng)建一個HTML表單，包含用戶名和密碼的輸入框以及登錄按鈕。

<form>
  <input type="text" id="username">
  <input type="password" id="password">
  <button id="loginButton">登錄</button>
</form>

1. 控制器（Controller）：在JavaScript中，監(jiān)聽登錄按鈕的點擊事件，并根據(jù)用戶輸入的值創(chuàng)建一個User對象，并調(diào)用User對象的驗證方法。

document.getElementById('loginButton').addEventListener('click', function() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;

  var user = new User(username, password);

  if (user.isValid()) {
    // 登錄成功，進行相關(guān)操作
  } else {
    // 登錄失敗，顯示錯誤信息
  }
});

通過以上示例，可以看到模型負責處理數(shù)據(jù)邏輯，視圖負責展示界面，控制器協(xié)調(diào)兩者之間的交互，實現(xiàn)了關(guān)注點分離、代碼復用和可維護性。

2. MVP（Model-View-Presenter）

概念介紹： MVP是一種軟件架構(gòu)模式，是MVC模式的一個變體，旨在更好地分離視圖（View）和模型（Model）并引入一個介于它們之間的主持人（Presenter）。

• **模型（Model）**與MVC模式中的模型類似，負責處理應(yīng)用程序的數(shù)據(jù)邏輯和狀態(tài)。
• **視圖（View）**是用戶界面的可視化呈現(xiàn)，負責向用戶展示數(shù)據(jù)并接收用戶的輸入。
• **主持人（Presenter）**是視圖和模型之間的橋梁。它接收用戶的輸入，并根據(jù)需要更新模型的數(shù)據(jù)。它還監(jiān)聽模型的變化，將變化的數(shù)據(jù)更新到視圖上。

舉例說明： 以一個待辦事項列表應(yīng)用為例，實現(xiàn)MVP架構(gòu)的方式如下：

1. 模型（Model）：定義一個TodoList類，包含存儲待辦事項的數(shù)組，并提供添加、刪除和更新等操作。

class TodoList {
  constructor() {
    this.todos = [];
  }

  add(todo) {
    // 添加待辦事項
  }

  remove(todo) {
    // 刪除待辦事項
  }

  update(todo) {
    // 更新待辦事項
  }
}

1. 視圖（View）：創(chuàng)建一個界面，展示待辦事項列表，并提供添加、刪除和更新等操作的用戶界面。

<div>
  <ul id="todoList">
    <!-- 待辦事項列表 -->
  </ul>

  <input type="text" id="todoInput">
  <button id="addButton">添加</button>
</div>

1. 主持人（Presenter）：在JavaScript中，監(jiān)聽視圖的事件，例如點擊添加按鈕、選擇列表項等，并根據(jù)用戶的操作更新模型的數(shù)據(jù)或刷新視圖。

class TodoPresenter {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // 監(jiān)聽視圖的事件
    this.view.on('add', this.addTodo.bind(this));
    this.view.on('remove', this.removeTodo.bind(this));
    this.view.on('update', this.updateTodo.bind(this));

    // 初始化視圖和模型
    this.view.render();
  }

  addTodo() {
    // 處理添加待辦事項的邏輯，更新模型并刷新視圖
  }

  removeTodo() {
    // 處理刪除待辦事項的邏輯，更新模型并刷新視圖
  }

  updateTodo() {
    // 處理更新待辦事項的邏輯，更新模型并刷新視圖
  }
}

通過以上示例，主持人充當了模型和視圖之間的協(xié)調(diào)者，將用戶界面的操作轉(zhuǎn)化為對模型的操作，并及時更新視圖。

3. MVVM（Model-View-ViewModel）

概念介紹： MVVM是一種軟件架構(gòu)模式，旨在進一步解耦視圖（View）和模型（Model）并引入一個獨立于視圖的視圖模型（ViewModel）。

• **模型（Model）**與MVC和MVP模式中的模型類似，負責處理應(yīng)用程序的數(shù)據(jù)邏輯和狀態(tài)。
• **視圖（View）**是用戶界面的可視化呈現(xiàn)，負責向用戶展示數(shù)據(jù)并接收用戶的輸入。
• **視圖模型（ViewModel）**是視圖的抽象表示，它包含了與視圖相關(guān)的業(yè)務(wù)邏輯和狀態(tài)。它將視圖需要展示的數(shù)據(jù)從模型中獲取并進行適配和轉(zhuǎn)換，供視圖使用。

舉例說明： 以一個商品列表應(yīng)用為例，實現(xiàn)MVVM架構(gòu)的方式如下：

1. 模型（Model）：定義一個Product類，包含商品的名稱、價格等屬性，并提供相應(yīng)的方法來獲取和操作商品數(shù)據(jù)。

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  // 獲取商品數(shù)據(jù)的方法
}

1. 視圖（View）：創(chuàng)建一個HTML頁面，并使用綁定語法將視圖的元素與視圖模型關(guān)聯(lián)起來。

<div>
  <ul>
    <li v-for="product in products">{{ product.name }} - {{ product.price }}</li>
  </ul>
</div>

1. 視圖模型（ViewModel）：使用框架或庫提供的功能，將視圖模型綁定到視圖上，并提供適配和轉(zhuǎn)換數(shù)據(jù)的方法。

var viewModel = {
  products: [] // 商品數(shù)據(jù)
};

// 將視圖模型綁定到視圖上
bind(viewModel, document.getElementById('app'));

// 適配和轉(zhuǎn)換數(shù)據(jù)的方法
// 可以從模型獲取數(shù)據(jù)，并進行必要的處理

通過以上示例，視圖模型負責管理視圖所需的數(shù)據(jù)，并將數(shù)據(jù)從模型中獲取后進行適配和轉(zhuǎn)換，然后傳遞給視圖進行展示。視圖的變化會反映到視圖模型上，從而實現(xiàn)雙向數(shù)據(jù)綁定。文章來源地址http://www.zghlxwxcb.cn/news/detail-502427.html

到了這里，關(guān)于【軟件架構(gòu)模式——MVC、MVP、MVVM】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！