js实现button类

实现Button类的基本结构

在JavaScript中创建一个Button类可以通过面向对象的方式封装按钮的属性和行为。以下是一个基础的实现示例：

class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
    this.element = document.createElement('button');
    this.render();
  }

  render() {
    this.element.textContent = this.text;
    this.element.addEventListener('click', this.onClick);
    return this.element;
  }
}

添加样式和自定义属性

扩展Button类以支持样式和自定义属性：

class Button {
  constructor(text, onClick, options = {}) {
    this.text = text;
    this.onClick = onClick;
    this.options = options;
    this.element = document.createElement('button');
    this.render();
  }

  render() {
    this.element.textContent = this.text;
    this.element.addEventListener('click', this.onClick);

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

    if (this.options.disabled) {
      this.element.disabled = true;
    }

    return this.element;
  }
}

动态更新按钮状态

添加方法来动态更新按钮的文本和状态：

class Button {
  // ... 之前的代码 ...

  setText(newText) {
    this.text = newText;
    this.element.textContent = newText;
  }

  setDisabled(isDisabled) {
    this.element.disabled = isDisabled;
  }
}

事件处理的改进

优化事件处理，支持移除监听器：

class Button {
  constructor(text, onClick, options = {}) {
    this.text = text;
    this._onClick = onClick;
    this.options = options;
    this.element = document.createElement('button');
    this.render();
  }

  _handleClick = (e) => {
    if (this._onClick) {
      this._onClick(e);
    }
  };

  render() {
    this.element.textContent = this.text;
    this.element.addEventListener('click', this._handleClick);
    // ... 其他渲染逻辑 ...
  }

  destroy() {
    this.element.removeEventListener('click', this._handleClick);
  }
}

使用示例

创建和使用Button实例：

const myButton = new Button('Click me', () => {
  console.log('Button clicked!');
}, {
  className: 'primary-btn',
  disabled: false
});

document.body.appendChild(myButton.element);

// 更新按钮
myButton.setText('New Text');
myButton.setDisabled(true);

支持HTML内容

如果需要支持HTML而不仅仅是文本：

class Button {
  constructor(content, onClick, options = {}) {
    this.content = content;
    this.onClick = onClick;
    this.options = options;
    this.element = document.createElement('button');
    this.render();
  }

  render() {
    if (typeof this.content === 'string') {
      this.element.textContent = this.content;
    } else {
      this.element.innerHTML = '';
      this.element.appendChild(this.content);
    }
    // ... 其他渲染逻辑 ...
  }
}

这些实现提供了Button类的基本功能，可以根据具体需求进一步扩展和完善。