js实现一个按钮组件

基础按钮组件实现

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

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

  render() {
    const button = document.createElement('button');
    button.textContent = this.text;
    button.addEventListener('click', this.onClick);

    // 基础样式
    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';

    return button;
  }
}

// 使用示例
const myButton = new Button('点击我', () => {
  alert('按钮被点击了!');
});
document.body.appendChild(myButton.render());

可定制的按钮组件

扩展基础按钮组件，增加样式自定义选项：

class CustomButton {
  constructor(options) {
    this.text = options.text || '按钮';
    this.onClick = options.onClick || (() => {});
    this.styles = options.styles || {};
  }

  render() {
    const button = document.createElement('button');
    button.textContent = this.text;
    button.addEventListener('click', this.onClick);

    // 应用自定义样式
    Object.assign(button.style, {
      padding: '8px 16px',
      borderRadius: '4px',
      cursor: 'pointer',
      ...this.styles
    });

    return button;
  }
}

// 使用示例
const styledButton = new CustomButton({
  text: '自定义按钮',
  onClick: () => console.log('自定义按钮点击'),
  styles: {
    backgroundColor: '#28a745',
    color: 'white',
    border: '1px solid #218838'
  }
});
document.body.appendChild(styledButton.render());

带状态的按钮组件

实现一个可以切换状态的按钮（如加载状态）：

class StatefulButton {
  constructor(text) {
    this.text = text;
    this.isLoading = false;
    this.button = document.createElement('button');
    this.render();
  }

  setLoading(loading) {
    this.isLoading = loading;
    this.render();
  }

  render() {
    this.button.textContent = this.isLoading ? '加载中...' : this.text;
    this.button.disabled = this.isLoading;

    this.button.style.padding = '8px 16px';
    this.button.style.backgroundColor = this.isLoading ? '#cccccc' : '#007bff';
    this.button.style.color = 'white';
    this.button.style.border = 'none';
    this.button.style.borderRadius = '4px';

    return this.button;
  }
}

// 使用示例
const stateButton = new StatefulButton('提交');
document.body.appendChild(stateButton.render());

// 模拟加载状态
setTimeout(() => {
  stateButton.setLoading(true);

  setTimeout(() => {
    stateButton.setLoading(false);
  }, 2000);
}, 1000);

按钮组件的最佳实践

考虑以下改进点可使按钮组件更健壮：

• 添加无障碍属性（ARIA）
• 支持键盘交互
• 添加类型属性（submit/reset/button）
• 支持禁用状态
• 添加CSS类名而非直接修改样式

class AccessibleButton {
  constructor(options) {
    this.options = {
      text: '按钮',
      type: 'button',
      disabled: false,
      className: '',
      ariaLabel: '',
      ...options
    };
  }

  render() {
    const button = document.createElement('button');
    button.textContent = this.options.text;
    button.type = this.options.type;
    button.disabled = this.options.disabled;

    if (this.options.className) {
      button.className = this.options.className;
    }

    if (this.options.ariaLabel) {
      button.setAttribute('aria-label', this.options.ariaLabel);
    }

    if (this.options.onClick) {
      button.addEventListener('click', this.options.onClick);
      button.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          this.options.onClick();
        }
      });
    }

    return button;
  }
}