使用 Custom Elements 实现可复用的分页组件及兼容性问题-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要实现分页功能。为了提高代码复用性和可维护性，我们可以将分页功能抽象成一个可复用的组件。在本文中，我们将使用 Custom Elements 技术来实现一个可复用的分页组件，并探讨其中的兼容性问题。

Custom Elements 概述

Custom Elements 是 Web Components 的一部分，它允许我们定义一些自定义的 HTML 元素，并为它们添加自定义行为。使用 Custom Elements 可以实现更高的代码复用性和可维护性。

我们可以使用customElements.define()方法来定义一个 Custom Element。该方法接受两个参数：第一个参数为元素名称，第二个参数为元素的具体实现。下面是一个简单的示例：

// javascriptcn.com 代码示例
class MyButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      alert('Hello, Custom Elements!');
    });
  }
}

customElements.define('my-button', MyButton, { extends: 'button' });

该示例中，我们定义了一个名为my-button的 Custom Element，继承了 HTMLButtonElement，实现了一个在点击事件时弹出提示框的行为。

分页组件设计

接下来，我们将使用 Custom Elements 技术来实现一个可复用的分页组件。该组件具有以下特点：

支持自定义样式；
支持自定义每页显示数量；
支持自定义当前页码和总页数；
支持触发页码切换的自定义事件。

快速实现起见，我们将使用 Bootstrap 作为分页组件的 UI 框架。具体实现如下：

// javascriptcn.com 代码示例
class Pagination extends HTMLElement {
  static get observedAttributes() {
    return ['pagesize', 'currentpage', 'totalpages'];
  }

  constructor() {
    super();

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

    shadow.innerHTML = `
      <nav>
        <ul class="pagination">
          <li class="page-item" id="page-prev"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item active"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item" id="page-next"><a class="page-link" href="#">Next</a></li>
        </ul>
      </nav>
      <style>
        /* add your custom styles here */
      </style>
    `;

    this._pageSize = Number(this.getAttribute('pagesize') || 20);
    this._currentPage = Number(this.getAttribute('currentpage') || 1);
    this._totalPages = Number(this.getAttribute('totalpages') || 1);
  }

  connectedCallback() {
    const pagePrev = this.shadowRoot.querySelector('#page-prev');
    const pageNext = this.shadowRoot.querySelector('#page-next');
    const pageLinks = this.shadowRoot.querySelectorAll('.page-link');

    pagePrev.addEventListener('click', this._onPrevClick.bind(this));
    pageNext.addEventListener('click', this._onNextClick.bind(this));
    pageLinks.forEach(link => {
      link.addEventListener('click', this._onPageClick.bind(this));
    });
  }

  attributeChangedCallback(name, oldValue, newValue) {
    switch(name) {
      case 'pagesize':
        this._pageSize = Number(newValue);
        this._render();
        break;
      case 'currentpage':
        this._currentPage = Number(newValue);
        this._render();
        break;
      case 'totalpages':
        this._totalPages = Number(newValue);
        this._render();
        break;
    }
  }

  _onPrevClick(e) {
    e.preventDefault();
    if(this._currentPage > 1) {
      this._currentPage--;
      this.dispatchEvent(new CustomEvent('pagechange', { bubbles: true, detail: { page: this._currentPage } }));
      this._render();
    }
  }

  _onNextClick(e) {
    e.preventDefault();
    if(this._currentPage < this._totalPages) {
      this._currentPage++;
      this.dispatchEvent(new CustomEvent('pagechange', { bubbles: true, detail: { page: this._currentPage } }));
      this._render();
    }
  }

  _onPageClick(e) {
    e.preventDefault();
    const clickedPage = Number(e.target.innerText);
    if(!isNaN(clickedPage) && this._currentPage !== clickedPage) {
      this._currentPage = clickedPage;
      this.dispatchEvent(new CustomEvent('pagechange', { bubbles: true, detail: { page: this._currentPage } }));
      this._render();
    }
  }

  _render() {
    const pages = [];

    for(let i = 0; i < this._totalPages; i++) {
      pages.push(`
        <li class="page-item ${this._currentPage === i + 1 ? 'active' : ''}">
          <a class="page-link" href="#">${i + 1}</a>
        </li>
      `);
    }

    const pagePrev = this.shadowRoot.querySelector('#page-prev');
    const pageNext = this.shadowRoot.querySelector('#page-next');

    if(this._currentPage === 1) {
      pagePrev.classList.add('disabled');
    } else {
      pagePrev.classList.remove('disabled');
    }

    if(this._currentPage === this._totalPages) {
      pageNext.classList.add('disabled');
    } else {
      pageNext.classList.remove('disabled');
    }

    this.shadowRoot.querySelector('.pagination').innerHTML = `
      <li class="page-item" id="page-prev"><a class="page-link" href="#">Previous</a></li>
      ${pages.join('')}
      <li class="page-item" id="page-next"><a class="page-link" href="#">Next</a></li>
    `;
  }

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

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

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

  get pageSize() {
    return this._pageSize;
  }

  get currentPage() {
    return this._currentPage;
  }

  get totalPages() {
    return this._totalPages;
  }
}

customElements.define('my-pagination', Pagination);

在上述代码中，我们定义了一个名为my-pagination的 Custom Element，继承了 HTMLElement。在构造函数中，我们创建了 Shadow DOM，并初始化了分页组件的 HTML 结构和样式。同时，我们还为组件添加了一些私有属性，如每页显示数量、当前页码、总页数等，并在属性变更时自动触发重新渲染。

为了实现页码切换的功能，我们使用了自定义事件来触发外部的逻辑。在_onPrevClick，_onNextClick和_onPageClick函数中，我们分别判断了当前页码是否能够切换，并向外部派发了pagechange事件来通知外部逻辑进行相应的操作。这里需要注意的是，我们向外部派发事件时需要将其设置为冒泡模式，以便事件能够在整个文档树中传递。

最后，我们暴露了三个读写属性pageSize、currentPage和totalPages，以便外部逻辑可以轻松控制分页组件的状态。

兼容性问题

虽然 Custom Elements 是一个很有用的技术，但它并不是所有浏览器都支持的。目前，Custom Elements 仅在 Chrome、Opera 和 Safari 中被原生支持，而在 Firefox 和 Edge 中需要使用 polyfill 进行处理。

如果我们要在不支持 Custom Elements 的浏览器中使用该组件，我们需要借鉴一些其他库的实现方式。例如，可以使用 Vue.js 中的<component>标签或 Angular 中的<ng-container>标签来代替 Custom Elements。

<!-- Vue.js 代码示例 -->
<component :is="'my-pagination'"></component>

<!-- Angular 代码示例 -->
<ng-container *ngComponentOutlet="'my-pagination'"></ng-container>

这些标签在渲染时可以自动转化为实际的组件，从而达到类似 Custom Elements 的效果。但需要注意的是，这种方式可能会带来一些额外的性能开销，因此需要谨慎使用。

总结

本文介绍了如何使用 Custom Elements 技术来构建一个可复用的分页组件，并探讨了其中的兼容性问题。Custom Elements 可以大大提高代码的复用性和可维护性，并为未来 Web Components 的发展奠定了重要基础。我们希望通过本文的介绍，能够帮助读者更好地理解 Custom Elements，并将其应用到实际项目中。

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