目前用vue开发后台管理系统项目已经有一阵子了，在elementUI组件库的加持下，开发管理后台管理页面还是比较轻松的，无非就是el-table渲染个列表、el-form提交个表单等等。但是就是这么简单的事情，仍然在有一些稍微复杂一点的列表页面就会出现1000+行的.vue文件。里面有100+行的data属性字段 500+行的methods方法，了解data和methods关系去理清业务逻辑简直不要太头疼。如何在vue组件或者说在前端项目中简化、拆分业务逻辑是一个比较重要的问题。
angular中的服务
angular 是我一直想去学习的框架。在我在angular官网了解基本情况后，我发现了一个好东西，那就是服务这个概念。
Angular 把组件和服务区分开，以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。
理想情况下，组件的工作只管用户体验，而不用顾及其它。 它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些模型的概念）的中介者
有了这个服务的这个概念之后，我可以将vue组件中和页面渲染无关的代码块全部移动到服务层中。
组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。 通过在不同的环境中注入同一种服务的不同提供商，你还可以让你的应用更具适应性。
之前项目中的组件从初始化开始执行整个流程，接口返回数据都是基本的原始数据，大部分无法用于数据绑定的数据，需要我们在组件里面进行数据验证和转换。还有一种情况是上传表单，表单的数据结构基本不是接口需要的格式，还需要组件对表单字段进行转换， 这两个过程中的所有代码其实对于组件来说都是无意义的，应该全部迁移到服务层中。vue组件应直接从服务层获取获取数据绑定的数据
vue中的服务层
angular通过依赖注入的方式为组件提供服务，vue中可通过mixins 方式来设计服务层，为什么不用vuex 来设计服务层呢,angular中有这样一句话
依赖不一定是服务 —— 它还可能是函数或值。
虽然vuex可以为整个vue项目提供各种函数级别的服务，但是去无法提供独立的某个值，vuex中的state 是所有组件的共享状态，是牵一发而动全身的设计。 而组件从服务中需要的值都是要求完全独立的值，而mixins 混入为每个vue组件提供的data是互不影响的。再者说vuex的state状态是为了和组件页面强绑定的，而服务仅应该提供组件需要的值和方法等。
vue中服务的优点
- 极大的简化组件复杂度。组件只负责从服务层获取数据、渲染数据和跳转路由等与页面相关的工作，复杂度降低意味这bug会很少。
- 服务层中的业务逻辑更加纯粹。可能仅是一些方法和数据，完全与vue组件解耦。
- 方便单元测试。服务层脱离组件，针对服务层中函数和类进行单元测试会很简单。如果组件复杂度很低的话，就基本不需要对组件进行单元测试。
- 组件可以设计适合页面的数据结构，不受接口字段影响。试想一下如果一个接口的字段变更，我们要做的是将所有关于这个接口的所有组件都要进行字段调整。有了服务层，我们只要调整相关的服务层即可。
网友评论