前言
当我们在使用网站或应用程序时，经常会遇到需要使用面包屑导航来更好地了解自己所在的位置。但是如果我们的应用程序是多层级的，那么如何实现无限层级的面包屑导航呢？本文将介绍如何使用自定义元素来实现这一功能。
理解面包屑导航
在进行面包屑导航的实现前，我们首先需要理解什么是面包屑导航。面包屑导航是一种辅助用户理解当前页面或操作所处的层级结构的用户界面元素。一般情况下，它们呈现为层级结构，其中上一个页面的名称是层级结构中的第一层，当前页面的名称是第二层，以此类推，直到达到用户所处的最低层级页面。
例如，当您在浏览Amazon在线商店时，面包屑导航可能会显示您正在查看的商品类别，如服装，女式衣服，连衣裙等。当您在特定类别中浏览商品时，面包屑导航会告知您所选的商品位置以及您可以从哪个类别中返回。
理解了面包屑导航的概念后，我们现在进入如何实现无限层级的面包屑导航。
使用自定义元素实现面包屑导航
要实现无限级别的面包屑导航，我们需要定义一个自定义元素，并在其中定义面包屑导航的模板。自定义元素是一种标准的Web技术，它使我们可以定义自己的HTML元素，从而拓展Web平台的能力。
本文使用的是Web Components规范中的自定义元素。Web Components简化了在Web上定义自定义元素的过程。简单来说，您可以通过三个基础部分的组合来声明自定义元素：Shadow DOM，HTML Template和Custom Element。
步骤1：定义自定义元素
使用document.registerElement函数，我们可以创建一个自定义元素，例如面包屑导航。要创建带有无限级别的面包屑导航，我们需要将元素的名称命名为breadcrumb-nav并回调来定义面包屑导航的行为。
class BreadcrumbNav extends HTMLElement {
// Your code here
}
document.registerElement('breadcrumb-nav', BreadcrumbNav);这里定义的行为是在元素的生命周期函数中调用。在这个例子中，我们会为这个元素添加connectedCallback函数，它是一个回调函数，当元素首次添加到文档时被调用。在该函数中，我们将调用一个名为update的方法，并传递当前元素的路径信息。
// BreadcrumbNav 定义更新方法
update(paths) {
// Your code here
}
// BreadcrumbNav 首次添加到文档
connectedCallback() {
this.update(this.getAttribute('paths') || []);
}步骤2：定义面包屑导航模板
在自定义元素中，我们还需要定义面包屑导航的模板。对于面包屑导航，模板应该是一组链接，每个链接代表一个层级。我们可以使用HTML <template>标记定义模板，如下所示：
<template id="pathTemplate">
<a href="#">{{label}}</a>
<span>{{separator}}</span>
</template>这里，我们使用{{}}语法定义模板的变量。当我们在添加导航时，我们可以插入正确的标签，如此例所示：
const pathTpl = document.querySelector('#pathTemplate');
const path = pathTpl.content.cloneNode(true);
path.querySelector('a').innerHTML = item.label;
path.querySelector('a').href = item.url;
path.querySelector('span').innerHTML = separator;
this.appendChild(path);步骤3：更新面包屑导航
接下来就是我们自定义元素的核心，如何更新面包屑导航。针对每个path，我们都使用getBreadcrumbPath函数生成相应的面包屑导航并添加到元素中。
-- -------------------- ---- -------
-------- ----------------------- -
----- ----- - ----------------
----- ----- - ---
-------------------- ------ -- -
--- ----- - ---------------------------- - --------------
--- --- - ------------------- ----- - ---------------
------------------ ------ ---- ------
---
------ ------
-当我们有了路径，并确定哪些链接已经存在时，我们需要根据链接的数量删除现有链接。然后，我们使用生成的路径添加链接。
-- -------------------- ---- -------
------------- -
----- --------- - ------------------------------ -- ----
----- ------- - ----------------------------------------
-- ------ --- -------- ------
-------------- - ---
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----- ---- - ------------------------
----- ---- - -- --- ------------ - ---
----- --- - ---- - -- - ----------
--- ---- - - -- - - ------------ ---- -
----- -------- - --------
----- ---- - --------------------------------
--------------------------------- - ---------------
---------------------------- - -------------
------------------------------------ - ----
-----------------------
-
-
-更新面包屑导航的函数通过迭代要显示的路径，并使用getBreadcrumbPath函数将路径拆分为每个子路径，然后使用我们的模板为每个子路径创建一个链接。然后，这些链接被添加到这个自定义元素中。
最终实现
在了解了Web Components规范的基础知识后，让我们看一下完整的代码示例：
<breadcrumb-nav separator=": " paths="">
<template id="pathTemplate">
<a href=""></a>
<span></span>
</template>
</breadcrumb-nav>-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
----- --------- - ------------------------------ -- ----
----- ------- - ----------------------------------------
-------------- - ---
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----- ---- - ------------------------
----- ---- - -- --- ------------ - ---
----- --- - ---- - -- - ----------
--- ---- - - -- - - ------------ ---- -
----- -------- - --------
----- ---- - --------------------------------
--------------------------------- - ---------------
---------------------------- - -------------
------------------------------------ - ----
-----------------------
-
-
-
-
------------------------------------------ ---------------
-------- ----------------------- -
----- ----- - --------------------------
----- ----- - ---
-------------------- ------ -- -
--- ----- - ---------------------------- - --------------
--- --- - ------------------- ----- - ---------------
------------------ ------ ---- ------
---
------ ------
-
----- ------------- - -----------------------------------------
------------------------------ ------------- --------------------在这个实现中，我们定义了自定义元素的元素名称“breadcrumb-nav”和与之对应的类BreadcrumbNav 。在这个自定义元素的定义中，我们有一个属性“separator”，它可以控制我们导航路径之间的分隔符（例如“:”）。我们还有一个属性“paths”，它接受路径数组并使用getBreadcrumbPath函数生成相应的面包屑导航。
getBreadcrumbPath函数化解路径，并将每个链接的标签和URL包装在一个对象中，然后返回这些链接。最后，我们在这个自定义元素的connectedCallback函数中使用我们的first rendering来更新导航路径。
结论
使用Web Components规范的自定义元素可以使得自定义元素的定义和设计变得更加清晰和容易。通过本文，您应该已经了解了如何使用自定义元素来实现无限层级的面包屑导航。无论您是在构建简单的网站还是复杂的应用程序，这种技术都是很有用的，它可以帮助用户更好地理解自己所在的页面位置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b61e49babaf620fab134c