前端存在的设计模式有

设计模式

什么是设计模式：

• 设计模式就是在某种场合下对某个问题的一种解决方案，说白了就是，给面向对象软件开发中的一些好的方法，抽象，总结，整理后去取你一个专业的名字；

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("wyy.xb@qq.com"));
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);