前端开发中,MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern)。vue就是采用MVVM的渐进式JavaScript框架。本文以vue为例,说明部分业务场景下使用开发方案需考虑的问题。
使用vue开发项目,模块化和组件化设计项目是最核心的。
模块化:基于当前业务,把常用的功能、控件、样式、基础类、第三方库、权限等公共部分进行抽离封装,分别进行管理。
组件化:根据不同的业务场景分割不同的组件模块,大的业务场景下设置大组件模块,大组件模块根据内部业务功能分割成小组件模块,小组件模块根据具体功能分割成功能单位组件。
对于业务比较复杂的页面采用组件+mixin的方式,将页面每一部分的小功能模块设计为组件。然后把需要在父级处理的逻辑和数据使用mixin混入到父级组件中,父级组件内部只书写组件本身逻辑。
对于一些枚举型常量,设置单独的模块,并根据这些常量设置对应的filter。此处可以考虑将这些filter注册到全局。
可以考虑接口返回数据和页面数据在一定程度上进行解耦合,即获取到接口数据后根据自己的需求重新构造成为自己设计的数据参数结构,构造时检测接口返回数据的正确性并构建为自己需要的数据。这样可以避免因为接口修改而导致页面逻辑直接抛出错误的问题。
对于常用的接口数据,可以考虑存放在全局,用vuex进行集中管理,例如当前用户信息、用户权限等。