Custom Elements 实战：教你如何构建自定义的时间选择器-JavaScript中文网-JavaScript教程资源分享门户

前言

对于前端开发者来说，自定义元素是一个很有用的工具，可以用来解决诸如样式复用、交互性、可维护性等问题。Custom Elements 是一个 Web 标准，可以定制 HTML 标签并创建自定义元素，本篇文章将通过构建一个自定义的时间选择器来介绍 Custom Elements 的基本内容。

自定义元素

在 Custom Elements 规范下，自定义元素以“-”为前缀，可以配合 Shadow DOM 和 HTML Templates 来创建定制化的元素。下面我们来看一下如何创建自定义元素。

定义自定义元素

定义自定义元素需要用到一个类，这个类继承自 HTMLElement，因此可以将自定义元素看作是一种 HTML 元素。

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}

注册自定义元素

定义完自定义元素之后，需要将其注册。使用自定义元素时，需要先在文档中注册元素，然后才能在 HTML 中使用它们。

customElements.define('my-element', MyElement);

自定义元素的名称必须包含一个连字符（-）并且不能与现有的 HTML 元素名称相同。一旦注册了自定义元素，它就可以在 HTML 中使用了。

<my-element></my-element>

至此，我们已经完成了第一个自定义元素的创建过程，接下来我们将创建一个时间选择器。

创建时间选择器

HTML 模板

创建自定义元素的第一步是创建其 HTML 模板，本文使用 Template Literal （模板字符串）来创建 HTML。模板字符串允许我们使用 ${} 插入变量，从而使代码更加简单和易于维护。

// javascriptcn.com 代码示例
const template = `
  <style>
    :host {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    input {
      margin: 0 5px;
    }

    label {
      font-size: 14px;
    }
  </style>

  <label for="hour">Hour:</label>
  <input type="number" id="hour" value="0" min="0" max="23">
  <label for="minute">Minute:</label>
  <input type="number" id="minute" value="0" min="0" max="59">
`;

属性和方法

时间选择器需要具有一些属性和方法，我们需要在自定义元素中实现这些。下面是该时间选择器的属性和方法列表：

hour: 小时数
minute: 分钟数
get value(): 获取时间选择器的值
set value(val): 设置时间选择器的值，val 是一个包含小时分钟的对象

实现代码如下：

// javascriptcn.com 代码示例
class TimePicker extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });

    // 创建 DOM
    const hourEl = document.createElement('input');
    hourEl.setAttribute('type', 'number');
    hourEl.setAttribute('id', 'hour');
    hourEl.setAttribute('min', '0');
    hourEl.setAttribute('max', '23');
    hourEl.value = '0';

    const minuteEl = document.createElement('input');
    minuteEl.setAttribute('type', 'number');
    minuteEl.setAttribute('id', 'minute');
    minuteEl.setAttribute('min', '0');
    minuteEl.setAttribute('max', '59');
    minuteEl.value = '0';

    const labelHour = document.createElement('label');
    labelHour.setAttribute('for', 'hour');
    labelHour.textContent = 'Hour:';

    const labelMinute = document.createElement('label');
    labelMinute.setAttribute('for', 'minute');
    labelMinute.textContent = 'Minute:';

    const wrapper = document.createElement('div');
    wrapper.appendChild(labelHour);
    wrapper.appendChild(hourEl);
    wrapper.appendChild(labelMinute);
    wrapper.appendChild(minuteEl);

    // 添加样式
    const style = `
      :host {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      input {
        margin: 0 5px;
      }

      label {
        font-size: 14px;
      }
    `;

    // 添加模板到 Shadow DOM
    const template = document.createElement('template');
    template.innerHTML = `
      <style>${style}</style>
      ${wrapper.outerHTML}
    `;

    shadow.appendChild(template.content.cloneNode(true));

    // 绑定事件
    hourEl.addEventListener('change', () => {
      this.setAttribute('hour', hourEl.value);
    });

    minuteEl.addEventListener('change', () => {
      this.setAttribute('minute', minuteEl.value);
    });
  }

  static get observedAttributes() {
    return ['hour', 'minute'];
  }

  get value() {
    const { hour, minute } = this;
    return { hour, minute };
  }

  set value(val) {
    const { hour, minute } = val;
    this.hour = hour;
    this.minute = minute;

    this.setAttribute('hour', hour);
    this.setAttribute('minute', minute);
  }

  get hour() {
    return parseInt(this.getAttribute('hour'));
  }

  set hour(val) {
    this.setAttribute('hour', val);
  }

  get minute() {
    return parseInt(this.getAttribute('minute'));
  }

  set minute(val) {
    this.setAttribute('minute', val);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      const { hour, minute } = this.value;
      this.dispatchEvent(new CustomEvent('change', { detail: { hour, minute } }));
    }
  }
}

customElements.define('time-picker', TimePicker);

使用时间选择器

我们已经定义了一个自定义元素 "time-picker"，现在可以在 HTML 中使用它了。

<time-picker hour="6" minute="30"></time-picker>

time-picker 元素被创建后将会在界面上呈现一个时间选择器。

事件处理

当时间选择器的值发生改变时，我们需要通知外部代码。为了实现这个功能，我们可以在 attributeChangedCallback 函数中触发自定义的 change 事件，然后通过 addEventListener 函数使用该事件。

const timePicker = document.querySelector('time-picker');
timePicker.addEventListener('change', handleChange);

function handleChange(event) {
  console.log(event.detail);
}

总结

通过本文我们了解了如何使用 Custom Elements 创建自定义元素，并通过一个例子介绍了如何构建时间选择器。希望这篇文章对大家有所帮助，欢迎大家尝试自己编写更多的自定义元素。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651975c895b1f8cacd19ecd7