编者按:本文作者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团Web前端开发资深专家,360前端技术委员会委员、W3C AC代表。
本文源自3月11日作者在公司内部的一次“泛前端分享”,是作者在开发IoT智能设备联动场景项目过程中的一些经验总结。文中代码可以视作伪代码,不包含任何涉及真实项目的内容。
Vuex是开发复杂Vue应用的必备工具,为跨组件共享数据提供了适合Vue自身的解决方案。关于Vuex的详细介绍,推荐阅读官网文档:https://vuex.vuejs.org/。
Vuex调用接口的三个阶段,总体上体现了项目在迭代中不断优化调用逻辑、重新组织代码和抽象实现细节的过程。
关注点分离及可维护代码:关注点分离(SoC,Separation of Concerns)是软件架构设计的一个重要原则,体现为以单一职责为目标来划分模块,通过将逻辑归类、分组,创建出相互独立但又有机统一的代码实体。关注点分离的代码,其模块职责清晰、关系明确,便于排错和维护,是代码整体可维护性的基础。
橄榄形接口与同构映射器:橄榄形接口比喻调用服务从整体上入口和出口小,但内涵逻辑丰富。这种接口对外部收敛,简单、直接,但将主要逻辑封装在了内部,便于集中处理请求和响应。同构映射(isomorphism mapping)是一个数学概念,在这里借用于形容自定义的、与Vuex辅助方法一致的服务映射。
响应归一及三级错误处理:响应的归一化(normaliztion)的目的是统一不同服务端接口返回数据的格式,以及请求错误的响应格式。三级错误处理分别是网络错误、服务错误和接口错误,这些错误可以作为响应以归一化的形式返回,也可以同步设置到Vuex的状态对象,成为响应式数据实时体现在界面组件上。
创建演示环境
qvk是一个集成现代前端工程化最佳实践的通用Web开发环境,可用于开发传统C/S架构的Web应用、SPA(单页应用)、H5(App内嵌页)等。
qvk初始版集成以下Web框架和打包工具。
ThinkJS:基于MVC模式的简单易用、功能强大的Node.js开发框架。
Vue.js:渐进式JavaScript框架,前端组件式开发主流选择。
Webpack:目前使用最广泛的前端资源模块打包工具。
用法
1. 拷贝代码
git clone git@github.com:qqvk/qvk.git
2. 安装依赖、初始化及启动服务
cd qvk // 进入项目目录 npm install // 安装依赖 npm run init // 初始化 npm start // 启动项目
第一阶段:关注点分离及可维护代码
上图左侧为Vuex架构,右侧是演示环境代码模块的依赖关系。以下是相应文件的代码,主要是lib/service1.js和store/store1.js,代表第一阶段:
lib/endpoints.js
/** * 默认导出API配置 */ export default { // 1. 取得用户设备列表 getUserDeviceList: { method: 'GET', endpoint: '/getUserDeviceList'}, // 2. 取得用户场景列表 getUserSceneList: { method: 'GET', endpoint: '/getUserSeceneList' }, // 3. 查询场景 getUserScene: { method: 'GET', endpoint: '/getUserScene' } } /** * 命名导出全局环境 */ export const ENV = 'https://the-service-address'