大家健康重构报告
背景
当前大家健康项目架构日趋复杂和臃肿。一方面，产品需求更新迭代频繁，导致陈旧和冗余的代码越来越多，但由于各种各样的原因不好删改；另一方面，目前线上存在的一些问题无法在当前架构下优雅地解决，比如组件的使用方法不统一、事件绑定之后会全局监听、自定义事件名冲突、css类名冲突等；此外，由于历史原因，一直没有一个统一的开发规范，导致例如接口管理不统一、事件管理不统一、工具方法不统一等等的问题。这一系列的问题，对后续项目需求迭代、线上质量维护都有非常大的影响。综合考虑了这些情况之后，前端团队在维护线上项目的基础上，对旧的大家健康项目逐步地、渐进式地进行了重构。
经过数个月针对性开发、迁移、自测，目前已经基本平移了大家健康的所有功能。重构后大家健康基于Vue.js，这是一个轻量级的View层MVVM框架，实现对数据的响应式编程；同时，利用了Vue.js的组件化特性，我们规范了组件的封装、通信、和使用方法，让组件复用更加规范和方便；使用vue-router和vuex, 我们解放了对页面路由管理和数据状态管理，无需像之前那样需对这些底层逻辑要自已实现和维护，降低了bug出现的风险；最后，重构后的大家健康为目前以及未来性能优化提供了空间，例如已经实现了的组件代码的按需加载，后续也是目前正在考虑引入例如骨架屏技术、服务器端渲染技术（SSR）和相应框架Nuxt.js。
Vue版本大家健康项目结构
基于vue.js + vue-router + vuex
- 总体的目录结构: 按页面来划分各个业务模块，一些通用的功能逻辑封装成组件，供多个地方调用。将之前各个模块/组件相关的
ejs/js/less文件整合到一个.vue文件里，更加紧凑和直观。 - 所有的api请求统一到一个文件api.js里，方便和后台的接口管理；同时所有工具类的方法统一到help.js。
- 使用vue.js的双向绑定特性，替换了之前几乎所有对DOM的直接操作的逻辑代码，极大降低view成和model的耦合性。
- 引入vue-router，方便所有页面路由的管理；结合webpack的code-splitting功能，实现了vue组件的按需加载；另外，结合vue-router的导航守卫和vue.js的生命周期，实现对一个模块或组件生命周期的精细化控制。
- vuex实现对一些页面模块的数据状态缓存和管理。无需每次到这个页面都需要从后台拉去数据，可以优先显示当前的store的数据，同时进行异步更新加载。
