[发明专利]面包屑导航组件的实现方法、面包屑导航显示方法、装置

说明书

本发明实施例涉及互联网技术领域，提供一种面包屑导航组件的实现方法、面包屑导航的显示方法及相关装置，所述方法包括：获取面包屑数据及分隔符，其中，面包屑数据包括至少一个面包屑元素，每一面包屑元素包括属性信息；依次遍历每一面包屑元素，并依据每一面包屑元素的属性信息生成面包屑导航组件中与该面包屑元素对应的元素节点；若面包屑元素不为面包屑数据中的最后一个元素，则在面包屑元素对应的元素节点后添加分隔符。本发明实施例能够提高面包屑导航的代码复用度，减少由于面包屑导航的代码复用度低导致的代码冗余。

技术领域

本发明实施例涉及互联网技术领域，具体而言，涉及一种面包屑导航组件的实现方法、面包屑导航的显示方法及相关装置。

背景技术

伴随着信息技术的发展，网站系统复杂性越来越大，页面的层级越来越深，为了使网站结构更加清晰，也便于访问者在不同层级之间跳转，增加用户体验，通常使用面包屑导航。

面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。当前面包屑导航主要有三种：(1)基于位置的面包屑导航，这种类型的面包屑导航可以很好的指出当前页面与整个站点的层次结构。(2)基于属性的面包屑导航，这种类型的面包屑导航可以很好的指出当前页面内产品的其他属性或者类别。(3)基于路径的面包屑导航，这种类型的面包屑导航可以显示访客在到达页面前所访问过的网页的链接。

但是，由于每一个面包屑导航都有对应的开发代码，各面包屑导航对应的代码彼此之间可复用度极低，造成代码的极大冗余。

发明内容

有鉴于此，本发明实施例的目的在于提供了一种面包屑导航组件的实现方法、面包屑导航的显示方法及相关装置，其能够提高面包屑导航的代码复用度，减少由于面包屑导航的代码复用度低导致的代码冗余。

为了实现上述目的，本申请实施例采用的技术方案如下：

第一方面，本发明实施例提供一种面包屑导航组件的实现方法，应用于电子设备，所述方法包括：获取面包屑数据及分隔符，其中，面包屑数据包括至少一个面包屑元素，每一面包屑元素包括属性信息；依次遍历每一面包屑元素，并依据每一面包屑元素的属性信息生成面包屑导航组件中与该面包屑元素对应的元素节点；若面包屑元素不为面包屑数据中的最后一个元素，则在面包屑元素对应的元素节点后添加分隔符。

第二方面，本发明实施例提供一种面包屑导航的显示方法，应用于电子设备，电子设备上存在react框架，react框架包括利用前述实施方式所述的面包屑导航组件的实现方法得到的面包屑导航组件，所述方法包括：接收待显示面包屑数据及预设分隔符；利用面包屑导航组件解析待显示面包屑数据，得到待显示面包屑数据中的每一待显示面包屑元素对应的待显示元素节点；利用react框架对待显示元素节点进行显示；若待显示元素节点不为待显示面包屑数据中的最后一个元素，则利用react框架对预设分隔符进行显示。

第三方面，本发明实施例提供一种面包屑导航组件的实现装置，应用于电子设备，所述装置包括获取模块和处理模块，其中，获取模块用于获取面包屑数据及分隔符，面包屑数据包括至少一个面包屑元素，每一面包屑元素包括属性信息；处理模块用于：依次遍历每一面包屑元素，并依据每一面包屑元素的属性信息生成面包屑导航组件中与该面包屑元素对应的元素节点；以及用于若面包屑元素不为面包屑数据中的最后一个元素，则在面包屑元素对应的元素节点后添加分隔符。

第四方面，本发明实施例提供一种面包屑导航的显示装置，应用于电子设备，电子设备上存在react框架，react框架包括利用前述实施方式所述面包屑导航组件的实现方法得到的面包屑导航组件，所述装置包括接收模块、解析模块及显示模块，其中，接收模块用于接收待显示面包屑数据及预设分隔符；解析模块用于利用面包屑导航组件解析待显示面包屑数据，得到待显示面包屑数据中的每一待显示面包屑元素对应的待显示元素节点；显示模块用于利用react框架对待显示元素节点进行显示；以及用于若待显示元素节点不为待显示面包屑数据中的最后一个元素，则利用react框架对预设分隔符进行显示。