代码优化之策略模式

什么是策略模式：

策略模式是一种行为型设计模式，它允许定义一系列算法，并将这些算法封装到不同的策略类中。

策略模式的目的是让这些算法可以相互替换，从而使得算法的变化不影响使用这些算法的客户端。策略模式的核心思想是将使用算法的责任和算法本身分开，委派给不同的对象来管理。这种模式提高了代码的可维护性和扩展性，因为新的策略可以很容易地被添加到系统中。

策略模式通常包含三种类别：抽象策略类、具体策略类、环境类。抽象策略类定义了一个公共接口，具体策略类实现了这个接口并封装了具体的算法，环境类持有一个抽象策略类的引用，并提供给客户端调用不同的策略。

例子：

用map结构优化if else

修改前的代码

function createElements(tagName) {
  if(tagName.type=='car'){
    const element = document.createElement(tagName);
    element.className = 'classCar';
    element.textContent = 'car';
    return element;
  } else if (tagName.type=='bus') {
    const element = document.createElement(tagName);
    element.className = 'classBus';
    element.textContent = 'bus';
    return element;
  } else if (tagName.type=='truck') {
    const element = document.createElement(tagName);
    element.className = 'classTruck';
    element.textContent = 'truck';
    return element;
  } else {
    const element = document.createElement(tagName);
    element.className = 'classOther';
    element.textContent = 'other';
    return element;
  }
}

用策略模式修改之后

const map = {
  car: {
    className: 'classCar',
    textContent: 'car',
    click () {
      console.log('car');
    }
  },
  bus: {
    className: 'classBus',
    textContent: 'bus',
    click () {
      console.log('bus');
    }
  },
  truck: {
    className: 'classTruck',
    textContent: 'truck',
    click () {
      console.log('truck');
    }
  },
  other: {
    className: 'classOther',
    textContent: 'other',
    click () {
      console.log('other');
    }
  }
};
function createElements(tagName) {
  if (!map[tagName.type]) {
    throw new Error('Invalid type');
  }
  const element = document.createElement('div');
  element.className = `item ${map[tagName.type].className}`;
  element.textContent = map[tagName.type].textContent;
  element.click = map[tagName.type].click;
  // element.addEventListener('click', map[tagName.type].click);
  return element;
}