javascript - ES5 编写 Web 组件类的方式是什么？

Question

要定义自定义 Web 组件，我们可以扩展 ES6 类来访问元素的生命周期 react 。

class HelloElement extends HTMLElement {
  // Monitor the 'name' attribute for changes.
  static get observedAttributes() {return ['name']; }

  // Respond to attribute changes.
  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == 'name') {
      this.textContent = `Hello, ${newValue}`;
    }
  }
}

// Define the new element
customElements.define('hello-element', HelloElement);

ES5 的等效方法是什么？

Answer 1

根据您的评论，我假设您指的是 ES6 语法，并且允许支持自定义元素的浏览器也支持 ES6 定义的函数。

要模拟调用 super() 的默认 ES6 构造函数，我们可以使用 Reflect.construct调用 HTMLElement 构造函数，但使用 HelloElement 构造函数中的原型(prototype)。

对于继承，您需要将 HelloElement 构造函数的 .prototype 设置为 HTMLElement 的实例，并在其上定义方法和属性。常规使用使用Object.create()创建一个非功能性虚拟实例而不调用此处的构造函数。

您可以使用Object.defineProperty为 observedAttributes 定义静态 getter，但它通常只是一个静态列表，您只需将 HelloElement.observedAttributes 设置为属性名称数组即可。

function HelloElement() {
   return Reflect.construct(HTMLElement, [], HelloElement);
}
HelloElement.prototype = Object.create(HTMLElement.prototype);

// Monitor the 'name' attribute for changes.
Object.defineProperty(HelloElement, 'observedAttributes', {
  get: function() { return ['name']; }
});
// or just use HelloElement.observedAttributes = ['name']
// if it doesn't need to be dynamic

// Respond to attribute changes.
HelloElement.prototype.attributeChangedCallback = function(attr, oldValue, newValue) {
  if (attr == 'name') {
    this.textContent = `Hello, ${newValue}`;
  }
}

customElements.define('hello-element', HelloElement);

setTimeout(function() {
  document.getElementById('example').setAttribute('name', "World");
}, 1000);

<hello-element id="example"></hello-element>