正文

掌握 JavaScript 责任链模式：提升代码灵活性与可扩展性的5个实用案例

/0 浏览量
0829

责任链模式是一种行为设计模式，允许你将请求的发送者和接收者解耦。在这种模式中，多个对象都有机会处理请求，从而提高了代码的灵活性和可扩展性。以下是一些使用 JavaScript 实现责任链模式的实用案例。

案例一：表单验证

在Web开发中，表单验证是一个常见的需求。使用责任链模式，你可以创建一系列的验证器，每个验证器负责检查一个特定的验证规则。

class Validator {
  constructor(next) {
    this.next = next;
  }

  validate(value) {
    // 验证逻辑
    if (this.isValid(value)) {
      return true;
    } else {
      return this.next ? this.next.validate(value) : false;
    }
  }

  isValid(value) {
    // 默认验证逻辑
    return true;
  }
}

class RequiredValidator extends Validator {
  isValid(value) {
    return value.trim() !== '';
  }
}

class LengthValidator extends Validator {
  constructor(next) {
    super(next);
    this.minLength = 3;
    this.maxLength = 10;
  }

  isValid(value) {
    return value.length >= this.minLength && value.length <= this.maxLength;
  }
}

// 使用
const requiredValidator = new RequiredValidator();
const lengthValidator = new LengthValidator(requiredValidator);
const input = 'abc';

console.log(lengthValidator.validate(input)); // true

案例二：错误处理

在异步操作中，错误处理是一个重要的环节。责任链模式可以帮助你将错误处理逻辑分散到不同的处理者中。

class ErrorHandler {
  constructor(next) {
    this.next = next;
  }

  handle(error) {
    if (this.handleError(error)) {
      return true;
    } else {
      return this.next ? this.next.handle(error) : false;
    }
  }

  handleError(error) {
    // 错误处理逻辑
    console.error('Error handled by', this.constructor.name, error);
    return true;
  }
}

class NetworkErrorHandler extends ErrorHandler {
  handleError(error) {
    if (error instanceof NetworkError) {
      console.error('Network error occurred', error);
      return true;
    }
    return false;
  }
}

class GeneralErrorHandler extends ErrorHandler {
  handleError(error) {
    console.error('General error occurred', error);
    return true;
  }
}

// 使用
const networkErrorHandler = new NetworkErrorHandler(new GeneralErrorHandler());
const error = new NetworkError('Network connection failed');

networkErrorHandler.handle(error); // Network error occurred

案例三：日志记录

日志记录是软件应用中不可或缺的一部分。责任链模式可以帮助你将不同的日志级别和格式分散到不同的日志处理者中。

class Logger {
  constructor(next) {
    this.next = next;
  }

  log(message, level) {
    if (this.logMessage(message, level)) {
      return;
    } else {
      this.next ? this.next.log(message, level) : null;
    }
  }

  logMessage(message, level) {
    // 日志记录逻辑
    console.log(`[${level}] ${message}`);
    return true;
  }
}

class ConsoleLogger extends Logger {
  logMessage(message, level) {
    console.log(`ConsoleLogger: ${level}`, message);
    return true;
  }
}

class FileLogger extends Logger {
  logMessage(message, level) {
    // 将日志写入文件
    console.log(`FileLogger: ${level}`, message);
    return true;
  }
}

// 使用
const consoleLogger = new ConsoleLogger(new FileLogger());
consoleLogger.log('This is a debug message', 'DEBUG');

案例四：命令处理

在命令行界面或富客户端应用中，命令处理是一个常见的需求。责任链模式可以帮助你将不同的命令处理逻辑分散到不同的处理者中。

class CommandHandler {
  constructor(next) {
    this.next = next;
  }

  handle(command) {
    if (this.handleCommand(command)) {
      return;
    } else {
      this.next ? this.next.handle(command) : null;
    }
  }

  handleCommand(command) {
    // 命令处理逻辑
    console.log(`Handling command: ${command}`);
    return true;
  }
}

class SaveCommandHandler extends CommandHandler {
  handleCommand(command) {
    if (command === 'save') {
      console.log('Saving data...');
      return true;
    }
    return false;
  }
}

class LoadCommandHandler extends CommandHandler {
  handleCommand(command) {
    if (command === 'load') {
      console.log('Loading data...');
      return true;
    }
    return false;
  }
}

// 使用
const saveCommandHandler = new SaveCommandHandler(new LoadCommandHandler());
saveCommandHandler.handle('save'); // Handling command: save
saveCommandHandler.handle('load'); // Handling command: load

案例五：权限控制

在许多应用中，权限控制是一个重要的环节。责任链模式可以帮助你将不同的权限检查逻辑分散到不同的检查者中。

class PermissionChecker {
  constructor(next) {
    this.next = next;
  }

  check(permission, user) {
    if (this.hasPermission(permission, user)) {
      return true;
    } else {
      return this.next ? this.next.check(permission, user) : false;
    }
  }

  hasPermission(permission, user) {
    // 权限检查逻辑
    console.log(`Checking permission ${permission} for user ${user}`);
    return true;
  }
}

class RoleBasedPermissionChecker extends PermissionChecker {
  hasPermission(permission, user) {
    if (user.roles.includes(permission)) {
      console.log('User has permission');
      return true;
    }
    return false;
  }
}

class AttributeBasedPermissionChecker extends PermissionChecker {
  hasPermission(permission, user) {
    if (user.attributes.includes(permission)) {
      console.log('User has attribute-based permission');
      return true;
    }
    return false;
  }
}

// 使用
const roleBasedChecker = new RoleBasedPermissionChecker(new AttributeBasedPermissionChecker());
const user = { roles: ['admin'], attributes: ['read'] };

console.log(roleBasedChecker.check('read', user)); // User has permission
console.log(roleBasedChecker.check('write', user)); // User has attribute-based permission

通过以上案例，我们可以看到责任链模式在JavaScript中的强大应用。这种模式可以帮助你将复杂的逻辑分解成小的、可管理的部分，从而提高代码的灵活性和可扩展性。

-- 展开阅读全文 --