點(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ì)間的精誠協(xié)作與共同努力渠啤。
商城的首頁也是經(jīng)過不斷更迭的頁面 UI 優(yōu)化調(diào)整狐肢，形成了用戶舒適的視覺體驗(yàn)，并且在功能上給到用戶更多的選擇沥曹，如：提供商品搜索份名、心愿單、愛大牌妓美、每日上新僵腺、商品多屬性選擇等等。
結(jié)語
商城作為一個(gè)通過“商品”來連接用戶生活場景的模塊壶栋，通過利息前置的方式辰如，來幫助用戶梳理理財(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ā)运准，喜歡游泳幌氮，騎行，旅游胁澳，以及更多大千世界未知的美好事物该互。
