目前项目采用的技术堆栈
一. 开发环境的构建
前端(PC和H5)的开发环境是以nodejs为驱动, 使用express.js搭配webpack构建的集编译,代码分离,打包压缩,静态资源服务,热更新,反向代理等功能的前后端分离模式。
二. 客户端代码的选型
项目使用react系列编写,包含react,react-router,redux,react-redux,immutable,antd。
- 入口:
利用浏览器的history(或者hash) api,与后端约定唯一的入口页面,配置react-redux-router采取前端路由的方式。使用webpack的代码分离机制,实现动态加载。 - 数据与视图:
以react的思维模式,结合使用immutable.js,引入了不可变数据结构,实现数据单向流,驱动视图以状态机的形式改变。 - 展现层:
PC端以css的盒模型为基础,选取蚂蚁金服的一套基础组件antd,通过自定义样式主题,生成一套超客ui组件。H5端以css的flex响应式模型为基础,选取antd-mobile组件,引进了淘宝的高清方案,匹配不同的设备渲染策略。 - 与服务端交互层
数据以json格式传输,与后端约定固定的返回格式和字段。
PC端校验登录信息分为两个方面,在页面中使用timer实时监测cookie的改变,在ajax中使用自定义包装过的库,登录信息失效时,接口会返回错误状态码和跳转登录链接。H5端的ajax请求包装了Request URL,统一缀上了url的token。
开发环境中使用反向代理,端口号可配置为对接的后端开发人员。