前端进阶｜ 深入学习面向对象设计原则

anyup2023-09-06 16:06

引言

面向对象编程（Object-Oriented Programming，OOP）是一种常用的编程范式，它通过将数据和与之相关的操作封装在一起，提供了一种更有组织和易于理解的方式来构建应用程序。在JavaScript中，我们可以使用面向对象的设计原则来创建高质量、可维护和可扩展的代码。

本文我们将介绍一些重要的面向对象设计原则，并解释它们在JavaScript中的应用。这些原则包括但不限于单一职责原则、开放封闭原则、里式替换原则和依赖倒置原则。

通过遵循这些原则，我们可以达到解耦和模块化 的目标，使代码更具可读性、可维护性和可扩展性。我们将深入探讨每个原则的定义、核心思想和在实际项目中的应用。

1. 单一职责原则（Single Responsibility Principle，SRP）

概念

单一职责原则指出一个类应该只有一个引起变化的原因。换句话说，一个类应该只负责一个单一的职责。

案例分析

javascript 复制代码 
class Logger {
  constructor() {
    this.logs = [];
  }

  logError(message) {
    this.logs.push(`[Error] ${new Date().toISOString()}: ${message}`);
    this.saveLogsToFile();
    this.sendEmailNotification();
  }

  logInfo(message) {
    this.logs.push(`[Info] ${new Date().toISOString()}: ${message}`);
    this.saveLogsToFile();
  }

  saveLogsToFile() {
    // 将日志保存到文件中的实现
  }

  sendEmailNotification() {
    // 发送错误通知邮件的实现
  }
}

在上面的示例中，我们有一个Logger类用于日志记录。然而，根据SRP原则，一个类应该只负责一个单一的职责。在这个例子中，Logger类同时负责了记录日志、保存日志到文件和发送邮件通知。这违反了SRP原则。

为了遵守SRP原则，我们可以将这些职责拆分成不同的类：

javascript 复制代码 
class Logger {
  constructor() {
    this.logs = [];
  }

  logError(message) {
    this.logs.push(`[Error] ${new Date().toISOString()}: ${message}`);
  }

  logInfo(message) {
    this.logs.push(`[Info] ${new Date().toISOString()}: ${message}`);
  }
}

class FileSaver {
  saveLogsToFile(logger) {
    // 将日志保存到文件中的实现
  }
}

class EmailNotifier {
  sendEmailNotification(logger) {
    // 发送错误通知邮件的实现
  }
}

在重构后的代码中，我们将日志记录的职责交给了Logger类，将保存日志到文件的职责交给了FileSaver类，将发送邮件通知的职责交给了EmailNotifier类。每个类都只负责一个单一的职责，符合SRP原则。

总结

通过遵守SRP原则，我们能够提高代码的可维护性和可扩展性。当需求发生变化时，我们只需要修改相关的类，而不需要影响其他职责，从而降低了代码之间的依赖性。这样的设计能够使代码更加灵活、可测试和易于扩展。

2. 开放封闭原则（Open-Closed Principle，OCP）

概念

开放封闭原则指出软件中的对象（类、模块、函数等）应该对扩展开放，对修改封闭。换句话说，当需要增加新功能时，应该通过扩展现有代码来实现，而不是修改已有代码。

案例分析

javascript 复制代码 
// 抽象的运算类
class Operation {
  calculate() {
    throw new Error('Method not implemented.');
  }
}

// 加法运算类
class Addition extends Operation {
  constructor(a, b) {
    super();
    this.a = a;
    this.b = b;
  }

  calculate() {
    return this.a + this.b;
  }
}

// 减法运算类
class Subtraction extends Operation {
  constructor(a, b) {
    super();
    this.a = a;
    this.b = b;
  }

  calculate() {
    return this.a - this.b;
  }
}

// 计算器类
class Calculator {
  constructor() {
    this.operations = [];
  }

  addOperation(operation) {
    this.operations.push(operation);
  }

  getTotal() {
    let total = 0;
    this.operations.forEach(operation => {
      total += operation.calculate();
    });
    return total;
  }
}

const calculator = new Calculator();
calculator.addOperation(new Addition(2, 3));
calculator.addOperation(new Subtraction(5, 1));
calculator.addOperation(new Addition(4, 6));
console.log(`Total: ${calculator.getTotal()}`); // Output: Total: 19

在上面的示例中，我们有一个抽象的运算类Operation，以及两个具体的运算类Addition和Subtraction。根据OCP原则，我们应该通过扩展现有代码来增加新的运算功能，而不是修改现有代码。

Calculator类是一个计算器类，它可以执行多个运算并累加结果。在Calculator类的getTotal方法中，我们使用了多态性，通过调用运算对象的calculate方法来计算运算结果。

通过使用OCP原则，当需要添加新的运算时，我们只需要创建一个新的运算类继承自Operation，实现自己的计算逻辑，并将其添加到计算器对象中，而不需要修改原有的代码。这种方式能够保持原有代码的稳定性和可维护性，同时也使得代码更灵活、可扩展。

总结

OCP原则提倡使用抽象和多态来实现可扩展性和可维护性。通过使用继承、多态 等面向对象的特性，我们可以以开放 的方式添加新功能，同时封闭对原有代码的修改，从而提高代码的可复用性和可扩展性。

3. 里氏替换原则（Liskov Substitution Principle，LSP）

概念

里氏替换原则指出子类对象应该能够替代其父类对象出现在程序中的任何地方，而不引起错误或异常。

案例分析

javascript 复制代码 
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  setWidth(width) {
    this.width = width;
  }

  setHeight(height) {
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }

  setWidth(width) {
    this.width = width;
    this.height = width;
  }

  setHeight(height) {
    this.width = height;
    this.height = height;
  }
}

function printArea(rectangle) {
  rectangle.setWidth(4);
  rectangle.setHeight(5);
  console.log(`Area: ${rectangle.getArea()}`);
}

const rectangle = new Rectangle(2, 3);
const square = new Square(5);

printArea(rectangle); // Output: Area: 20
printArea(square); // Output: Area: 25

在上面的示例中，我们有一个父类Rectangle和一个子类Square。根据LSP原则，我们应该能够用子类对象替代父类对象出现在程序中的任何地方，而不引起错误或异常。

在Rectangle类中，我们有一个setWidth方法和一个setHeight方法来分别设置宽度和高度，以及一个getArea方法来计算矩形的面积。

Square类继承自Rectangle类，但是它重写了父类的setWidth和setHeight方法，使得无论设置宽度还是高度，都会同时改变宽度和高度，以保证正方形的特性。

在printArea函数中，我们接受一个Rectangle对象，并设置宽度和高度为4和5，然后打印结果。根据LSP原则，我们可以在函数中使用子类的对象Square作为参数，因为子类应该能够替代父类而不引起错误。

总结

通过遵守LSP原则，我们可以提高代码的可扩展性和可维护性。如果我们遇到新的子类，我们可以放心地将其用作父类的替代，而不必担心引发错误或异常。

4. 接口隔离原则（Interface Segregation Principle，ISP）

概念

接口隔离原则指出客户端不应该强制依赖它不需要的接口，应该将接口分离成更小和更具体的接口。这样做可以减少不必要的依赖关系，提高代码的灵活性和可扩展性。

案例分析

假设我们有一个社交媒体应用程序，其中有不同类型的用户，包括普通用户和管理员用户。我们需要为这些不同的用户提供不同的功能，例如登录、发布文章和发送消息。根据接口隔离原则，我们可以将这些功能拆分成更小和更具的接口，以便客户端只需依赖它们所需的接口。

javascript 复制代码 
// 不遵循接口隔离原则的代码示例
class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }

  login() {
    // 用户登录逻辑
  }

  logout() {
    // 用户退出逻辑
  }

  publishArticle() {
    // 发布文章的逻辑
  }

  sendMessage() {
    // 发送消息的逻辑
  }
}

// 遵循接口隔离原则的代码示例
class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }

  login() {
    // 用户登录逻辑
  }

  logout() {
    // 用户退出逻辑
  }
}

class ArticlePublisher {
  publishArticle() {
    // 发布文章的逻辑
  }
}

class Messenger {
  sendMessage() {
    // 发送消息的逻辑
  }
}

在上面的示例中，我们将功能拆分为三个接口：User、ArticlePublisher和Messenger。普通用户只需要依赖User接口，而管理员用户可以依赖User、ArticlePublisher和Messenger接口。

总结

使用接口隔离原则，我们可以避免普通用户依赖不需要的接口方法，从而减少不必要的依赖关系 并提高代码的灵活性。如果以后需要添加新的功能接口，也可以根据需要扩展相应的接口而不会影响到其他接口的实现和客户端的代码。

5. 依赖倒置原则（Dependency Inversion Principle，DIP）

概念

依赖倒置原则指出依赖于抽象而不是具体的实现。通过使用依赖注入等技术，我们可以将依赖关系从高层模块转移到低层模块，减少模块间的依赖，提高代码的可测试性、可维护性和可扩展性。

案例分析

假设我们有一个电子商务网站，有一个购物车模块和一个支付模块。购物车模块负责管理用户的购物车，而支付模块负责处理用户的支付请求。根据依赖倒置原则，我们应该将抽象的接口作为依赖，而不是具体的实现类，以实现模块之间的解耦。

javascript 复制代码 
// 不遵循依赖倒置原则的代码示例
class ShoppingCart {
  constructor() {
    this.items = [];
  }

  add(item) {
    this.items.push(item);
  }

  calculateTotal() {
    let total = 0;
    for (let item of this.items) {
      total += item.price;
    }
    return total;
  }
}

class PaymentProcessor {
  processPayment(amount) {
    // 处理支付逻辑
  }
}

class ShoppingCartApp {
  constructor() {
    this.cart = new ShoppingCart();
    this.paymentProcessor = new PaymentProcessor();
  }

  checkout() {
    const total = this.cart.calculateTotal();
    this.paymentProcessor.processPayment(total);
  }
}

// 遵循依赖倒置原则的代码示例
class ShoppingCart {
  constructor() {
    this.items = [];
  }

  add(item) {
    this.items.push(item);
  }

  calculateTotal() {
    let total = 0;
    for (let item of this.items) {
      total += item.price;
    }
    return total;
  }
}

class PaymentProcessor {
  processPayment(amount) {
    // 处理支付逻辑
  }
}

class ShoppingCartApp {
  constructor(cart, paymentProcessor) {
    this.cart = cart;
    this.paymentProcessor = paymentProcessor;
  }

  checkout() {
    const total = this.cart.calculateTotal();
    this.paymentProcessor.processPayment(total);
  }
}

// 使用依赖注入来组装类的依赖关系
const cart = new ShoppingCart();
const paymentProcessor = new PaymentProcessor();
const app = new ShoppingCartApp(cart, paymentProcessor);

在上面的示例中，我们将购物车模块和支付模块的具体实现与应用程序的逻辑解耦，并使用依赖注入的方式在应用程序的构造函数中传入依赖的抽象接口。

总结

使用依赖倒置原则，我们可以将依赖关系从高层模块转移到低层模块，从而提高代码的可测试性、可维护性和可扩展性 。通过依赖注入，我们可以在运行时动态地传入不同的实现类，使得应用程序更加灵活和可配置。另外，依赖倒置原则还可以降低模块之间的耦合度，提高代码的重用性和可理解性。

6. 迪米特法则（Law of Demeter，LoD）

概念

迪米特法则也称为最少知识原则（Least Knowledge Principle，LKP）。它强调了模块（类、对象）之间应该尽量减少直接的交互，只和自己的密友交流。

迪米特法则的目标是减少对象之间的耦合，提高系统的可维护性和可复用性。当一个对象只与少数几个密友（直接的组件、关联的类等）交互时，它的设计更加简洁、清晰，并且对外部的改变更具有抵抗力。

案例分析

javascript 复制代码 
class Teacher {
  constructor(name) {
    this.name = name;
    this.students = [];
  }

  addStudent(student) {
    this.students.push(student);
  }

  getStudents() {
    return this.students;
  }

  // ...
}

class Student {
  constructor(name) {
    this.name = name;
  }

  // ...
}

class School {
  constructor() {
    this.teachers = [];
  }

  addTeacher(teacher) {
    this.teachers.push(teacher);
  }

  // ...
}

在上面的示例中，Teacher类和Student类是两个独立的类，它们分别代表教师和学生。School类则代表学校，用于管理教师和学生的信息。

根据迪米特法则，School类不应该直接访问Teacher类和Student类的具体信息，而应该只和它们的接口进行交互。换句话说，School类应该尽量减少对其他类的依赖。

为了符合迪米特法则，我们可以修改School类如下：

javascript 复制代码 
class School {
  constructor() {
    this.teachers = [];
  }

  addTeacher(teacher) {
    this.teachers.push(teacher);
    teacher.getStudents().forEach(student => {
      // 对学生进行其他操作
    });
  }

  // ...
}

在修改后的School类中，我们只和Teacher类的接口进行交互，通过teacher.getStudents()方法获取学生列表，然后可以进行其他操作。

总结

通过遵守迪米特法则，我们能够减少模块之间的耦合 ，使得代码更加模块化、可维护和可测试 。这样的设计能够提高系统的灵活性和扩展性 ，并且减少代码的依赖性，使得代码更具有可复用性。

结语

在本文中，我们介绍了JavaScript面向对象设计原则的六个基本原则：单一职责原则（SRP） 、开闭原则（OCP） 、Liskov替换原则（LSP） 、接口隔离原则（ISP） 、依赖倒置原则（DIP）和迪米特法则（LoD）。

这些原则为我们提供了指导，帮助我们构建高质量 、可维护 和可扩展 的JavaScript代码。通过遵循这些原则，我们能够使代码更加模块化、清晰和易于理解 。此外，它们还有助于降低代码的耦合度 ，提高代码的重用性和灵活性。

希望本篇文章对您在JavaScript面向对象设计方面有所启发和帮助。通过遵循这些原则，您将能够提高自己的代码质量，从而成为一名更加出色的JavaScript开发者。

相关推荐
码客前端2 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛3 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程15 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保16 分钟前
上传文件，在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫17 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
博主花神17 分钟前
【React】扩展知识点
javascript·react.js·ecmascript
欧阳天风24 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder28 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理28 分钟前
架构解析：同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活
沐墨染30 分钟前
大型数据分析组件前端实践：多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04Labelme从安装到标注：零基础完整指南05jdk21下载、安装（Windows、Linux、macOS）06手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！07【踩坑笔记】50系显卡适配的 PyTorch 安装08GitLab 零基础入门指南：从安装到项目管理全流程09Opencode CLI 安装成功,但是启动失败10UV安装并设置国内源