前端代碼封裝

首先說明，前端架構代碼封裝，不是說設計模式，而是封裝約定俗成的規矩，這個規矩多半是由編程語言缺點形成的。

1. 使用者和開發者區別

先看例子

class ClassName {
	// 開發者的方法名
	static _getBase64ByCb (file, cb) {
		// todo
	}
	// 使用者的方法名
	getBase64 () {
		const file = this.file
		let base64 = ''
		this._getBase64ByCb(file, function (base64) {
			base64 = base64
		})
		return base64
	}
}
// 後續添加的使用者的方法
ClassName.prototype.getBase64s = function () {
	const base64s = []
	this.files.forEach(file => {
		let base64 = ''
		ClassName._getBase64ByCb(file, function (base64) {
			base64 = base64
		})
		base64s.push(base64)
	})
	return base64s
}
複製代碼

從_getBase64ByCb、getBase64、getBase64s三個方法，基本能看出

1. 從名字上，能區分誰是開發者使用的，誰是使用者使用的
2. 開發者使用的方法是用於後續擴展，如getBase64s方法一開始沒有分裝，後續使用者在原有基礎上進行擴展。
3. 爲何_getBase64ByCb 是靜態方法？這裏不是靜態方法，而是模擬 protected 屬性。

1.1 區別總結：

1> 命名方式體現上

• 開發者使用的方法，關注於執行的過程
• 使用者使用的方法，關注於執行的結果

2> 屬性和方法的功能權限不同

• 開發者使用的方法，有protected、private、$
• 使用者使用的方法，有prototype、static

3> 功能上

• 開發者使用的方法，應用於構建
• 使用者使用的方法，應用於業務（說白點，業務代碼抄格式）

2. 對類約定俗成的規矩

1. Class._fn protected 保護方法
2. Class._proprety protected 保護屬性
3. Class.prototype._proprety private 私有屬性，或者只讀屬性
4. Class.prototype._fn 私有方法
5. Class.prototype.$fn 框架和第三方插件提供實例化方法
6. Class.prototype.$proprety 框架和第三方插件提供實例化屬性

這類規定不是那本教科書寫着，而是js程序員之間默認規矩。（不瞭解，沒法讀源碼）

3. 抽象封裝和靈活調用是矛盾體

抽象封裝和靈活調用是矛盾體，可知封裝和靈活要達到平衡，即哪些即封裝，根據每一個公司的具體的業務能力而定。 這裏列舉我我的封裝的理解，我大部分所作的事情，基本上是業務，也就業務驅動。

1. 業務層
   • 接口數據，基於純函數封裝
   • ui 交互，面向過程
2. 腳手架層
   • store （本地 storage 處理）
   • 接口攔截器，校驗登陸態（面向用戶涉及安全問題，交給後端作，前端檢驗）
   • 路由
   • 第三放 js 引用
   • 單側
   • 公共組件

第 1 點，這分的好處，在接口變動，ui 交互不改; ui 交互更改，接口數據不改；若是數據和ui交互都更改，重構。 第 2 點，其實不少腳手架通常都是尋尋漸進，形式不固定，只要能知足 6 點便可。