实战 | 使用 Custom Elements 实现一个图片展示组件-JavaScript中文网-JavaScript教程资源分享门户

前言

Custom Elements 是 Web Components 的一部分，是一种自定义 HTML 元素的方式。通过使用 Custom Elements，我们可以创建自定义的 HTML 元素，这些元素可以像原生 HTML 元素一样使用，并且可以封装自己的行为和样式。

在本文中，我们将介绍如何使用 Custom Elements 实现一个图片展示组件。这个组件可以用来展示一组图片，并且可以通过一些配置参数来实现不同的展示效果。

实现思路

我们的图片展示组件需要实现以下功能：

显示图片列表
可以切换图片
可以设置图片切换的时间间隔
可以设置图片的宽度和高度

为了实现以上功能，我们需要实现以下步骤：

创建一个自定义元素
在元素中添加一个图片容器和一个控制按钮容器
在图片容器中添加图片元素，并实现图片切换的逻辑
在控制按钮容器中添加切换按钮，并实现切换按钮的逻辑
实现组件的配置参数

实现步骤

步骤一：创建一个自定义元素

我们可以使用 window.customElements.define() 方法来创建一个自定义元素。这个方法接收两个参数：元素名称和元素实现类。元素名称应该使用短横线连接的小写字母，例如 my-element。元素实现类应该继承自 HTMLElement 类。

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}
window.customElements.define('my-element', MyElement);

步骤二：添加一个图片容器和一个控制按钮容器

我们可以在自定义元素的 constructor() 方法中添加一个图片容器和一个控制按钮容器。图片容器可以使用一个 div 元素，控制按钮容器可以使用一个 ul 元素。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const container = document.createElement('div');
    const controls = document.createElement('ul');
    this.shadowRoot.appendChild(container);
    this.shadowRoot.appendChild(controls);
  }
}
window.customElements.define('my-element', MyElement);

步骤三：添加图片元素

我们可以在图片容器中添加多个图片元素，并使用 CSS 来控制它们的显示和隐藏。我们可以使用一个变量来记录当前显示的图片索引，然后在定时器中更新图片的显示状态。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const container = document.createElement('div');
    const controls = document.createElement('ul');
    this.currentIndex = 0;
    this.images = [
      'https://picsum.photos/id/100/800/600',
      'https://picsum.photos/id/200/800/600',
      'https://picsum.photos/id/300/800/600',
      'https://picsum.photos/id/400/800/600',
    ];
    this.shadowRoot.appendChild(container);
    this.shadowRoot.appendChild(controls);
    this.images.forEach((url, index) => {
      const img = document.createElement('img');
      img.src = url;
      img.style.display = index === this.currentIndex ? 'block' : 'none';
      container.appendChild(img);
    });
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
      this.images.forEach((url, index) => {
        const img = container.children[index];
        img.style.display = index === this.currentIndex ? 'block' : 'none';
      });
    }, 3000);
  }
}
window.customElements.define('my-element', MyElement);

步骤四：添加切换按钮

我们可以在控制按钮容器中添加多个切换按钮，然后在按钮的 click 事件中更新当前显示的图片索引。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const container = document.createElement('div');
    const controls = document.createElement('ul');
    this.currentIndex = 0;
    this.images = [
      'https://picsum.photos/id/100/800/600',
      'https://picsum.photos/id/200/800/600',
      'https://picsum.photos/id/300/800/600',
      'https://picsum.photos/id/400/800/600',
    ];
    this.shadowRoot.appendChild(container);
    this.shadowRoot.appendChild(controls);
    this.images.forEach((url, index) => {
      const img = document.createElement('img');
      img.src = url;
      img.style.display = index === this.currentIndex ? 'block' : 'none';
      container.appendChild(img);
    });
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
      this.images.forEach((url, index) => {
        const img = container.children[index];
        img.style.display = index === this.currentIndex ? 'block' : 'none';
      });
    }, 3000);
    this.images.forEach((url, index) => {
      const li = document.createElement('li');
      const button = document.createElement('button');
      button.innerText = index + 1;
      button.addEventListener('click', () => {
        this.currentIndex = index;
        this.images.forEach((url, index) => {
          const img = container.children[index];
          img.style.display = index === this.currentIndex ? 'block' : 'none';
        });
      });
      li.appendChild(button);
      controls.appendChild(li);
    });
  }
}
window.customElements.define('my-element', MyElement);

步骤五：实现组件的配置参数

我们可以在自定义元素中添加一些属性来实现组件的配置参数。例如，我们可以添加一个 interval 属性来设置图片切换的时间间隔，添加一个 width 属性来设置图片的宽度，添加一个 height 属性来设置图片的高度。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const container = document.createElement('div');
    const controls = document.createElement('ul');
    this.currentIndex = 0;
    this.images = this.getAttribute('images').split(',');
    this.interval = parseInt(this.getAttribute('interval')) || 3000;
    this.width = this.getAttribute('width') || '800px';
    this.height = this.getAttribute('height') || '600px';
    this.shadowRoot.appendChild(container);
    this.shadowRoot.appendChild(controls);
    container.style.width = this.width;
    container.style.height = this.height;
    this.images.forEach((url, index) => {
      const img = document.createElement('img');
      img.src = url;
      img.style.display = index === this.currentIndex ? 'block' : 'none';
      container.appendChild(img);
    });
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
      this.images.forEach((url, index) => {
        const img = container.children[index];
        img.style.display = index === this.currentIndex ? 'block' : 'none';
      });
    }, this.interval);
    this.images.forEach((url, index) => {
      const li = document.createElement('li');
      const button = document.createElement('button');
      button.innerText = index + 1;
      button.addEventListener('click', () => {
        this.currentIndex = index;
        this.images.forEach((url, index) => {
          const img = container.children[index];
          img.style.display = index === this.currentIndex ? 'block' : 'none';
        });
      });
      li.appendChild(button);
      controls.appendChild(li);
    });
  }
  static get observedAttributes() {
    return ['images', 'interval', 'width', 'height'];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      switch (name) {
        case 'images':
          this.images = newValue.split(',');
          break;
        case 'interval':
          this.interval = parseInt(newValue) || 3000;
          break;
        case 'width':
          this.width = newValue || '800px';
          this.shadowRoot.querySelector('div').style.width = this.width;
          break;
        case 'height':
          this.height = newValue || '600px';
          this.shadowRoot.querySelector('div').style.height = this.height;
          break;
      }
    }
  }
}
window.customElements.define('my-element', MyElement);

示例代码

// javascriptcn.com 代码示例
<my-element
  images="
    https://picsum.photos/id/100/800/600,
    https://picsum.photos/id/200/800/600,
    https://picsum.photos/id/300/800/600,
    https://picsum.photos/id/400/800/600
  "
  interval="5000"
  width="600px"
  height="400px"
></my-element>

总结

通过本文的介绍，我们了解了如何使用 Custom Elements 实现一个图片展示组件，并且实现了组件的一些配置参数。Custom Elements 是 Web Components 的一部分，是一种自定义 HTML 元素的方式，可以帮助我们更好地封装和组织代码。如果你想深入了解 Web Components，可以参考 MDN 的文档：Web Components。

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