系统分析与设计第八次作业

一、 描述软件架构与框架之间的区别与联系

软件架构：软件架构是一个系统的草图。软件架构描述的对象是直接构成系统的抽象组件。各个组件之间的连接则明确和相对细致地描述组件之间的通讯。设计软件架构就是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。

软件框架：软件框架是面向领域（如 ERP、计算领域等）的、可复用的“半成品”软件，它实现了该领域的共性部分，并提供了一些定义良好的可变点以保证灵活性和可扩展性。也就是说软件框架是领域分析结果的软件化，是领域内最终应用的模板，是特定语言和技术的架构应用解决方案。

区别

• 框架是一种特殊的软件，它并不能提供完整无缺的解决方案，而是为你构建解决方案提供良好的基础。
• 架构不是软件，而是关于软件如何设计的重要策略。软件架构就是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。

联系

• 软件架构是引导如何设计软件框架的重要决策，架构决策往往会体现在框架之中。
• 框架是一种或多种架构的组合的实现

架构是理论性的，是一种设计模式，框架可以由架构来设计与实现，用StackOverflow上的一组图片来说明就是，可以按照图纸（架构，Architecture），用工具（框架，Framework）打造木材，搭建房子。

二、 以你的项目为案例

1. 绘制三层架构模型图，细致到分区

2. 结合你程序的结构，从程序员角度说明三层架构给开发者带来的便利

• 并行开发支持。利用前后端分离，实现并行开发。三层架构可以减少耦合和依赖性、增强内聚性、提高潜在的复用性并且使概念更加清晰。
  
  • 在我的项目中，三层之间的耦合度很小，不同层的开发者之间专注于本层开发，独立于其他层的开发，提高了开发和调试的效率。我们前端进行了两次迭代，但是因为三层架构的设计，前端重构的时候只要保持接口不变，就不会影响到其余两层的设计。
• 每个层或包的职责是清晰的，模块化并可扩展的。
  
  • 依据层次，可以划分不同的分工，开发人员可以只关注所开发层的功能需求。
• 每个层涉及的技术是明确的。
  
  • 在我的项目中，不同层的开发人员不需要知道其他层的技术细节，只需要擅长本层的技术即可。
• 将复杂的数据流进行拆分，提高了开发效率。
  
  • 在我的项目中，显示菜单、处理订单和存储交易数据分别位于表示层、业务层和持久化层中，数据流得到了有效组织和管理，分别且由不同层的开发人员考虑，从而大大减少了开发复杂度。

3. 研究 VUE 与 Flux 状态管理的异同

（1）同
Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。VUE 和 Flux 的状态管理都是基于 Flux 思想的有效实现，通过对数据流进行严格管理来规范数据在 Web 应用中流动方式的框架。

（2）异
Flux
Flux将一个应用分成四个部分：

• View：视图层，React 组件，这一层可以看作 controller-views，作为视图同时响应用户交互
• Action（动作）：视图层发出的消息（比如mouseClick）
• Dispatcher（派发器）：用来接收Actions、执行回调函数，处理动作分发，维护 Store 之间的依赖关系
• Store（数据层）：数据和逻辑部分，用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

完整的 Flux 动作是这样的：

• 用户访问 View
• View 发出用户的 Action
• Dispatcher 收到 Action，要求 Store 进行相应的更新
• Store 更新后，发出一个”change”事件
• View 收到change事件后，更新页面

数据流的运作机制：

View -> Action -> Dispatcher -> Store -> View

Vuex
VUE 的状态管理由vuex实现。状态管理包含以下几部分：

• store：相当于一个容器，；它是响应式的在全局都可以使用它；一个应用里只能定义一个 store 容器。
• state：这里对象里面放了各种状态（变量）
• mutations：唯一用来修改状态的回调函数，但不支持异步操作
• actions：包含异步操作，提交 mutations 来修改状态
• getters：在组件内部获取 store 中状态的函数
• module：将 store 分割成不同的模块
  

完整的 Vuex 动作是这样的：

• Components( 组件 )中 methods 里面一个方法 dispatch （调用）Actions
• Actions 然后 commit 对应的Mutations
• 只有 Mutations 可以操作 State 中的状态数据，状态一改变，组件中就重新渲染。

数据流的运作机制：

Components -> Actions -> Mutations -> state -> Components

可以发现最大的区别是Vuex把action细分成了action和mutation，分别应对异步场景和同步场景，由store自身充当dispatcher（负责注册/分发action/(mutation)）