2018/6/3

问题：

• 描述软件架构与框架之间的区别与联系
• 以你的项目为案例

1. 绘制三层架构模型图，细致到分区
2. 结合你程序的结构，从程序员角度说明三层架构给开发者带来的便利

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

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

框架的定义：

框架（framework）是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法，另一种定义为，框架是可被应用开发者定制的应用骨架，前者是从应用方面而后者是从墓地的方面给出的定义。

框架是一个可服用的设计构件，通常以构件库的形式出现，但构架库只是框架的一个重要部分，框架的关键在于框架内对象间的的交互模式和控制流模式。

架构的定义：

软件架构（software architecture）是一系列相关的抽象模式，用于指导大型软件系统各个方面的设计，是一个系统的草图，描述的对象是直接构成系统的抽象组件。各个组件之间的连接明确细致的描述组件之间的通讯。

区别：

框架是一种特殊的软件，它并不能提供完整无缺的解决方案，而是为你构建解决方案提供良好的基础。框架是半成品。典型地，框架是系统或子系统的半成品；框架中的服务可以被最终应用系统直接调用，而框架中的扩展点是供应用开发人员定制的“可变化点”

软件架构不是软件，而是关于软件如何设计的重要决策。软件架构决策涉及到如何将软件系统分解成不同的部分、各部分之间的静态结构关系和动态交互关系等。经过完整的开发过程之后，这些架构决策将体现在最终开发出的软件系统中；当然，引入软件框架之后，整个开发过程变成了“分两步走”，而架构决策往往会体现在框架之中。

联系：

软件架构是引导如何设计软件框架的重要决策。它决定了软件系统如何划分，在一定程度上描述了被划分的各个部分之间的静态、动态关系。软件架构的决策体现在软件系统的框架中。

2.以你的项目为案例

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

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

• 开发人员可以只关注整个结构中的其中某一层；
• 可以很容易的用新的实现来替换原有层次的实现；
• 可以降低层与层之间的依赖；
• 有利于标准化；
• 利于各层逻辑的复用。
• 扩展性强。不同层负责不同的层面
• 安全性高。用户端只能通过逻辑层来访问数据层，减少了入口点，把很多危险的系统功能都屏蔽了。
• 项目结构更清楚，分工更明确，有利于后期的维护和升级

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

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

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

Flux使用数据层保存整个应用的状态，它的角色有点像 MVC 架构之中的Model 。

VUE使用Vuex来管理所有组件状态，每一个Vuex应用就是一个store，在store中包含组件中的共享状态state和改变状态的方法mutations。当开发大型单页应用（SPA），会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态的情况，此时就应该考虑使用Vuex，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。这样不管在何处改变状态，Vuex都会通知使用该状态的组件做出相应修改。

异：

• Flux数据流的顺序是：View发起Action->Action传递到Dispatcher->Dispatcher将通知Store->Store的状态改变通知View进行改变
• Vuex数据流的顺序是：View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变生成新的state(vue检测到数据变化自动渲染)
• Flux是一种前端状态管理架构思想，专门解决软件的结构问题。基于Flux的设计思想，出现了一批前端状态管理框架，其中包括了Vuex。Vuex是Flux的一个实现。
• 在Vuex中本身就内置State对象，对仓库的管理更加明确。
• Vuex有自动渲染的功能，所以不需要更新。
• Vuex多个组件调用一个状态，将原来组建与组件之间的状态传递改成组件与仓库之间的传递。

同：

• 都通过store来存储状态。
• 都提供数据驱动、可组合搭建的视图组件。
• Flux最早提出作为对传统前端MVC的一种改进，Vuex基于Flux并且吸收了它的一些特点。