系统分析与设计HW8

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

软件架构

定义：软件架构是一个系统的草图。软件架构描述的对象是直接构成系统的抽象组件。各个组件之间的连接则明确和相对细致地描述组件之间的通讯。在实现阶段，这些抽象组件被细化为实际的组件，比如具体某个类或者对象。在面向对象领域中，组件之间的连接通常用接口来实现。

软件框架：

定义：软件框架是将代码放到一个我们看不到的容器中，规定架构。当我们使用的时候直接调用，是特定语言和技术的架构应用解决方案。框架是可被应用开发者定制的应用骨架。一个框架是一个可复用的设计构件,通常以构件库的形式出现，一般是不断升级的可重用设计，表现为一组抽象类以及其实例之间协作的方法。

区别

软件架构是一个抽象的概念，高于实际代码，是诞于设计阶段的系统蓝图，描述部件的功能、部件与部件之间的协作，从而大致地描述出系统完整的运作流程。它并不是实际系统代码的一部分。
而框架是一个具体的概念，是实际代码的一部分。框架是针对系统设计的一个“半成品”软件，使用特定的语言和技术描述了架构中各部件功能的具体实现。

联系

2.以你的项目为案例

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

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

分离了关注点，各部分的开发者只需要关注自己负责模块的实现。

层与层之间分离后，只要接口不发生变化，层内无论如何变化甚至是重构，其他层都不受影响，大大降低了耦合程度。

系统分析与设计HW8

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

VUE

类 Flux 状态管理的官方实现
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex 包含有五个基本的对象：
- state：存储状态。也就是变量；
- getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。
- mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’, 18)。
- actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’)。
- modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。
Vuex数据流的顺序是:
View调用store.commit，提交对应的请求到Store中对应的mutation函数
store改变(vue检测到数据变化自动渲染)

FLUX

Flux是facebook创建，专门用来构建前端框架结构的框架。
Flux包含四个基本对象：
action: 与vuex类似。
dispatcher：dispatcher将action的操作分发到不同的store。
store：管理状态。当store状态更新时，发布一个change事件，通知view更新视图。
view：监听store发布的change事件，获取新数据并提供给它的子视图。
Flux数据流的顺序是:
View发起Action->Action传递到Dispatcher->Dispatcher将通知Store->Store的状态改变通知View进行改变
两者都基于CQRS（命令和查询职责分离），单向数据流动、数据驱动。
vuex将dispatcher和store合并为单独的store，并用state记录不同时间点下store的状态，方便了对状态的管理。且由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可。