前端專案重構的些許收穫

Alihanniba發表於2018-01-01
前端

前端專案重構的些許收穫

題圖：Pixabay

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

專案技術棧是：

  • nodejs
  • javascript
  • react
  • redux
  • react-router
  • webpack

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

入口模組化

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

前端專案重構的些許收穫

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

前端專案重構的些許收穫

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} />
複製程式碼

許可權、介面轉發

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

測試、正式

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

const isLocal = location.host.indexOf('localhost') === 0;
export const serverUrl = !IS_PRODUCTION ? devUrl : isLocal ? devUrl : `//${location.host}`;
複製程式碼

列舉

前端靜態列舉值

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

  • 1，2，3 ...int型別
  • '成功'，'失敗'，... 等字元型別
// 靜態列舉值及請求API引數
this._private = {
	dispatch: props.dispatch,
	// 路由方法
	history: props.history,
	// 當前手機系統
	os: '',
	...
};
複製程式碼

錯誤碼 ，規範化錯誤提示

const errnoToErrmsg = {
 unknownError: 1001,
 paramLost: 1002,
 paramInvalid: 1003,
 authFailed: 1006,
 signExpired: 1007,
	...
}
複製程式碼

狀態值 ，規範前端業務程式碼

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 => 遞迴遍歷物件和陣列兩種型別的資料
	 */
	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;
	}
    
	// 陣列遍歷
	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;
	}
    
	// 介面引數物件構建
	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) 這一塊的傳參還在糾結以物件傳還是以陣列傳，以陣列傳直接傳 arguments 就可以，缺點是傳參以黑盒來傳，無法判斷引數，無法快速debug；優點是_fetchxxx裡的引數也不需要列出，直接一個物件就行。 以物件傳需要自己構建，缺點是需要重複寫一次引數；優點是更加直觀。

/**
 * xxx介面
 * /xxx/v1/xxx/xxx
 * @param {*}
 * firstLevel => (可選引數) => xxx
 * midLevel => (可選引數) => xxx
 * lastLevel => (可選引數) => xxx
 * startAt => (可選引數) => xxx
 * endAt => (可選引數) => 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));
};
複製程式碼

快取

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

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

  • 模組按需載入，自定義各模組間通訊機制
  • 模組註冊腳手架，前端接入提供註冊工具，模組單獨部署，動態註冊，獨立 CDN。編譯由服務端統一執行
  • 服務端專案程式碼自身預編譯，提高執行效能、降低部署風險
  • 編譯結果統一儲存，支援按分支名切換、回滾

Flag

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

相關文章