點(diǎn)融商城剛建立的時(shí)候，業(yè)務(wù)相對(duì)單一，主要負(fù)責(zé)公司點(diǎn)券和體驗(yàn)金的兌換。在最初的搭建商城構(gòu)架的時(shí)候，我們使用了當(dāng)下流行的前端框架 React 作為地基，但在上層分支上處理相對(duì)混亂。
主要表現(xiàn)在HTML 的 DOM 元素被 React 的 Virtual Dom 和 ?jQuery 同時(shí)操作，導(dǎo)致維護(hù)一個(gè) state 的狀態(tài)變得不是那么的順利。
MVC 框架
為了使前端構(gòu)架能夠更靈活適用于商城的業(yè)務(wù)擴(kuò)展，我們就對(duì)前端架構(gòu)進(jìn)行重構(gòu)：
地基 View層：React
js 語法：ES6
語法編譯：Babel
數(shù)據(jù)流操作：Reflux
樣式使用：Stylus
頁面跳轉(zhuǎn)：React-router
打包上線：Gulp+Webpack
為了保持 state 狀態(tài)的統(tǒng)一管理，既有 React 何須 jQuery。
項(xiàng)目框架結(jié)構(gòu)如下：
1）運(yùn)行機(jī)制：
npm 通過加載 package.json 必要的 modules，解決項(xiàng)目的依賴關(guān)系。通過 npm start 運(yùn)行本地服務(wù)器，通過 webpack 加載 app 目錄下main.js，通過 react-router 路由配置解析，進(jìn)入到商城首頁。
2）編譯機(jī)制：
babel 使用 babylon 解析器對(duì)源代碼進(jìn)行解析并生成 AST(Abstract Syntax Tree 抽象語法樹)，接著通過 babel-traverse 對(duì)解析出來的 AST 進(jìn)行遍歷，解析出來整個(gè)樹的 path，讀取對(duì)應(yīng)的元素，并應(yīng)用到 transformers 插件上，生成變換后的 AST，最后使用 babel-generator 將 AST 樹轉(zhuǎn)碼成最終編譯后的代碼串。
3）數(shù)據(jù)流向：
當(dāng)用戶進(jìn)來網(wǎng)站的時(shí)候，React action 匹配用戶當(dāng)前的操作，通過 API 獲取后端提供的信息。Dispatcher 作為事件調(diào)度中心，Reflux 模型的中心樞紐，管理著Reflux 應(yīng)用中的所有數(shù)據(jù)流，它本質(zhì)上是 Store 的回調(diào)注冊(cè)，每個(gè) Store 注冊(cè)它自己并提供一個(gè)回調(diào)函數(shù)。
當(dāng) Dispatcher 響應(yīng) Action 時(shí)，通過已注冊(cè)的回調(diào)函數(shù)，將 Action 提供的數(shù)據(jù)信息發(fā)送給應(yīng)用中所有的 Store，React views 把后臺(tái)的數(shù)據(jù)渲染后呈現(xiàn)給用戶，完成整個(gè)閉環(huán)的數(shù)據(jù)流。
MVC 模型進(jìn)化過程：
1）單頁面
2）業(yè)務(wù)線
3）點(diǎn)融商城 MVC模型
商城業(yè)務(wù)線
商城主業(yè)務(wù)的轉(zhuǎn)型：原來單一業(yè)務(wù)的券功能轉(zhuǎn)變?yōu)橥ㄟ^投資免費(fèi)獲取商品的模式，將券功能移動(dòng)到二級(jí)分類里。
這一模式的改版，是業(yè)務(wù)模式的探索與嘗試。MVP 商城之所以能快速革故鼎新，得益于重構(gòu)的能適應(yīng)復(fù)雜業(yè)務(wù)線的前端架構(gòu)，以及團(tuán)隊(duì)間的精誠(chéng)協(xié)作與共同努力。
商城的首頁也是經(jīng)過不斷更迭的頁面 UI 優(yōu)化調(diào)整，形成了用戶舒適的視覺體驗(yàn)，并且在功能上給到用戶更多的選擇，如：提供商品搜索、心愿單、愛大牌、每日上新、商品多屬性選擇等等。
結(jié)語
商城作為一個(gè)通過“商品”來連接用戶生活場(chǎng)景的模塊，通過利息前置的方式，來幫助用戶梳理理財(cái)與消費(fèi)之間的關(guān)系。既解決了用戶強(qiáng)烈的投資需求，同時(shí)也滿足了實(shí)際的消費(fèi)需求。
商城前端之路漫漫其修遠(yuǎn)兮，我們都在上下而求索的道路上。未來，我們會(huì)不斷革新，打造貼近用戶體驗(yàn)的全新商城模式。
本文作者：喬樂（點(diǎn)融黑幫），Social Team 前端攻城獅一枚，負(fù)責(zé)點(diǎn)融商城和社區(qū)前端開發(fā)，喜歡游泳，騎行，旅游，以及更多大千世界未知的美好事物。
