uniapp微信小程序---前端设计模式的学习（上）

一、设计模式是一种编程思想无论是前端什么框架都可以使用

二、作用

1. 代码结构清晰： 设计模式提供了一种组织代码的方式，使得代码更加结构化和易于理解。每个模式都有其特定的用途，有助于开发者更好地组织和管理代码。

2. 可维护性： 通过使用设计模式，代码的逻辑结构更为清晰，降低了代码的复杂度。这使得代码更容易维护，新的开发人员也能更快地理解和修改代码。

3. 可重用性： 设计模式强调代码的灵活性和可重用性。通过将通用的解决方案封装在模式中，开发者可以更容易地在不同的项目中重复使用这些模式，从而提高开发效率。

4. 可扩展性： 设计模式使得系统更容易扩展。当需求变化时，通过添加新的模式或调整现有的模式，可以相对容易地扩展系统功能而不影响整体结构。

5. 降低耦合度： 设计模式可以帮助降低代码的耦合度，使得系统中的各个部分相互独立。这样一来，对一个部分的修改不会对其他部分造成过多影响。

6. 提高代码质量： 使用设计模式可以帮助开发者编写更加健壮和高质量的代码。这些模式经过实践验证，是一些被广泛接受的最佳实践。

三、分类

1.单例模式

通俗点解释

想象你在玩一个游戏，这个游戏中有一个“全局管理员”负责管理一些重要的信息，比如你的分数、当前关卡等。

问题：

1. 如果每个角色都有一个自己的“全局管理员”，那么可能会有一堆“管理员”互相不知道对方的存在。
2. 如果有多个“管理员”分别管理分数，可能导致显示的分数不一致。

解决方案：

引入单例模式，确保整个游戏中只有一个“全局管理员”，就像是一个超级管家，所有的信息都通过这个管家来管理。

class GameManager {
  static instance;

  constructor() {
    if (!GameManager.instance) {
      GameManager.instance = this;
      this.score = 0;
    }

    return GameManager.instance;
  }

  increaseScore(points) {
    this.score += points;
  }

  getScore() {
    return this.score;
  }
}

// 在整个游戏中，只有一个超级管家
const gameManager = new GameManager();

// 一个角色增加分数
gameManager.increaseScore(10);

// 另一个角色获取分数
const currentScore = gameManager.getScore();
console.log(currentScore); // 10

 2.观察者模式

这个简单，意思是用于定义对象之间的一对多依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。

// 主题（Subject）
class Subject {
  constructor() {
    this.observers = []; // 观察者列表
  }

  // 添加观察者
  addObserver(observer) {
    this.observers.push(observer);
  }

  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // 通知所有观察者
  notify() {
    this.observers.forEach(observer => observer.update());
  }

  // 主题状态发生变化
  changeState() {
    console.log('主题状态发生变化');
    // 执行一些操作...
    // 通知所有观察者
    this.notify();
  }
}

// 观察者（Observer）
class Observer {
  constructor(name) {
    this.name = name;
  }

  // 观察者收到通知后执行的操作
  update() {
    console.log(`${this.name} 收到通知，进行更新操作`);
  }
}

// 创建主题和观察者
const subject = new Subject();
const observer1 = new Observer('观察者1');
const observer2 = new Observer('观察者2');

// 将观察者添加到主题中
subject.addObserver(observer1);
subject.addObserver(observer2);

// 主题状态发生变化
subject.changeState();