返回

经典简化: 使用Javascript模拟MVC实现点餐程序

见解分享

MVC模型简介

MVC（模型-视图-控制器）是一种设计模式，它将软件系统分为三个部分：模型、视图和控制器。

  • 模型是应用程序的核心，它负责维护数据和应用程序逻辑。
  • 视图负责显示数据并允许用户与应用程序进行交互。
  • 控制器负责处理用户输入并将其传递给模型。

MVC模式的优点在于它提高了代码的可维护性和可复用性。

使用JavaScript模拟MVC实现点餐程序

现在，让我们开始使用JavaScript模拟MVC实现点餐程序。

1. 定义模型

首先，我们需要定义模型。模型负责维护数据和应用程序逻辑。在本例中，我们将使用一个简单的对象来表示模型。

var model = {
  menuItems: [
    { id: 1, name: "Pizza", price: 10 },
    { id: 2, name: "Burger", price: 12 },
    { id: 3, name: "Salad", price: 8 }
  ],
  orders: []
};

2. 定义视图

接下来，我们需要定义视图。视图负责显示数据并允许用户与应用程序进行交互。在本例中，我们将使用一个简单的HTML页面来表示视图。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>菜单</h1>
  <ul>
    <% for (var i = 0; i < model.menuItems.length; i++) { %>
      <li><%= model.menuItems[i].name %> - <%= model.menuItems[i].price %></li>
    <% } %>
  </ul>

  <h1>订单</h1>
  <ul>
    <% for (var i = 0; i < model.orders.length; i++) { %>
      <li><%= model.orders[i].name %> - <%= model.orders[i].price %></li>
    <% } %>
  </ul>

  <form>
    <label for="item">菜品:</label>
    <select id="item">
      <% for (var i = 0; i < model.menuItems.length; i++) { %>
        <option value="<%= model.menuItems[i].id %>"><%= model.menuItems[i].name %></option>
      <% } %>
    </select>

    <label for="quantity">数量:</label>
    <input type="number" id="quantity" value="1">

    <input type="submit" value="添加">
  </form>
</body>
</html>

3. 定义控制器

最后，我们需要定义控制器。控制器负责处理用户输入并将其传递给模型。在本例中，我们将使用一个简单的JavaScript函数来表示控制器。

function controller() {
  // 获取用户输入
  var item = document.getElementById("item").value;
  var quantity = document.getElementById("quantity").value;

  // 将用户输入添加到模型
  model.orders.push({
    id: item,
    name: model.menuItems[item - 1].name,
    price: model.menuItems[item - 1].price * quantity
  });

  // 更新视图
  render();
}

function render() {
  // 渲染视图
  var html = "";

  // 渲染菜单
  html += "<h1>菜单</h1>";
  html += "<ul>";
  for (var i = 0; i < model.menuItems.length; i++) {
    html += "<li>" + model.menuItems[i].name + " - " + model.menuItems[i].price + "</li>";
  }
  html += "</ul>";

  // 渲染订单
  html += "<h1>订单</h1>";
  html += "<ul>";
  for (var i = 0; i < model.orders.length; i++) {
    html += "<li>" + model.orders[i].name + " - " + model.orders[i].price + "</li>";
  }
  html += "</ul>";

  // 更新视图
  document.getElementById("app").innerHTML = html;
}

// 添加事件监听器
document.getElementById("form").addEventListener("submit", controller);

// 渲染视图
render();

4. 运行程序

现在，我们可以运行程序了。只需将以下代码复制到一个文本文件中，并将其另存为“index.html”。然后，使用浏览器打开“index.html”文件即可。

<!DOCTYPE html>
<html>
<head>
  
  <script src="script.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

总结

在本文中，我们学习了如何使用JavaScript模拟MVC实现点餐程序。这种设计模式可以帮助我们提高代码的可维护性和可复用性。我希望您能从本文中学到一些有用的东西。