點融商城剛建立的時候，業務相對單一，主要負責公司點券和體驗金的兌換。在最初的搭建商城構架的時候，我們使用了當下流行的前端框架 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 前端攻城獅一枚，負責點融商城和社區前端開發，喜歡游泳，騎行，旅游，以及更多大千世界未知的美好事物。
