架构建模

• 描述软件架构与框架之间的区别与联系
• 以你的项目为案例
  • 绘制三层架构模型图，细致到分区
  • 结合你程序的结构，从程序员角度说明三层架构给开发者带来的便利
• 研究 VUE 与 Flux 状态管理的异同

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

架构是Architecture，框架是Framework。框架使用者使用项目内规定的架构进行开发。

框架通常是对底层操作、常用方法进行系统的封装，使开发者专注于高一层的程序逻辑；而架构则是认为规定好的、确定程序的不同部分，以及各部分之间如何协作的概念。

以自己的项目为例，绘制三层架构模型图

主要需要实现的是Service、Model、Entity三层，以及相关的Logger。 Service定义业务逻辑，Model定义数据操作（CRUD），Entity定义实体，与底层database-engine相关联。

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

• 自顶向下逐步求精，简化思考过程
• 编码时只需思考当前模块的实现，不占用过多脑内存
• 代码结构清晰、易读、易于维护
• 方便进行新功能的拓展（往往只需在Service层加入新的业务逻辑函数）

VUE与Flux状态管理的异同

以下内容摘自 知乎：浅谈前端状态管理(上/下) 作者：吴双 Clarence。本意是学习并完成作业，如有侵权请联系我，将第一时间删除。

Flux

这应该是Flux的“比较官方(by Facebook)”的实现。核心是Dispatcher，通过Dispatcher，用户可以注册需要的action类型，对不同的action注册对应的callback，以及trigger action并传递payload数据。

const dispatcher = new Dispatcher()
const store = {books: []}
​
dispatcher.register((payload) => {
  if (payload.actionType === 'add-book') {
    store.books.push(payload.newBook)
  }
})
dispatcher.dispatch({
  actionType: 'add-book',
  newBook: {
    name: 'cookbook'
  }
})

可以看到，只使用Flux提供的Dispatcher也可以完成最基本的状态管理。不过推荐使用 Flux 提供的一些基础类来构建 store，这些基础类提供了一些方法可供调用，能更好的扩展数据层的功能。

Redux

Redux 实际上相当于 Reduce + Flux，和 Flux 相同，Redux 也需要你维护一个数据层来表现应用的状态，而不同点在于 Redux 不允许对数据层进行修改，只允许你通过一个 Action 对象来描述需要做的变更。在 Redux 中，去掉了 Dispatcher，转而使用一个纯函数来代替，这个纯函数接收原 state tree 和 action 作为参数，并生成一个新的 state tree 代替原来的。而这个所谓的纯函数，就是 Redux 中的重要概念 —— Reducer。

在函数式编程中，Reduce 操作的意思是通过遍历一个集合中的元素并依次将前一次的运算结果代入下一次运算，并得到最终的产物，在 Redux 中，reducer 通过合并计算旧 state 和 action 并得到一个新 state 则反映了这样的过程。

因此，Redux 和 Flux 的第二个区别则是 Redux 不会修改任何一个 state，而是用新生成的 state 去代替旧的。这实际上是应用了不可变数据（Immutable Data），在 reducer 中直接修改原 state 是被禁止的，Facebook 的 Immutable 库可以帮助你使用不可变数据，例如构建一个可以在 Redux 中使用的 Store。

Vuex

• 和 Redux 中使用不可变数据来表示 state 不同，Vuex 中没有 reducer 来生成全新的 state 来替换旧的 state，Vuex 中的 state 是可以被修改的。这么做的原因和 Vue 的运行机制有关系，Vue 基于 ES5 中的 getter/setter 来实现视图和数据的双向绑定，因此 Vuex 中 state 的变更可以通过 setter 通知到视图中对应的指令来实现视图更新。
• 在 Vuex 中也可以记录每次 state 改变的具体内容，state 的变更可被记录与追踪。例如 Vue 的官方调试工具中就集成了 Vuex 的调试工具，使用起来和 Redux 的调试工具很相似，都可以根据某次变更的 state 记录实现视图快照。
• Vuex 中的 state 是可修改的，而修改 state 的方式不是通过 actions，而是通过 mutations。一个 mutation 是由一个 type 和与其对应的 handler 构成的，type 是一个字符串类型用以作为 key 去识别具体的某个 mutation，handler 则是对 state 实际进行变更的函数。
• Vuex 中的 action 也是 store 的组成部分，它可以被看成是连接视图与 state 的桥梁，它会被视图调用，并由它来调用 mutation handler，向 mutation 传入 payload。