医程通

前端技术架构重构方案

At:20210722 version:1.0

方案提要

  1. 改造为大型单页面应用：采用前端路由方案，无需重复加载公用函数
  2. 状态管理：页面间的数据驱动一切由状态管理模块来进行，将视觉层和数据层彻底分离
  3. Scss：采用css超集，更加适合模块化处理，将公共样式表与模块样式分离，再运用打包工具合并为一个文件，兼顾开发效率与运行速度
  4. TypeScript：作为Javascript的超集，加入了静态类型检查，可以在开发过程中检测到错误（更严谨）
  5. 调试与构建：均采用 Vue 官方推荐的工具

大型单页面应用

计划

将医程通平台构建为大型单页面应用。

好处：

  1. 良好的用户体验
  2. 减轻服务端压力
  3. 共用一套后端代码，适配多端

缺点：

  1. 首屏加载速度受影响
  2. 影响 SEO （但医程通不依赖搜索引擎）

Clipboard - 2021-07-21 23.23.14

Vuex4 状态管理

需解决的问题

将视图和数据驱动的状态分离。

  1. 集中管理应用的所有组件的状态
  2. 状态使用可控的方式发生变化
  3. 数据变更也有“状态管理库”通知组件进行页面渲染

Clipboard - 2021-07-21 23.23.52

技术栈

  1. 前端框架：Vue3在新窗口打开
  2. 编程语言：TypeScript
  3. 前端构建工具：Vue-cli-service、Vite2
  4. 代码检查：Eslint
  5. 服务端通信：Axios
  6. 状态管理：Vuex4

项目结构

├── assets                # 静态文件夹
│   └── style
│   └── image
├── App.vue               # 页面文件
├── main.ts               # 项目入口文件
├── shims-vue.d.ts        # 类型定义文件（描述文件）
├── index.html
├── router 							  # 路由文件
├── views 							  # 页面模板文件
├── utils 							  # 工具方法目录
├── api                   # API 请求
│   └── ...
├── components            # 组件文件夹
│   ├── modules.vue
│   └── ...
└── store
    ├── index.ts          # 组装模块并导出 store 的地方
    ├── actions.ts        # 根级别的 action
    ├── mutations.ts      # 根级别的 mutation
    └── modules
        ├── hospital.ts   # 子模块
        └── form.ts       # 子模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Vue-devtools 调试工具

使用浏览器的插件来增强 Vue 框架的开发效率

Vuejs-devtools在新窗口打开

运用 Vuejs-devtools 工具可以直接查看各组件间的数据通信。

Vuejs-devtools

警告

vue2 与 vue3 的开发调试工具相互不兼容，注意区分

前端构建工具 Vite2

  1. 速度：跳过所谓打包的概念，超快的模块热更新机制（HMR）。
  2. 兼容性：原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。
  3. CSS 预处理器支持： Sass 支持

若需要兼顾开发效率和构建后的兼容情况，可使用 Vite2 作为开发调试工具，构建时可选用成熟的 Vue-cli-service(webpack) 进行打包。

需要协助改进

  1. 数据安全保护
  2. 状态管理的规则细节
  3. 单元测试的编写 Nightwatch.js
上次更新:
作者: Aziz-pang