前端进阶之路：1.5w字深度解析前端23种设计模式

前端

2023-11-29 17:13:49

在我们学习前端开发的过程中，设计模式的概念通常被轻描淡写地一笔带过，然而它是非常重要的一种提升前端代码质量的方法。

有了合理的设计模式，我们写的代码不仅让人赏心悦目，而且还能更容易地维护和扩展。

这篇文章将通过1.5w字的篇幅，全面而详细地讲解前端常用的23种设计模式。

它分为三个部分：

基础设计模式 ：主要介绍一些基本的设计模式，如工厂模式、单例模式、观察者模式等。
高级设计模式 ：主要介绍一些更高级的设计模式，如MVC模式、MVP模式、MVVM模式等。
实战案例 ：通过一些实际的案例，演示如何将设计模式应用到前端开发中。

相信通过阅读这篇文章，你将对前端设计模式有更深入的了解，并能够将其应用到自己的项目中。

基础设计模式

1. 工厂模式

工厂模式是一种创建对象的模式。它允许我们通过一个统一的接口创建对象，而无需指定对象的具体类。

// 工厂模式
class ShapeFactory {
  createShape(type) {
    switch (type) {
      case 'circle':
        return new Circle();
      case 'square':
        return new Square();
      case 'triangle':
        return new Triangle();
      default:
        throw new Error('Invalid shape type.');
    }
  }
}

// 使用工厂模式
const factory = new ShapeFactory();
const circle = factory.createShape('circle');
const square = factory.createShape('square');
const triangle = factory.createShape('triangle');

2. 单例模式

单例模式是一种确保一个类只有一个实例的模式。它通常用于创建全局对象，如数据库连接、日志记录器等。

// 单例模式
class Singleton {
  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  // 私有构造函数，防止直接实例化
  constructor() {}
}

// 使用单例模式
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

3. 观察者模式

观察者模式是一种对象间通信的模式。它允许一个对象（主题）将消息通知给多个其他对象（观察者），而无需知道这些观察者的具体类。

// 观察者模式
class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers() {
    this.observers.forEach(observer => {
      observer.update(this);
    });
  }
}

class Observer {
  constructor(subject) {
    this.subject = subject;
    this.subject.addObserver(this);
  }

  update(subject) {
    console.log(`Observer ${this.id} received notification from subject ${subject.id}`);
  }
}

// 使用观察者模式
const subject = new Subject();
const observer1 = new Observer(subject);
const observer2 = new Observer(subject);

subject.notifyObservers(); // 输出：Observer 1 received notification from subject 1
                          //          Observer 2 received notification from subject 1

高级设计模式

4. MVC模式

MVC模式是一种经典的前端架构模式。它将应用程序分为三个部分：模型、视图和控制器。

模型：负责管理应用程序的数据和逻辑。
视图：负责将模型中的数据展示给用户。
控制器 ：负责处理用户的输入，并更新模型中的数据。

// MVC模式
// 模型
class Model {
  constructor() {
    this.data = {};
  }

  setData(key, value) {
    this.data[key] = value;
  }

  getData(key) {
    return this.data[key];
  }
}

// 视图
class View {
  constructor(model) {
    this.model = model;
  }

  render() {
    const data = this.model.getData();
    // 将数据渲染到页面上
  }
}

// 控制器
class Controller {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // 监听用户的输入
    this.view.addEventListener('input', (e) => {
      this.model.setData(e.target.name, e.target.value);
    });
  }
}

// 使用MVC模式
const model = new Model();
const view = new View(model);
const controller = new Controller(model, view);

5. MVP模式

MVP模式是MVC模式的一种变体。它将控制器中的业务逻辑移动到了一个独立的Presenter对象中。

// MVP模式
// 模型
class Model {
  constructor() {
    this.data = {};
  }

  setData(key, value) {
    this.data[key] = value;
  }

  getData(key) {
    return this.data[key];
  }
}

// 视图
class View {
  constructor(presenter) {
    this.presenter = presenter;
  }

  render() {
    const data = this.presenter.getData();
    // 将数据渲染到页面上
  }
}

// Presenter
class Presenter {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // 监听模型的变化
    this.model.addEventListener('change', (e) => {
      this.view.render();
    });
  }

  getData() {
    return this.model.getData();
  }
}

// 使用MVP模式
const model = new Model();
const view = new View();
const presenter = new Presenter(model, view);

6. MVVM模式

MVVM模式是MVC模式和MVP模式的进一步发展。它使用数据绑定技术，使视图和模型能够自动同步。

// MVVM模式
// 模型
class Model {
  constructor() {
    this.data = {};
  }

  setData(key, value) {
    this.data[key] = value;
    this.notifyObservers();
  }

  getData(key) {
    return this.data[key];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers() {
    this.observers.forEach(observer => {
      observer.update(this);
    });
  }
}

// 视图
class View {
  constructor(model) {
    this.model = model;

    // 将模型中的数据绑定到视图上
    this.model.addObserver(this);
  }

  update(model) {
    const data = model.getData();
    // 将数据渲染到页面上
  }
}

// 使用MVVM模式
const model = new Model();
const view = new View(model);

实战案例

1. 使用工厂模式创建各种形状对象

class ShapeFactory {
  createShape(type) {
    switch (type) {
      case 'circle':
        return new Circle();
      case 'square':
        return new Square();
      case 'triangle':
        return new Triangle();
      default:
        throw new Error('Invalid shape type.');
    }
  }
}

// 使用工厂模式创建各种形状对象
const factory = new ShapeFactory();
const circle = factory.createShape('circle');
const square = factory.createShape('square');
const triangle = factory.createShape('triangle');

2. 使用单例模式创建一个全局的日志记录器

class Logger {
  static getInstance() {
    if (!Logger.instance)

Kyle

探索Web开发资源和人工智能教程的代码社区

联系我

扫码关注微信公众号

前端进阶之路：1.5w字深度解析前端23种设计模式

基础设计模式

1. 工厂模式

2. 单例模式

3. 观察者模式

高级设计模式

4. MVC模式

5. MVP模式

6. MVVM模式

实战案例

1. 使用工厂模式创建各种形状对象

2. 使用单例模式创建一个全局的日志记录器

Kyle

Vite 中 Vue.js 链接失效？帮你彻底解决！

JavaScript 中如何获取对象的类：深入探讨替代方法

如何高效地按属性对对象数组进行字母顺序排序？

JavaScript onclick() 函数无输出？故障排除和解决方法

Google reCAPTCHA 错误分层：如何优化？

前端进阶之路：1.5w字深度解析前端23种设计模式

基础设计模式

1. 工厂模式

2. 单例模式

3. 观察者模式

高级设计模式

4. MVC模式

5. MVP模式

6. MVVM模式

实战案例

1. 使用工厂模式创建各种形状对象

2. 使用单例模式创建一个全局的日志记录器

Kyle

Vite 中 Vue.js 链接失效？帮你彻底解决！

JavaScript 中如何获取对象的类：深入探讨替代方法

如何高效地按属性对对象数组进行字母顺序排序？

JavaScript **onclick()** 函数无输出？故障排除和解决方法

Google reCAPTCHA 错误分层：如何优化？

JavaScript onclick() 函数无输出？故障排除和解决方法