前端面试常问：设计模式（2）_前端面试 策略模式

前端设计模式是一种解决常见前端问题的模板，通常用于提高代码的可读性、可维护性和可扩展性。本文将介绍一些常见的前端设计模式。

4.策略模式

策略模式是一种定义一组算法并将其封装在可互换对象中的模式。在前端开发中，策略模式通常用于处理不同的业务逻辑，如表单验证。以下是一个使用 JavaScript 实现的策略模式示例：

var validationStrategies = {
  isNotEmpty: function(value) {
    return value.trim() !== "";
  },
  isEmail: function(value) {
    var regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    return regex.test(value);
  },
  isPhoneNumber: function(value) {
    var regex = /^\d{11}$/;
    return regex.test(value);
  }
};
 
function Validator() {
  this.validationStrategy = [];
}
 
Validator.prototype.addValidation = function(strategy) {
  this.validationStrategy.push(strategy);
};
 
Validator.prototype.validate = function(value) {
  for (var i = 0; i < this.validationStrategy.length; i++) {
    if (!this.validationStrategy[i](value)) {
      return false;
    }
  }
  return true;
};
 
var validator = new Validator();
validator.addValidation(validationStrategies.isNotEmpty);
validator.addValidation(validationStrategies.isEmail);
console.log(validator.validate("test@example.com")); // true
 
validator = new Validator();
validator.addValidation(validationStrategies.isNotEmpty);
validator.addValidation(validationStrategies.isPhoneNumber);
console.log(validator.validate("12345678901")); // true

5.装饰器模式

装饰器模式是一种在不改变原有对象的基础上，动态地添加功能的模式。在前端开发中，装饰器模式通常用于添加额外的功能或修饰已有的组件，如：

function component() {
  console.log("Component is rendered");
}
 
function withLogging(component) {
  return function() {
    console.log("Component is being rendered");
    return component();
  };
}
 
function withErrorBoundary(component) {
  return function() {
    try {
      return component();
    } catch (error) {
      console.error("Error occurred:", error);
      return null;
    }
  };
}
 
var decoratedComponent = withLogging(withErrorBoundary(component));
decoratedComponent(); // "Component is being rendered" "Component is rendered"

总结

以上是一些常见的前端设计模式，它们都有着不同的应用场景和优缺点。学习和使用设计模式可以提高代码的可读性、可维护性和可扩展性，但也需要适度使用，以避免过度设计和增加复杂度。