前端專案重構的些許收穫

題圖：pixabay

這個專案開始之初，趕時間上線。很多地方基本沒怎麼管**規範，直到一期完畢回過頭來看之前寫的**，不忍直視。為了之後接手的人能更加輕鬆，也為了自己之後debug更加順手，邊開始二期的部分需求，邊重構一期的部分**，還是有部分收穫。

專案技術棧是：

之前的架構是react-router2，後面換成了react-router4。**看起來更加的模組化。

入口模組化

專案本身是乙個系統合集，使用者根據許可權的不同會展示不同的選單導航。目前是有3個部分：

每個模組單獨的action、router、reducer與server。

webpack切片打包

entry: ,

路由

根路由只需指向每個模組的路由檔案即可

"/" exact component= />
"/***1" component= />
"/***2" component= />
"/***3" component= />

許可權、介面**

因為各個系統的後端不是同一批人，部署的機器也不是固定的，於是用 node 做了一層介面**，前端頁面訪問固定的位址，然後通過 node 去訪問不同的後端機器。同時許可權部分需要攜帶cookie跨域，正好 node 一起做了。

測試、正式

這是之前的區分線上線下打包的位址，由於webpack沒有做過多的設定，於是暫時用這樣的方式區分打包環境。但是我更想用 shell 指令碼來區分，可以更方便的直接除錯線上介面。

const islocal = location.host.indexof('localhost') === 0;
export const serverurl = !is_production ? devurl : islocal ? devurl : `//$`;

列舉

前端靜態列舉值

不允許頁面出現以下字樣：

// 靜態列舉值及請求api引數
this._private = ;

錯誤碼，規範化錯誤提示

const errnotoerrmsg =

狀態值，規範前端業務**

const ***status = 
},};
export ;

前後端欄位對映前端是駝峰命名法，後端是下劃線「_」，所以需要做乙個對映，同時也更加方便debug。暫時用如下笨方法。這一塊寫在node那層比較好。

export const tofe = 
export const tobackup = 
import  from '../config/define';
class tools  data
*/isobject(data) 
/*** isarray
* @param  data
*/isarray(data) 
/*** field transfer
* 後端"_"格式字段對映到前端駝峰命名字段
* @param  data
* recursion => 遞迴遍歷物件和陣列兩種型別的資料
*/fieldtransfer(data) 
if (this.isarray(data)) 
return data;
}    
// 物件遍歷
objecttransfer(data) ;
for (const item in data) `] || item] = this.objecttransfer(data[item]);
continue;
}if (this.isarray(data[item])) `] || item] = this.arrtransfer(data[item]);
continue;
}result[tofe[`$`] || item] = data[item];
}		return result;
}    
// 陣列遍歷
arrtransfer(data) 
if (this.isarray(data[i])) 
result[i] = data[i];
}		return result;
}    
// 介面引數物件構建
buildparams(parameters) 
const params = {};
if (object.keys(parameters) === 0) 
for (let key in parameters) 
return params;	}}
export default new tools();

api層

目前 tools.buildparams(parameters) 這一塊的傳參還在糾結以物件傳還是以陣列傳，以陣列傳直接傳 arguments 就可以，缺點是傳參以黑盒來傳，無法判斷引數，無法快速debug；優點是_fetch***裡的引數也不需要列出，直接乙個物件就行。以物件傳需要自己構建，缺點是需要重複寫一次引數；優點是更加直觀。

/**
* ***介面
* /***/v1/***/***
* @param 
* firstlevel => (可選引數) => ***
* midlevel => (可選引數) => ***
* lastlevel => (可選引數) => ***
* startat => (可選引數) => ***
* endat => (可選引數) => ***
*/export const _fetch*** = () => ;
const params = tools.buildparams(parameters);
return request(`$***/***`, ).then(data => tools.fieldtransfer(data));
};

快取

統一快取命名規範，防止快取衝突

class localstorage 
get(key) 
remove(key) 
sset(key, val) 
sget(key) 
sremove(key) 
}    
let storage = new localstorage();
storage.keys = ;
object.freeze && object.freeze(storage.keys);
export default storage;

feature

flag

還有很多好玩的東西可以搞，每一次的優化都是對自身的一次重構。2018 fighting！！！

更多專業前端知識，請上

【猿2048】www.mk2048.com

前端專案重構的些許收穫

偶爾的小收穫（前端）

複習前端知識的新收穫

天畫專案 Idgenerator的開源重構（上）

前端專案重構的些許收穫

偶爾的小收穫（前端）

複習前端知識的新收穫

天畫專案 Idgenerator的開源重構（上）

相關推薦