设计模式
什么是设计模式：
- 设计模式就是在某种场合下对某个问题的一种解决方案，说白了就是，给面向对象软件开发中的一些好的方法，抽象，总结，整理后去取你一个专业的名字；
1、 单例模式
什么是单例模式
- 单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。
使用场景：
适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。
export default class LoginDialog {
private static _instance: LoginDialog;
private component: VueComponent;
public static getInstance() {
if (!this._instance) {
this._instance = new LoginDialog();
}
return this._instance;
}
private constructor() {
// 创建登录组件Dom
this.component = createLoginComponent();
}
public show() {
this.component.show();
}
public hide() {
this.component.hide();
}
}
// 调用处
const loginDialog = LoginDialog.getInstance();
loginDialog.show();
- 这是一个简单的登录弹窗组件的单例实现，这样实现后有以下几个好处：
- 避免多次创建页面 Dom 节点
- 隐藏、重新打开保存上次输入结果
- 调用简单，随处可调
- 按需创建，第一次调用才被创建
2、策略模式
什么是策略模
策略模式，定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
说白了就是：
就是完成一个方法过程中，可能会用到一系列的工具，通过外部传入区分类别的参数来达到使用不同方法的封装
例子
公司的年终奖计算，A 为 3 月薪，B 为 2 月薪，C 为 1 月薪：
const calculateBouns = function(salary, level) {
if (level === "A") {
return salary * 3;
}
if (level === "B") {
return salary * 2;
}
if (level === "C") {
return salary * 1;
}
};
// 调用如下：
console.log(calculateBouns(4000, "A")); // 16000
console.log(calculateBouns(2500, "B")); // 7500
上面代码存在的问题
calculateBouns函数内容集中calculateBouns函数扩展性低- 算法复用性差，如果在其他的地方也有类似这样的算法的话，但是规则不一样，我们这些代码不能通用
3、 迭代模式
什么是迭代模式
迭代器模式：提供一种方法顺序一个聚合对象中各个元素，而又不暴露该对象内部表示。
迭代模式的使用场景
- 验证器
// 将数组中的every方法重新写一下，让读者更清晰
const every = (...args: Array<(args: any) => boolean>) => {
return (str: string) => {
for (const fn of args) {
if (!fn(str)) {
return false;
}
}
return true;
};
};
const isString = (str: string): boolean => typeof str === "string";
const isEmpty = (str: string): boolean => !!`${str}`.trim().length;
const isEmail = (str: string): boolean =>
/^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$/.test(str);
const isPhone = (str: string): boolean => /^1\d{10}$/.test(str);
const minLength = (num: number): ((str: string) => boolean) => {
return str => `${str}`.trim().length > num;
};
const validatorEmail = every(isString, isEmpty, minLength(5), isEmail);
const validatorPhone = every(isString, isEmpty, minLength(5), isPhone);
console.log(validatorEmail("[email protected]"));
console.log(validatorPhone("13388888888"));
- 对一个实体墙体绘制过程中，是否合法（是否穿过门窗，是否穿过弧形墙，是否过短，是否夹角过小）
- 移动物体时，对物体模型做碰撞吸附过程计算位移（与附近物体、墙体吸附位移，与墙体碰撞位移，与其他物体叠放位移）
4、 发布订阅模式
什么是发布订阅模式
发布-订阅模式，他定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖他的对象都会得到通知。
5、 适配器模式
什么是适配器模式
适配器模式：是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。
### 适配模式的使用场景
- 适配器模式在前端项目中一般会用于做数据接口的转换处理，比如把一个有序的数组转化成我们需要的对象格式
const arr = ["Javascript", "book", "前端编程语言", "8月1日"];
function arr2objAdapter(arr) {
// 转化成我们需要的数据结构
return {
name: arr[0],
type: arr[1],
title: arr[2],
time: arr[3]
};
}
const adapterData = arr2objAdapter(arr);