js实现一个按钮组件

实现一个基础按钮组件

使用原生JavaScript创建一个可复用的按钮组件，包含基础样式和点击事件。

class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
    this.element = this.createButton();
  }

  createButton() {
    const button = document.createElement('button');
    button.textContent = this.text;
    button.style.padding = '8px 16px';
    button.style.borderRadius = '4px';
    button.style.backgroundColor = '#007bff';
    button.style.color = 'white';
    button.style.border = 'none';
    button.style.cursor = 'pointer';
    button.addEventListener('click', this.onClick);
    return button;
  }

  render(container) {
    if (container) {
      container.appendChild(this.element);
    }
    return this.element;
  }
}

添加按钮状态管理

扩展按钮组件，增加禁用状态和样式变化功能。

class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
    this.disabled = false;
    this.element = this.createButton();
  }

  createButton() {
    const button = document.createElement('button');
    button.textContent = this.text;
    this.applyBaseStyles(button);
    button.addEventListener('click', () => {
      if (!this.disabled) {
        this.onClick();
      }
    });
    return button;
  }

  applyBaseStyles(button) {
    button.style.padding = '8px 16px';
    button.style.borderRadius = '4px';
    button.style.border = 'none';
    button.style.cursor = 'pointer';
    button.style.transition = 'background-color 0.3s';
    this.updateButtonStyle();
  }

  updateButtonStyle() {
    if (this.disabled) {
      this.element.style.backgroundColor = '#cccccc';
      this.element.style.cursor = 'not-allowed';
    } else {
      this.element.style.backgroundColor = '#007bff';
      this.element.style.cursor = 'pointer';
    }
  }

  setDisabled(disabled) {
    this.disabled = disabled;
    this.updateButtonStyle();
  }

  render(container) {
    if (container) {
      container.appendChild(this.element);
    }
    return this.element;
  }
}

使用CSS类代替内联样式

改进组件，使用CSS类管理样式，提高可维护性。

class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
    this.disabled = false;
    this.element = this.createButton();
  }

  createButton() {
    const button = document.createElement('button');
    button.textContent = this.text;
    button.classList.add('btn');
    button.addEventListener('click', () => {
      if (!this.disabled) {
        this.onClick();
      }
    });
    this.updateButtonStyle();
    return button;
  }

  updateButtonStyle() {
    if (this.disabled) {
      this.element.classList.add('btn-disabled');
      this.element.classList.remove('btn-active');
    } else {
      this.element.classList.add('btn-active');
      this.element.classList.remove('btn-disabled');
    }
  }

  setDisabled(disabled) {
    this.disabled = disabled;
    this.updateButtonStyle();
  }

  render(container) {
    if (container) {
      container.appendChild(this.element);
    }
    return this.element;
  }
}

配套CSS样式：

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-active {
  background-color: #007bff;
  color: white;
}

.btn-disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

添加按钮类型支持

扩展组件支持不同按钮类型（主按钮、次按钮、危险按钮等）。

class Button {
  constructor(text, onClick, options = {}) {
    this.text = text;
    this.onClick = onClick;
    this.disabled = options.disabled || false;
    this.type = options.type || 'primary';
    this.element = this.createButton();
  }

  createButton() {
    const button = document.createElement('button');
    button.textContent = this.text;
    button.classList.add('btn', `btn-${this.type}`);
    button.addEventListener('click', () => {
      if (!this.disabled) {
        this.onClick();
      }
    });
    this.updateButtonStyle();
    return button;
  }

  updateButtonStyle() {
    this.element.classList.toggle('btn-disabled', this.disabled);
  }

  setDisabled(disabled) {
    this.disabled = disabled;
    this.updateButtonStyle();
  }

  setType(type) {
    this.element.classList.remove(`btn-${this.type}`);
    this.type = type;
    this.element.classList.add(`btn-${this.type}`);
  }

  render(container) {
    if (container) {
      container.appendChild(this.element);
    }
    return this.element;
  }
}

配套CSS样式扩展：

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-success {
  background-color: #28a745;
  color: white;
}

组件使用方法示例

// 创建按钮实例
const myButton = new Button('点击我', () => {
  console.log('按钮被点击');
}, {
  type: 'primary'
});

// 渲染到页面
myButton.render(document.body);

// 禁用按钮
myButton.setDisabled(true);

// 改变按钮类型
myButton.setType('danger');

这些实现展示了如何从简单到复杂逐步构建一个可复用的JavaScript按钮组件，包含样式管理、状态控制和类型支持等功能。