js实现toggleclass

实现toggleClass的基本方法

使用原生JavaScript实现toggleClass功能，可以通过操作DOM元素的classList属性完成。以下是一个基础实现：

function toggleClass(element, className) {
  element.classList.toggle(className);
}

调用方式：

const btn = document.getElementById('myButton');
toggleClass(btn, 'active');

支持多个类名的切换

如果需要同时切换多个类名，可以扩展函数功能：

function toggleClasses(element, ...classNames) {
  classNames.forEach(className => {
    element.classList.toggle(className);
  });
}

调用示例：

toggleClasses(btn, 'active', 'highlight', 'disabled');

带有回调函数的实现

某些场景下需要在切换类名后执行特定操作，可以添加回调参数：

function toggleClassWithCallback(element, className, callback) {
  const hadClass = element.classList.contains(className);
  element.classList.toggle(className);
  if (callback) callback(!hadClass);
}

使用示例：

toggleClassWithCallback(btn, 'active', (isActive) => {
  console.log(isActive ? '已激活' : '已取消');
});

兼容旧浏览器的polyfill

对于需要支持IE9等旧浏览器的项目，可以添加classList的polyfill或使用className实现：

function toggleClassLegacy(element, className) {
  const current = element.className;
  const hasClass = current.indexOf(className) >= 0;

  if (hasClass) {
    element.className = current.replace(
      new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), ' '
    ).trim();
  } else {
    element.className += ' ' + className;
  }
}

jQuery风格的链式调用实现

如果需要模仿jQuery的链式调用模式，可以扩展Element原型：

Element.prototype.toggleClass = function(...classNames) {
  classNames.forEach(className => {
    this.classList.toggle(className);
  });
  return this;
};

使用方式：

document.getElementById('myDiv')
  .toggleClass('active')
  .toggleClass('visible')
  .setAttribute('data-state', 'modified');

性能优化版本

对于需要频繁操作的场景，可以考虑以下优化方案：

const toggleClass = (function() {
  const classListProp = 'classList';
  const toggleFn = 'toggle';

  return function(element, className) {
    if (element[classListProp]) {
      element[classListProp][toggleFn](className);
    } else {
      let classes = element.className.split(' ');
      const index = classes.indexOf(className);

      if (index >= 0) {
        classes.splice(index, 1);
      } else {
        classes.push(className);
      }

      element.className = classes.join(' ');
    }
  };
})();

动画过渡支持

结合CSS过渡效果时，可以添加transition类：

function toggleClassWithTransition(element, className) {
  element.classList.add('transition');
  element.classList.toggle(className);

  element.addEventListener('transitionend', function handler() {
    element.classList.remove('transition');
    element.removeEventListener('transitionend', handler);
  });
}

对应的CSS：

.transition {
  transition: all 0.3s ease;
}