系统分析与设计作业8

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

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

  软件架构是有关关键整体结构与组件的抽象描述,用于指导大型软件系统各个方面的设计.架构模式是特定领域常见问题的解决方案

  框架是特定语言和技术的架构应用解决方案

  区别:

• 软件架构用相对抽象的概念来描述部件的功能, 部件与部件之间的协作,从而大致地描述出系统完整的运作流程.他不是实际系统的一部分
• 框架是具体的概念,是实际系统的一部分.框架使用特定语言和技术描述了架构中各部件功能的具体实现.通过使用框架,让开发者聚焦于业务逻辑代码而不是技术实现

  联系:

• 软件架构指导了框架的设计,框架通过特定的语言和技术实现了软件架构
• 框架可能集合了一种或多种软件架构.

2. 以你的项目为案例

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

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

        1、开发人员可以只关注整个结构中的其中某一层；
　　2、可以很容易的用新的实现来替换原有层次的实现；
　　3、可以降低层与层之间的依赖；
　　4、有利于标准化；

　　5、利于各层逻辑的复用。

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

VUE

• vue使用vuex作为状态管理工具。vuex是Flux思想的实现之一，并在Flux的基础上做了改进。
• 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()。

Flux

• Flux是facebook创建，专门用来构建前端框架结构的框架。
• Flux包含四个基本对象：
  • action: 与vuex类似。
  • dispatcher：dispatcher将action的操作分发到不同的store。
  • store：管理状态。当store状态更新时，发布一个change事件，通知view更新视图。
  • view：监听store发布的change事件，获取新数据并提供给它的子视图。
• 实际上vuex是基于Flux的实现，框架基本相同，但vuex将dispatcher和store合并为单独的store，并用state记录不同时间点下store的状态，方便了对状态的管理。且由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可。