系统分析与设计作业 - lesson13

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

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

框架 framework，框架是特定语言和技术的架构应用解决方案，某种应用的半成品，就是一组组件，供你选用完成你自己的系统。框架一般是成熟的，不断升级的软件，可以直接用的工具（例如 .NET）。软件框架是面向领域（如 ERP、计算领域等）的、可复用的“半成品”软件，它实现了该领域的共性部分，并提供了一些定义良好的可变点以保证灵活性和可扩展性。也就是说软件框架是领域分析结果的软件化，是领域内最终应用的模板，是特定语言和技术的架构应用解决方案。

二者的联系在于，框架可以根据架构来设计，比如 Vue 是根据 MVVM 架构设计的前端框架。借用 StackOverflow 的图片（如下），我们可以根据架构（图纸）来用框架（工具）搭建东西。

框架

架构

2 结合我的项目

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

image

2.2 三层架构给开发者带来的便利

• 开发人员可以只关注整个结构中的其中某一层。在我们的项目中，后台同学可以在约定好接口形式后同时分别进行开发数据库、API接口
• 可以很容易的用新的实现来替换原有层次的实现。我们目前重构了多次代码，但是因为三层架构的设计，各个部分重构的时候只要保持接口不变，就不会影响到其他层
• 扩展性强。不同层负责不同的层面。例如我们的项目中，前端和后台就是分开开发的，只需要约定好接口形式即可，视图层和持久化层分离
• 安全性高。用户端只能通过逻辑层来访问数据层，减少了入口点，把很多危险的系统功能都屏蔽了

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

Flux

简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

Flux将一个应用分成四个部分。

• View： 视图层
• Action：视图层发出的消息（比如mouseClick）
• Dispatcher：Dispatcher 的作用是将 Action 派发到 Store，执行回调函数
• Store：用来存放应用的状态，一旦发生变动，就提醒 Views 要更新页面

image

Flux 的最大特点，就是数据的"单向流动"。

1. 用户访问 View
2. View 发出用户的 Action
3. Dispatcher 收到 Action，要求 Store 进行相应的更新
4. Store 更新后，发出一个"change"事件
5. View 收到"change"事件后，更新页面

上面过程中，数据总是"单向流动"，任何相邻的部分都不会发生数据的"双向流动"。这保证了流程的清晰。

Vuex

由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex。

Vuex 包含以下几个部分

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

image

完整的 Vuex 动作是这样的：

1. Components dispatch（调用）Actions
2. Actions commit 对应的 Mutations
3. 只有 Mutations 可以操作 State 中的状态数据，状态一改变，组件中就重新渲染