最近參與了一波規(guī)模較大的前端系統(tǒng)構(gòu)建項(xiàng)目，有一些感悟和實(shí)用的經(jīng)驗(yàn)想記錄下來(lái)。主要分為以下幾點(diǎn)：
一、前端系統(tǒng)架構(gòu)方面
二、UI庫(kù)選擇方面
三、代碼結(jié)構(gòu)方面
四、功能點(diǎn)實(shí)現(xiàn)方面
五、代碼調(diào)試方面
六、bug解決方面
七、項(xiàng)目總結(jié)
下面，分點(diǎn)說(shuō)一說(shuō)吧。
- 前端系統(tǒng)架構(gòu)
首先闡釋一下項(xiàng)目背景。此次重構(gòu)的目的是將原系統(tǒng)的功能全部遷移到新系統(tǒng)中，之所以不選擇復(fù)用原系統(tǒng)，是因?yàn)樵邢到y(tǒng)采用了angular1.x，angular2.x，vue等多個(gè)框架，給后期維護(hù)帶來(lái)了很大困難，因此在評(píng)估時(shí)間成本的基礎(chǔ)上，選擇了重構(gòu)的方案，統(tǒng)一使用react框架來(lái)對(duì)系統(tǒng)進(jìn)行重構(gòu)。
本項(xiàng)目采用create react app構(gòu)建，同時(shí)使用了webpack構(gòu)架，同時(shí)提供mock數(shù)據(jù)功能。
在項(xiàng)目搭建方面，本項(xiàng)目以react-router為基底，通過(guò)路由定位至每個(gè)頁(yè)面；對(duì)于每個(gè)單獨(dú)的頁(yè)面，均包含：組件、actions、reducer三個(gè)部分，同時(shí)采用了immutable的方式進(jìn)行狀態(tài)管理。
- UI庫(kù)選擇
本項(xiàng)目采用了一貫使用的Ant Design框架，一方面考慮使用熟練性，一方面考慮和react的兼容性和配色問(wèn)題。主要使用的組件有：Form、Table、Modal、Upload、DatePicker、TimePicker等
- 代碼結(jié)構(gòu)
本項(xiàng)目使用create react app構(gòu)建。
- 功能點(diǎn)實(shí)現(xiàn)
根據(jù)項(xiàng)目功能點(diǎn)，本項(xiàng)目大功能點(diǎn)主要分為以下幾個(gè)：
4.1. toolbar
toolbar中主要包含：查詢(xún)、選擇、重置這三個(gè)功能，使用的控件有：Form、Input、Select、Button、TimePicker等。
4.2. table
4.3. modal
-
代碼調(diào)試
沒(méi)有數(shù)據(jù)的時(shí)候，使用連接原有項(xiàng)目的機(jī)器，將原有數(shù)據(jù)代理到本地進(jìn)行開(kāi)發(fā)，或者直接使用mock數(shù)據(jù)進(jìn)行開(kāi)發(fā)；在接口開(kāi)發(fā)完成后，將rd機(jī)器代理到本地進(jìn)行調(diào)試，需要在package.json文件中進(jìn)行開(kāi)發(fā)環(huán)境的配置。
圖5.1 proxy的配置實(shí)例
同時(shí)，為了方便接口更換調(diào)試，也將所有接口單獨(dú)放在constant.js文件中，進(jìn)行所有api的統(tǒng)一管理。
圖5.2 控件中需要使用的接口
- bug解決
6.1 對(duì)異常情況的考慮
對(duì)于前端來(lái)說(shuō)，最頻繁的異常情況出現(xiàn)在與后端交互時(shí)產(chǎn)生的數(shù)據(jù)結(jié)構(gòu)的變動(dòng)，所以在考慮這方面的異常情況時(shí)需要盡量把情況考慮完全。
通過(guò)這個(gè)項(xiàng)目，我的經(jīng)驗(yàn)總結(jié)如下：
首先，需要和RD溝通清楚，結(jié)合雙方的情況進(jìn)行數(shù)據(jù)結(jié)構(gòu)的協(xié)商，這個(gè)過(guò)程既不能完全遷就前端也不能完全遷就后端；比如，如果前端依賴(lài)了某個(gè)組件庫(kù)進(jìn)行開(kāi)發(fā)，那么最佳的后端數(shù)據(jù)結(jié)構(gòu)應(yīng)該是符合這個(gè)組件庫(kù)的，如此，前端就不需要再做其他的處理。但是，事實(shí)上并非每次后端都可以提供最合適的數(shù)據(jù)結(jié)構(gòu)，比如后端代碼大規(guī)模繼承了之前的數(shù)據(jù)結(jié)構(gòu)，或者是RD能力有限等等，如果遇到這種情況，前端也只能遷就后端對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行進(jìn)一步的改造和處理（常用方法有：object.keys, map, for...in 等）。但在這個(gè)項(xiàng)目中，由于前端統(tǒng)一使用了antd的組件庫(kù)，因此如果每個(gè)人都重寫(xiě)一邊數(shù)據(jù)結(jié)構(gòu)來(lái)契合組件庫(kù)的需求的話(huà)，代價(jià)是很大而且無(wú)意義的，因此，就和后端就此問(wèn)題進(jìn)行了溝（si）通（bi）。最終，終于在數(shù)據(jù)結(jié)構(gòu)上達(dá)成了一致。。。。
第二，對(duì)數(shù)據(jù)為空情況的考慮。這個(gè)部分一定要細(xì)致，很細(xì)致，用我?guī)熜值脑?huà)說(shuō)，一定要讓自己的系統(tǒng)擁有很強(qiáng)的容錯(cuò)性?？梢院秃蠖思s定：空的數(shù)據(jù)都返回[]，但也一定要考慮后端還有可能返回：null, undefined等各種奇葩的情況，所以在請(qǐng)求發(fā)送后，除了對(duì)返回碼進(jìn)行判斷外，還需要對(duì)正確返回碼中的數(shù)據(jù)進(jìn)行額外的處理，比如，對(duì)數(shù)組的length進(jìn)行判斷，或者簡(jiǎn)單粗暴的typeof判斷等。除此之外，當(dāng)涉及到數(shù)據(jù)層面的操作時(shí)，一定要考慮到數(shù)據(jù)返回undefined或者null的情況，比如，當(dāng)顯示請(qǐng)求數(shù)據(jù)時(shí)，不能簡(jiǎn)單的采取{this.data.delivery_id}這種方式，而是需要判斷this.data是否存在，最好采用可以備選方案，比如三元運(yùn)算符(this.data)?(this.data.delivery_id):('-')
這一點(diǎn)在開(kāi)發(fā)H5頁(yè)面時(shí)尤為重要。
- 項(xiàng)目總結(jié)
7.1 momentjs
7.2 antd框架實(shí)踐
ant真的是很強(qiáng)大的一個(gè)框架，最近剛剛發(fā)布了3.0版本，此次也是使用了最新的版本進(jìn)行開(kāi)發(fā)。
首先要說(shuō)的是DatePicker這個(gè)控件。需求中有提到...
以上，就是對(duì)這個(gè)大規(guī)模項(xiàng)目開(kāi)發(fā)過(guò)程的總結(jié)，隨著上線會(huì)有接連不斷的問(wèn)題涌來(lái)，到時(shí)候再慢慢解決。
未完待續(xù)。。
