前言
分页是网页开发中常见的需求，通常可以通过后端数据库查询来实现。但是，如果是单页面应用，前端需要实现分页功能。Custom Elements 提供了一种简单、可重用的方式，可以在网页中快速实现分页器的功能。
Custom Elements 概述
Custom Elements 是 Web Components 规范中的一部分，可以让开发者定义自己的 HTML 元素，并在需要的地方进行调用。定义 Custom Elements 的方式要求将 HTML Element 继承自 HTMLElement 构造函数，并重载其中的 callback 函数。
实现分页器
在 Custom Elements 中实现分页器，我们需要创建一个新的类，继承自 HTMLElement，然后在其中添加方法，以处理分页器区域的展示和交互。
HTML 定义
首先，我们需要定义一个新的 HTML Element，可以在 HTML 中直接调用。定义方式可以如下：
------------- -------- --------------
其中，page 表示当前页数，max-page 表示最大页数。
JS 实现
接下来，我们需要定义一个新的 JS 类，继承自 HTMLElement，实现 constructor 和 connectedCallback。具体内容可以如下：
----- ----------- ------- ----------- -
------------- -
--------
-
------------------- -
--------------
-
-------- -
-- ---
-
---------- -
-- ---
-
---------- -
-- ---
-
-------------- -
-- ---
-
-
------------------------------------- -------------在 MyPaginator 类中，我们定义了三个方法：render、nextPage 和 prevPage，用于分页器的展示和交互。同时，我们通过 customElements.define 方法，将 MyPaginator 类绑定到 my-paginator 这个 HTML Element 中。
实现 render 方法
在 render 方法中，我们实现分页器区域的展示逻辑。可以利用 document.createElement 和 innerHTML 方法动态生成分页器区域的 HTML，然后将其添加到当前 MyPaginator 对象的 DOM 中。
-------- -
--- ---- - -
---- ----------------- ---------------------------------------------
------- -----------------------
----- -------------- - ------------------------------------------
------- -----------------------
------
--
-------------- - -----
----------------------------------------------------- --------------------------
----------------------------------------------------- --------------------------
-在上述代码中，我们生成了一个包含“Prev”和“Next”按钮以及当前页数和最大页数等信息的 div。然后，我们将其设置为当前 MyPaginator 对象的 innerHTML，再为“Prev”和“Next”按钮添加 click 事件监听器。对于 click 事件的处理函数，我们在后文中实现。
实现 nextPage 和 prevPage 方法
nextPage 和 prevPage 方法用于处理“Prev”和“Next”按钮的点击事件。在这两个方法中，我们根据当前页码调整页面内容。具体实现可以如下：
---------- -
-- ---------- - ------------- -
----------------------- - ---
-
-
---------- -
-- ---------- - -- -
----------------------- - ---
-
-在 nextPage 和 prevPage 方法中，我们首先判断页码是否在合法范围内，并根据条件执行 goToPage 方法，用于更新分页器的显示。
实现 goToPage 方法
goToPage 方法是处理 goToPage() 函数的核心函数，它将分页器切换到指定的页面，并更新页面内容。具体实现可以如下所示：
-------------- - --------- - --------------- -------------- -
在 goToPage 方法中，我们将输入的 page 值转换为整型，并将其赋值给 this.page，然后再调用 render() 方法更新页面内容。
示例代码
最终的示例代码如下：
--------- -----
------
------
------------- -------- -------------
-------
------
------------- -------- -----------------------------
--------
----- ----------- ------- ----------- -
------------- -
--------
-
------------------- -
--------- - ------------------------------------
------------ - ----------------------------------------
--------------
-
-------- -
--- ---- - -
---- ----------------- ---------------------------------------------
------- -----------------------
----- -------------- - ------------------------------------------
------- -----------------------
------
--
-------------- - -----
----------------------------------------------------- --------------------------
----------------------------------------------------- --------------------------
-
---------- -
-- ---------- - ------------- -
----------------------- - ---
-
-
---------- -
-- ---------- - -- -
----------------------- - ---
-
-
-------------- -
--------- - ---------------
--------------
-
-
------------------------------------- -------------
---------
-------
-------总结
Custom Elements 为前端页面开发提供了一种可重用、动态生成的方式，能够快速实现网页分页器等功能。对于开发人员来说，学习和掌握 Custom Elements，可以提高网页开发效率，同时也能够获得更好的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6484779748841e98943800c8