商城前端构架演变之路

点融商城刚建立的时候，业务相对单一，主要负责公司点券和体验金的兑换。在最初的搭建商城构架的时候，我们使用了当下流行的前端框架 React 作为地基，但在上层分支上处理相对混乱。

主要表现在HTML 的 DOM 元素被 React 的 Virtual Dom 和  jQuery 同时操作，导致维护一个 state 的状态变得不是那么的顺利。

MVC 框架

为了使前端构架能够更灵活适用于商城的业务扩展，我们就对前端架构进行重构：

地基 View层：React

js 语法：ES6

语法编译：Babel

数据流操作：Reflux

样式使用：Stylus

页面跳转：React-router

打包上线：Gulp+Webpack

为了保持 state 状态的统一管理，既有 React 何须 jQuery。

项目框架结构如下：

1）运行机制：

npm 通过加载 package.json 必要的 modules，解决项目的依赖关系。通过 npm start 运行本地服务器，通过 webpack 加载 app 目录下main.js，通过 react-router 路由配置解析，进入到商城首页。

2）编译机制：

babel 使用 babylon 解析器对源代码进行解析并生成 AST(Abstract Syntax Tree 抽象语法树)，接着通过 babel-traverse 对解析出来的 AST 进行遍历，解析出来整个树的 path，读取对应的元素，并应用到 transformers 插件上，生成变换后的 AST，最后使用 babel-generator 将 AST 树转码成最终编译后的代码串。

3）数据流向：

当用户进来网站的时候，React action 匹配用户当前的操作，通过 API 获取后端提供的信息。Dispatcher 作为事件调度中心，Reflux 模型的中心枢纽，管理着Reflux 应用中的所有数据流，它本质上是 Store 的回调注册，每个 Store 注册它自己并提供一个回调函数。

当 Dispatcher 响应 Action 时，通过已注册的回调函数，将 Action 提供的数据信息发送给应用中所有的 Store，React views 把后台的数据渲染后呈现给用户，完成整个闭环的数据流。

MVC 模型进化过程：

1）单页面

2）业务线

3）点融商城 MVC模型

商城业务线

商城主业务的转型：原来单一业务的券功能转变为通过投资免费获取商品的模式，将券功能移动到二级分类里。

这一模式的改版，是业务模式的探索与尝试。MVP 商城之所以能快速革故鼎新，得益于重构的能适应复杂业务线的前端架构，以及团队间的精诚协作与共同努力。

商城的首页也是经过不断更迭的页面 UI 优化调整，形成了用户舒适的视觉体验，并且在功能上给到用户更多的选择，如：提供商品搜索、心愿单、爱大牌、每日上新、商品多属性选择等等。

结语

商城作为一个通过“商品”来连接用户生活场景的模块，通过利息前置的方式，来帮助用户梳理理财与消费之间的关系。既解决了用户强烈的投资需求，同时也满足了实际的消费需求。

商城前端之路漫漫其修远兮，我们都在上下而求索的道路上。未来，我们会不断革新，打造贴近用户体验的全新商城模式。

本文作者：乔乐（点融黑帮），Social Team 前端攻城狮一枚，负责点融商城和社区前端开发，喜欢游泳，骑行，旅游，以及更多大千世界未知的美好事物。