一、 描述软件架构与框架之间的区别与联系
软件架构:软件架构是一个系统的草图。软件架构描述的对象是直接构成系统的抽象组件。各个组件之间的连接则明确和相对细致地描述组件之间的通讯。设计软件架构就是把系统分解为一些部件,描述这些部件的职责及它们之间的协作行为。
软件框架:软件框架是面向领域(如 ERP、计算领域等)的、可复用的“半成品”软件,它实现了该领域的共性部分,并提供了一些定义良好的可变点以保证灵活性和可扩展性。也就是说软件框架是领域分析结果的软件化,是领域内最终应用的模板,是特定语言和技术的架构应用解决方案。
区别
- 框架是一种特殊的软件,它并不能提供完整无缺的解决方案,而是为你构建解决方案提供良好的基础。
- 架构不是软件,而是关于软件如何设计的重要策略。软件架构就是把系统分解为一些部件,描述这些部件的职责及它们之间的协作行为。
联系
- 软件架构是引导如何设计软件框架的重要决策,架构决策往往会体现在框架之中。
- 框架是一种或多种架构的组合的实现
架构是理论性的,是一种设计模式,框架可以由架构来设计与实现,用StackOverflow上的一组图片来说明就是,可以按照图纸(架构,Architecture),用工具(框架,Framework)打造木材,搭建房子。
二、 以你的项目为案例
1. 绘制三层架构模型图,细致到分区
2. 结合你程序的结构,从程序员角度说明三层架构给开发者带来的便利
- 并行开发支持。利用前后端分离,实现并行开发。三层架构可以减少耦合和依赖性、增强内聚性、提高潜在的复用性并且使概念更加清晰。
- 在我的项目中,三层之间的耦合度很小,不同层的开发者之间专注于本层开发,独立于其他层的开发,提高了开发和调试的效率。我们前端进行了两次迭代,但是因为三层架构的设计,前端重构的时候只要保持接口不变,就不会影响到其余两层的设计。
- 每个层或包的职责是清晰的,模块化并可扩展的。
- 依据层次,可以划分不同的分工,开发人员可以只关注所开发层的功能需求。
- 每个层涉及的技术是明确的。
- 在我的项目中,不同层的开发人员不需要知道其他层的技术细节,只需要擅长本层的技术即可。
- 将复杂的数据流进行拆分,提高了开发效率。
- 在我的项目中,显示菜单、处理订单和存储交易数据分别位于表示层、业务层和持久化层中,数据流得到了有效组织和管理,分别且由不同层的开发人员考虑,从而大大减少了开发复杂度。
3. 研究 VUE 与 Flux 状态管理的异同
(1)同
Flux 是一种架构思想,专门解决软件的结构问题。它跟MVC 架构是同一类东西,但是更加简单和清晰。VUE 和 Flux 的状态管理都是基于 Flux 思想的有效实现,通过对数据流进行严格管理来规范数据在 Web 应用中流动方式的框架。
(2)异
Flux
Flux将一个应用分成四个部分:
- View:视图层,React 组件,这一层可以看作 controller-views,作为视图同时响应用户交互
- Action(动作):视图层发出的消息(比如mouseClick)
- Dispatcher(派发器):用来接收Actions、执行回调函数,处理动作分发,维护 Store 之间的依赖关系
- Store(数据层):数据和逻辑部分,用来存放应用的状态,一旦发生变动,就提醒Views要更新页面
完整的 Flux 动作是这样的:
- 用户访问 View
- View 发出用户的 Action
- Dispatcher 收到 Action,要求 Store 进行相应的更新
- Store 更新后,发出一个”change”事件
- View 收到
change
事件后,更新页面
数据流的运作机制:
View -> Action -> Dispatcher -> Store -> View
Vuex
VUE 的状态管理由vuex实现。状态管理包含以下几部分:
- store:相当于一个容器,;它是响应式的在全局都可以使用它;一个应用里只能定义一个 store 容器。
- state:这里对象里面放了各种状态(变量)
- mutations:唯一用来修改状态的回调函数,但不支持异步操作
- actions:包含异步操作,提交 mutations 来修改状态
- getters:在组件内部获取 store 中状态的函数
- module:将 store 分割成不同的模块
完整的 Vuex 动作是这样的:
- Components( 组件 )中 methods 里面一个方法 dispatch (调用)Actions
- Actions 然后 commit 对应的Mutations
- 只有 Mutations 可以操作 State 中的状态数据,状态一改变,组件中就重新渲染。
数据流的运作机制:
Components -> Actions -> Mutations -> state -> Components
可以发现最大的区别是Vuex把action
细分成了action
和mutation
,分别应对异步场景和同步场景,由store
自身充当dispatcher
(负责注册/分发action
/(mutation
))