javascript如何实现组件化_如何定义组件

class Counter {
  constructor({ initial = 0, onChange }) {
    this.count = initial;
    this.onChange = onChange;
  }

  render() {
    return `
      
        Count: ${this.count}
        +
        −
      
    `;
  }

  mount(el) {
    el.innerHTML = this.render();
    // 绑定私有处理函数（注意：实际项目建议用事件委托或 addEventListener）
    const root = el.querySelector('.counter');
    root.__handleInc = () => this.increment();
    root.__handleDec = () => this.decrement();
  }

  increment() {
    this.count++;
    this.onChange?.(this.count);
  }

  decrement() {
    this.count--;
    this.onChange?.(this.count);
  }
}

// 使用
const counter = new Counter({ initial: 5, onChange: (v) => console.log('new value:', v) });
counter.mount(document.getElementById('app'));

class MyCounter extends HTMLElement {
  static get observedAttributes() { return ['count']; }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.count = +this.getAttribute('count') || 0;
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'count') {
      this.count = +newValue || 0;
      this.render();
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      
      
        Count: ${this.count}
        +
        −
      
    `;
  }

  inc() {
    this.count++;
    this.setAttribute('count', this.count);
    this.dispatchEvent(new CustomEvent('change', { detail: this.count }));
  }

  dec() {
    this.count--;
    this.setAttribute('count', this.count);
    this.dispatchEvent(new CustomEvent('change', { detail: this.count }));
  }
}

customElements.define('my-counter', MyCounter);