- 描述软件架构与框架之间的区别与联系
- 以你的项目为案例
- 绘制三层架构模型图，细致到分区
- 结合你程序的结构，从程序员角度说明三层架构给开发者带来的便利
- 研究VUE与Flux状态管理的异同
描述软件架构与框架之间的区别与联系
软件架构就是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。
框架是特定语言和技术的架构应用解决方案，是一组组件，供开发者选用来完成自己的系统。
- 软件架构和框架的呈现形式不同。体系结构的呈现形式是一个设计规约，而框架则是程序代码。
软件架构和框架的目的不同。体系结构的首要目的大多是指导一个软件系统的实施与开发；而框架的首要目的是为复用。因此，一个框架可有其体系结构，用于指导该框架的开发，反之不然。
在Stack Overflow上面，有位老哥做了一个很好的比喻（链接点这里），框架（Framework）好比盖房子用的工具，而架构（Architecture）就是造房子的图纸。
以你的项目为案例，绘制三层架构模型图，细致到分区
结合你程序的结构，从程序员角度说明三层架构给开发者带来的便利
- 层次清晰，每个层次都提供了接口定义
- 降低了代码之间层与层的依赖关系
- 有利于各层代码逻辑的复用
- 接口设计需要符合扩展开发，对修改关闭的原则，增强了系统的安全性
- 开发人员可以只关注整个结构中的其中某一层
- 可以很容易的用新的实现来替换原有层次的实现
- 有利于标准化
- 结构更加明确
- 在后期维护的时候，极大地降低了维护成本和维护时间
研究VUE与Flux状态管理的异同
vuex：
参考：Vuex
vuex的核心：
- state：存放多个组件共享的状态（数据）
- mutations：存放更改state里状态的方法，用于改变状态，是唯一一个改变状态的属性
- getters：将state中某个状态进行过滤，然后获取新的状态，类似vue中的computed
- actions：用于调用事件动作，并传递给mutation
- modules：主要用来拆分state
Flux:
参考：Flux架构入门教程，flux，redux，vuex状态集管理工具之间的区别
Flux是一种架构思想，专门解决软件的结构问题。Flux将一个应用分成四个部分：
- View：视图层
- Action（动作）：视图层发出的消息（如mouseClic）
- Dispatcher（派发器）：用来接收Actions、执行回调函数
- Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面
Flux的最大特点，就是数据的单向流动
- 用户访问View
- View发出用户的Action
- Dispatcher收到Action，要求Store进行相应的更新
- Store更新后，发出一个“change”事件
- View收到“change”事件后，更新页面
异：数据流的顺序不同
flux分为四层，View、Action、Dispatcher和store
View =》 Action =》Dispatcher =》Store返回 =》Dispatcher =》View（接收的方法：Register）
vuex核心分为state、mutations、getters、actions、modules
vueComment =》（dispatch）Action =》（commit）=》Mutations -》（mutate）State =》（render）VueComponent
同：
- vuex基于Flux架构，思想相同
- 都是为了解决软件的结构问题