自定义封装一个按钮组件

在Web前端开发中，自定义封装一个按钮组件通常是为了提高代码复用性和模块化。你可以创建一个名为Button的JavaScript或TypeScript类，它会包含HTML元素的生成、样式设置以及可能的交互事件处理功能。下面是一个简单的例子，使用ES6类来展示：

class CustomButton {
  constructor(text = '点击我', onClick = () => {}) {
    this.buttonElement = document.createElement('button');
    this.buttonElement.textContent = text;
    this.buttonElement.addEventListener('click', onClick);

    // 可选属性如背景色、边框等，可以添加到构造函数参数中并用于初始化样式
    this.buttonStyle = {
      backgroundColor: '#ccc',
      borderRadius: 4,
      padding: '10px 20px'
    };
    
    // 将样式应用到元素上
    this.applyStyles();
  }

  applyStyles() {
    Object.assign(this.buttonElement.style, this.buttonStyle);
  }

  render(container) {
    container.appendChild(this.buttonElement); // 将按钮添加到指定容器中
  }
}

// 使用示例
const button = new CustomButton('我的按钮', () => console.log('按钮被点击了'));
document.getElementById('myContainer').appendChild(button.render());

在这个例子中，`CustomButton`类接受文本和点击事件处理器作为参数，并提供了一个`render`方法将按钮渲染到给定的DOM元素。你可以根据需要扩展这个类，增加更多的功能，比如支持主题切换、大小调整等。