Custom Elements：如何管理状态？

在 Web 开发中，Custom Elements 是一个非常强大的工具，它允许我们创建自定义的 HTML 元素，扩展现有的 HTML 标签，实现自定义标签在浏览器中的渲染和交互能力。但是，在实际开发中，如何正确地管理 Custom Elements 中的状态是一个值得深入探讨的问题。

什么是状态？

状态是指 Custom Elements 中所保存的一些数据，这些数据代表着 Custom Elements 的当前状态，例如开关按钮的开关状态、轮播图的当前页码、弹窗的展示状态等等。在 Custom Elements 中，这些状态数据通常会被保存在元素的属性中，以方便我们在不同的函数中获取和修改。

下面是一个简单的示例，展示了如何在 Custom Elements 中定义一个名为 counter 的计数器组件，其中 state 属性用于保存计数器的当前数值：

// www.javascriptcn.com code example
class Counter extends HTMLElement {
  #state = { count: 0 };
  
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="add">+</button>
      <span id="count">${this.#state.count}</span>
    `;

    const addButton = this.shadowRoot.querySelector('#add');
    addButton.addEventListener('click', () => {
      this.#state.count++;
      this.shadowRoot.querySelector('#count').textContent = this.#state.count;
    });
  }
}

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

可以看到，在上面的代码中，我们将当前计数器的状态保存在了 Counter 类的私有属性 #state 中，同时在构造函数中使用 this.shadowRoot.innerHTML 的方式设置了组件的 HTML 内容，并且为按钮添加了点击事件，用于增加计数器的数值。

如何修改状态？

在 Custom Elements 中，修改元素的状态通常有两种方式：

1.通过设置元素的属性

我们可以通过设置元素的属性，来修改元素的状态。对于上面的计数器组件，我们可以定义一个名为 count 的属性，并在属性被修改时同步更新计数器的显示。

// www.javascriptcn.com code example
class Counter extends HTMLElement {
  #state = { count: 0 };
  
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="add">+</button>
      <span id="count">${this.#state.count}</span>
    `;

    const addButton = this.shadowRoot.querySelector('#add');
    addButton.addEventListener('click', () => {
      this.count++;
    });
  }

  static get observedAttributes() {
    return ['count'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'count') {
      this.#state.count = Number(newValue) || 0;
      this.shadowRoot.querySelector('#count').textContent = this.#state.count;
    }
  }

  set count(value) {
    this.setAttribute('count', value);
  }

  get count() {
    return Number(this.getAttribute('count')) || 0;
  }
}

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

可以看到，我们在 Counter 类中定义了一个静态方法 observedAttributes，该方法返回一个数组，表示需要监控的属性列表。当这些属性被修改时，浏览器会调用 attributeChangedCallback 方法，并传入 name、oldValue 和 newValue 参数，用于更新元素的状态。

同时，我们在计数器组件中定义了一个名为 count 的属性，用于保存当前的计数器数值，通过 setter 和 getter 方法来实现属性值和状态的同步更新。

2.通过自定义事件

除了设置属性外，我们还可以通过自定义事件来修改元素的状态，例如：

// www.javascriptcn.com code example
class Counter extends HTMLElement {
  #state = { count: 0 };
  
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="add">+</button>
      <span id="count">${this.#state.count}</span>
    `;

    const addButton = this.shadowRoot.querySelector('#add');
    addButton.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('counterIncrement', { detail: { count: ++this.#state.count } }));
    });

    this.addEventListener('counterIncrement', (event) => {
      this.#state.count = event.detail.count;
      this.shadowRoot.querySelector('#count').textContent = this.#state.count;
    });
  }
}

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

可以看到，我们在点击 + 按钮时，通过 dispatchEvent 方法触发了一个名为 counterIncrement 的自定义事件，在事件处理函数中更新了计数器的状态。与属性更新不同，通过自定义事件可以更加灵活地控制元素的状态变化，尤其是在处理多元素联动的情况下，能够提供更好的编程体验和代码可读性。

如何维护状态？

在大型应用中，管理 Custom Elements 的状态是一项非常复杂的任务，随着应用规模的扩大，状态的管理难度也会逐渐增大。为了避免出现过多的状态管理逻辑，我们需要采用一些有效的技巧，例如：

1.将状态集中管理

通常情况下，一个 Custom Element 会包含多个状态属性，为了更好地组织和管理这些状态属性，我们可以将它们集中存放在一个对象中，并通过 getter 和 setter 方法来访问和修改这些属性。例如：

// www.javascriptcn.com code example
class Counter extends HTMLElement {
  #state = { count: 0 };

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="add">+</button>
      <span id="count">${this.#state.count}</span>
    `;
  }

  set state(value) {
    Object.assign(this.#state, value);
    this.shadowRoot.querySelector('#count').textContent = this.#state.count;
  }

  get state() {
    return this.#state;
  }

  connectedCallback() {
    const addButton = this.shadowRoot.querySelector('#add');
    addButton.addEventListener('click', () => {
      this.state = { count: ++this.#state.count };
    });
  }
}

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

可以看到，在上述代码中，我们将计数器的状态保存在了一个名为 #state 的私有属性中，将状态的操作逻辑集中到了 state 属性中，并通过 Object.assign 方法来实现属性值的合并和更新。这种方式可以大大简化状态管理的逻辑，提高代码的可维护性和可读性。

2.避免状态共享

在 Custom Elements 中，尽量避免将状态共享给其他模块或组件，以免出现状态污染和难以追踪的状态更新问题。通常情况下，我们可以通过自定义事件或属性等方式，将状态的更新和操作逻辑封装在元素内部，避免外部修改造成不必要的影响。例如：

// www.javascriptcn.com code example
class Counter extends HTMLElement {
  #state = { count: 0 };

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="add">+</button>
      <span id="count">${this.#state.count}</span>
    `;
    const addButton = this.shadowRoot.querySelector('#add');
    addButton.addEventListener('click', () => {
      this.#increment();
    });
  }

  #increment() {
    this.#state.count++;
    this.shadowRoot.querySelector('#count').textContent = this.#state.count;
    this.dispatchEvent(new CustomEvent('counterIncrement', { bubbles: true, detail: { count: this.#state.count } }));
  }

  static get observedAttributes() {
    return ['count'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'count') {
      this.#state.count = Number(newValue) || 0;
      this.shadowRoot.querySelector('#count').textContent = this.#state.count;
    }
  }

  set count(value) {
    this.setAttribute('count', value);
  }

  get count() {
    return Number(this.getAttribute('count')) || 0;
  }
}

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

在上述代码中，我们通过自定义事件 counterIncrement 来实现计数器状态的更新，并通过 bubbles 属性来决定是否向祖先节点冒泡。这种方式避免了元素状态的共享和外部干涉，提高了代码的健壮性和可维护性。

小结

Custom Elements 是 Web 开发中的重要一环，它允许我们扩展 HTML 标签并实现自定义组件的功能。对于 Custom Elements 中的状态管理，我们应该合理地设计状态管理结构，避免出现过多的状态管理逻辑和状态共享问题，以提高代码的健壮性和可读性。同时，在状态更新时，我们应该尽量使用自定义事件的方式来实现状态的改变和同步，这样能够提供更好的编程体验和代码可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7a7f8a941bf7134db647d