cyprus-1882194_1920.jpg
題圖：Pixabay
這個項目開始之初，趕時間上線。很多地方基本沒怎么管代碼規(guī)范，直到一期完畢回過頭來看之前寫的代碼，不忍直視。為了之后接手的人能更加輕松，也為了自己之后debug更加順手，邊開始二期的部分需求，邊重構(gòu)一期的部分代碼，還是有部分收獲。
項目技術(shù)棧是：
- nodejs
- javascript
- react
- redux
- react-router
- webpack
之前的架構(gòu)是react-router2，后面換成了react-router4。代碼看起來更加的模塊化。
入口模塊化
項目本身是一個系統(tǒng)合集，用戶根據(jù)權(quán)限的不同會展示不同的菜單導(dǎo)航。目前是有3個部分：
[圖片上傳失敗...(image-10f34-1514827465826)]
每個模塊單獨的action、router、reducer與server。
[圖片上傳失敗...(image-f0103-1514827465826)]
webpack切片打包
entry: {
index: './index.jsx',
1: './1/router/index.jsx',
2: './2/router/index.jsx',
3: './3/router/index.jsx',
vendor: [
'react',
'react-router-dom',
'antd',
'prop-types',
'react-router-redux',
'react-redux',
'redux',
'lodash',
'react-dom',
],
},
路由
根路由只需指向每個模塊的路由文件即可
<Route path="/" exact component={IndexComponent} />
{/* xxx路由 start */}
<Route path="/xxx1" component={1Layout} />
{/* xxx路由 start */}
<Route path="/xxx2" component={2Layout} />
{/* xxx路由 start */}
<Route path="/xxx3" component={3Layout} />
權(quán)限、接口轉(zhuǎn)發(fā)
因為各個系統(tǒng)的后端不是同一批人，部署的機器也不是固定的，于是用 node 做了一層接口轉(zhuǎn)發(fā)，前端頁面訪問固定的地址，然后通過 node 去訪問不同的后端機器。同時權(quán)限部分需要攜帶cookie跨域，正好 node 一起做了。
測試、正式
這是之前的區(qū)分線上線下打包的地址，由于webpack沒有做過多的設(shè)置，于是暫時用這樣的方式區(qū)分打包環(huán)境。但是我更想用 shell 腳本來區(qū)分，可以更方便的直接調(diào)試線上接口。
const isLocal = location.host.indexOf('localhost') === 0;
export const serverUrl = !IS_PRODUCTION ? devUrl : isLocal ? devUrl : `//${location.host}`;
枚舉
前端靜態(tài)枚舉值
不允許頁面出現(xiàn)以下字樣：
- 1，2，3 ...int類型
- '成功'，'失敗'，... 等字符類型
// 靜態(tài)枚舉值及請求API參數(shù)
this._private = {
dispatch: props.dispatch,
// 路由方法
history: props.history,
// 當(dāng)前手機系統(tǒng)
os: '',
...
};
錯誤碼 ，規(guī)范化錯誤提示
const errnoToErrmsg = {
unknownError: 1001,
paramLost: 1002,
paramInvalid: 1003,
authFailed: 1006,
signExpired: 1007,
...
}
狀態(tài)值 ，規(guī)范前端業(yè)務(wù)代碼
const xxxStatus = {
toBeAssigned: '待分配',
pending: '待處理',
processing: '處理中',
processed: '已處理',
notDealtWith: '不處理',
description(rawValue) {
switch (rawValue) {
case this.toBeAssigned:
return '1';
case this.pending:
return '2';
case this.processing:
return '3';
case this.processed:
return '4';
case this.notDealtWith:
return '5';
default:
return '';
}
},
};
export { FeedbackStatus };
前后端字段映射
前端是駝峰命名法，后端是下劃線“_”，所以需要做一個映射，同時也更加方便debug。暫時用如下笨方法。這一塊寫在node那層比較好。
export const ToFE = {
errno: 'errno',
errmsg: 'errmsg',
}
export const ToBackup = {
errno: 'errno',
errmsg: 'errmsg',
}
import { ToFE, ToBackup } from '../config/define';
class Tools {
/**
* isObject
* @param {*} data
*/
isObject(data) {
return Object.prototype.toString.call(data) === '[object Object]';
}
/**
* isArray
* @param {*} data
*/
isArray(data) {
return Object.prototype.toString.call(data) === '[object Array]';
}
/**
* field Transfer
* 后端"_"格式字段映射到前端駝峰命名字段
* @param {*} data
* recursion => 遞歸遍歷對象和數(shù)組兩種類型的數(shù)據(jù)
*/
fieldTransfer(data) {
// 對象類型
if (this.isObject(data)) {
return this.objectTransfer(data);
}
if (this.isArray(data)) {
return this.arrTransfer(data);
}
return data;
}
// 對象遍歷
objectTransfer(data) {
let result = {};
for (const item in data) {
if (this.isObject(data[item])) {
result[ToFE[`${item}`] || item] = this.objectTransfer(data[item]);
continue;
}
if (this.isArray(data[item])) {
result[ToFE[`${item}`] || item] = this.arrTransfer(data[item]);
continue;
}
result[ToFE[`${item}`] || item] = data[item];
}
return result;
}
// 數(shù)組遍歷
arrTransfer(data) {
let result = [];
for (let i = 0, j = data.length; i < j; i++) {
if (this.isObject(data[i])) {
result[i] = this.objectTransfer(data[i]);
continue;
}
if (this.isArray(data[i])) {
result[i] = this.arrTransfer(data[i]);
continue;
}
result[i] = data[i];
}
return result;
}
// 接口參數(shù)對象構(gòu)建
buildParams(parameters) {
if (!this.isObject(parameters)) {
throw 'parameters must be array object';
}
const params = {};
if (Object.keys(parameters) === 0) {
return params;
}
for (let key in parameters) {
parameters[key] !== '' && (params[ToBackup[key]] = parameters[key]);
}
return params;
}
}
export default new Tools();
API層
目前 tools.buildParams(parameters) 這一塊的傳參還在糾結(jié)以對象傳還是以數(shù)組傳，以數(shù)組傳直接傳 arguments 就可以，缺點是傳參以黑盒來傳，無法判斷參數(shù)，無法快速debug；優(yōu)點是_fetchxxx里的參數(shù)也不需要列出，直接一個對象就行。 以對象傳需要自己構(gòu)建，缺點是需要重復(fù)寫一次參數(shù)；優(yōu)點是更加直觀。
/**
* xxx接口
* /xxx/v1/xxx/xxx
* @param {*}
* firstLevel => (可選參數(shù)) => xxx
* midLevel => (可選參數(shù)) => xxx
* lastLevel => (可選參數(shù)) => xxx
* startAt => (可選參數(shù)) => xxx
* endAt => (可選參數(shù)) => xxx
*/
export const _fetchxxx = ({
firstLevel = '',
midLevel = '',
lastLevel = '',
startAt = '',
endAt = '',
}) => {
const parameters = { firstLevel, midLevel, lastLevel, startAt, endAt };
const params = tools.buildParams(parameters);
return request(`${xxx}xxx/xxx`, {
method: 'post',
body: qs.stringify(params),
}).then(data => tools.fieldTransfer(data));
};
緩存
統(tǒng)一緩存命名規(guī)范，防止緩存沖突
class LocalStorage {
set(key, val) {
window.localStorage && localStorage.setItem(key, JSON.stringify(val));
}
get(key) {
return window.localStorage && JSON.parse(localStorage.getItem(key));
}
remove(key) {
window.localStorage && localStorage.removeItem(key);
}
sSet(key, val) {
window.sessionStorage && sessionStorage.setItem(key, JSON.stringify(val));
}
sGet(key) {
return window.sessionStorage && JSON.parse(sessionStorage.getItem(key));
}
sRemove(key) {
window.sessionStorage && sessionStorage.removeItem(key);
}
}
let Storage = new LocalStorage();
Storage.KEYS = {
TOKEN: 'TOKEN',
PV_KEY: 'PV_KEY'
};
Object.freeze && Object.freeze(Storage.KEYS);
export default Storage;
Feature
- 模塊按需加載，自定義各模塊間通信機制
- 模塊注冊腳手架，前端接入提供注冊工具，模塊單獨部署，動態(tài)注冊，獨立 CDN。編譯由服務(wù)端統(tǒng)一執(zhí)行
- 服務(wù)端項目代碼自身預(yù)編譯，提高執(zhí)行性能、降低部署風(fēng)險
- 編譯結(jié)果統(tǒng)一保存，支持按分支名切換、回滾
Flag
還有很多好玩的東西可以搞，每一次的優(yōu)化都是對自身的一次重構(gòu)。2018 fighting！?。?/p>
