前端代码封装

首先说明，前端架构代码封装，不是说设计模式，而是封装约定俗成的规矩，这个规矩多半是由编程语言缺点形成的。javascript

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三个方法，基本能看出java

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 点便可。后端