目前項(xiàng)目采用的技術(shù)堆棧
一. 開(kāi)發(fā)環(huán)境的構(gòu)建
前端(PC和H5)的開(kāi)發(fā)環(huán)境是以nodejs為驅(qū)動(dòng), 使用express.js搭配webpack構(gòu)建的集編譯，代碼分離，打包壓縮，靜態(tài)資源服務(wù)，熱更新，反向代理等功能的前后端分離模式。
二. 客戶端代碼的選型
項(xiàng)目使用react系列編寫(xiě)，包含react，react-router，redux，react-redux，immutable，antd。
- 入口：
利用瀏覽器的history(或者h(yuǎn)ash) api，與后端約定唯一的入口頁(yè)面，配置react-redux-router采取前端路由的方式。使用webpack的代碼分離機(jī)制，實(shí)現(xiàn)動(dòng)態(tài)加載。 - 數(shù)據(jù)與視圖：
以react的思維模式，結(jié)合使用immutable.js，引入了不可變數(shù)據(jù)結(jié)構(gòu)，實(shí)現(xiàn)數(shù)據(jù)單向流，驅(qū)動(dòng)視圖以狀態(tài)機(jī)的形式改變。 - 展現(xiàn)層:
PC端以css的盒模型為基礎(chǔ)，選取螞蟻金服的一套基礎(chǔ)組件antd，通過(guò)自定義樣式主題，生成一套超客ui組件。H5端以css的flex響應(yīng)式模型為基礎(chǔ)，選取antd-mobile組件，引進(jìn)了淘寶的高清方案，匹配不同的設(shè)備渲染策略。 - 與服務(wù)端交互層
數(shù)據(jù)以json格式傳輸，與后端約定固定的返回格式和字段。
PC端校驗(yàn)登錄信息分為兩個(gè)方面，在頁(yè)面中使用timer實(shí)時(shí)監(jiān)測(cè)cookie的改變，在ajax中使用自定義包裝過(guò)的庫(kù)，登錄信息失效時(shí)，接口會(huì)返回錯(cuò)誤狀態(tài)碼和跳轉(zhuǎn)登錄鏈接。H5端的ajax請(qǐng)求包裝了Request URL，統(tǒng)一綴上了url的token。
開(kāi)發(fā)環(huán)境中使用反向代理，端口號(hào)可配置為對(duì)接的后端開(kāi)發(fā)人員。
