前端技术堆栈

目前项目采用的技术堆栈

一. 开发环境的构建

前端(PC和H5)的开发环境是以nodejs为驱动, 使用express.js搭配webpack构建的集编译，代码分离，打包压缩，静态资源服务，热更新，反向代理等功能的前后端分离模式。

二. 客户端代码的选型

项目使用react系列编写，包含react，react-router，redux，react-redux，immutable，antd。

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