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