MVC架构
为什么要关注架构？
- 架构
就像房子一样，软件也需要一个结构: 这是我们组织代码的方式；
- 可维护性
项目永远没有终点！我们需要能够在未来轻松地对其进行修改。
- 可扩展性
我们还需要可以轻松的添加新功能
在构建完美的架构时，我们有以下几种选择：
- 自定义架构（比如Mapty项目）：我们可以根据项目的具体需求，设计并实现一个完全自定义的架构。这种方式提供了最大的灵活性，但同时也需要更多的开发事件和资源来确保架构的稳定性和可维护性；
- 使用成熟的架构模式（如MVC、MVP、Flux等）：这些架构模式已经被广泛验证，能够提供良好的结构化和模块化。使用这些模式可以加快开发速度，减少错误，并且更容易维护和扩展；
- 使用框架（比如React、VUE、Angular、Svelte等）：这些前端框架提供了丰富的功能和工具，能够极大地简化开发过程。它们通常内置了最佳实践和架构模式，使得开发者可以专注于业务逻辑的实现，而不必过多担心底层架构的设计。选择哪种方式取决于项目的具体需求、团队的技能水平以及事件和资源的限制。无论选择哪种方式，目标都是构建一个可扩展、可维护且高效的架构；
任何架构的组成部分
- 业务逻辑
- 解决实际业务问题的代码；
- 与企业做什么和需要什么直接相关
- 例如： 发送消息、存储交易、计算税费、用于身份验证等等；
- 状态
- 实质上存储有关应用程序的所有数据；
- 应该是"单一事实来源"；
- UI应与状态保持同步；
- 存在状态库，例如Redux、MobX;
- HTTP库
- 负责发送和接受AJAX请求；
- 在实际应用中虽然不是必须的，但是几乎总是必要的；
- 应用逻辑（ROUTER）
- 只关注应用程序本身实现的代码；
- 处理导航和UI事件；
- 表示逻辑（UI层）
- 关注应用程序可见部分的代码；
- 本质上显示应用程序的状态；
模型-视图-控制器（MVC）架构
- MODEL
- 业务逻辑
- 状态
- HTTP库
- CONTROLLER
- 应用逻辑
- 模型和视图之间的桥梁（两者彼此不知晓）；
- 处理UI事件并将任务分派给模型和视图；
- view
- 表示逻辑
工作流程
- 用户与view交互（比如点击按钮）。
- View将用户操作传递给Controller。
- Controller处理请求，调用Model更新数据或执行逻辑。
- Model更新数据并返回结果给Controller.
- Controller更新View以反映新的数据状态。
- 用户看到更新后的View
MVC实现（仅用于食谱展示）
