一种实现多层抽屉渲染的方法及系统与流程

本发明涉及web前端，特别涉及一种实现多层抽屉渲染的方法及系统。

背景技术：

1、随着互联网技术的迅猛发展，用户体验在网站和应用设计中的重要性日益凸显。抽屉式设计模式应运而生，迅速成为界面组织的热门选择。该模式特别适用于呈现具有层级关系的信息和导航结构，让用户能够轻松探索并快速定位所需内容。通过抽屉式设计，用户可以简洁直观的界面操作，顺畅地访问多级菜单或功能，无需繁琐的跳转和加载。这不仅使界面更加整洁有序，还显著提升了用户的操作效率。此外，抽屉式设计也极具灵活性和可扩展性，能轻松适应不同的屏幕尺寸和设备类型，确保用户无论在哪种设备上都能享受一致且优质的体验。

2、现有技术在多层抽屉渲染方面存在以下主要缺陷：在多层抽屉的使用场景中，手动设置抽屉的层级容易出现错误；由于层级关系复杂，人为操作难以保证每次设置的准确性，这可能导致抽屉显示顺序混乱，影响用户体验。对于多次使用的抽屉，每次使用时都需要手动设置层级，这不仅导致代码中出现大量的层级设置逻辑，增加了代码的复杂性，而且当需要调整抽屉层级或添加新的抽屉时，必须修改和测试大量代码，显著提高了维护成本。手动设置层级的做法限制了系统的灵活性和可扩展性；随着业务需求的变更或产品功能的增加，硬编码的层级设置方式难以快速适应这些变化。

3、因此，如何提供一种实现多层抽屉渲染的方法及系统，是目前亟待解决的问题。

技术实现思路

1、本发明实施例提供了一种实现多层抽屉渲染的方法及系统，以解决现有技术中层级设置易出错、代码冗余和维护成本高及缺乏灵活性和可扩展性的问题。

2、为了对披露的实施例的一些方面有一个基本的理解，下面给出了简单的概括。该概括部分不是泛泛评述，也不是要确定关键/重要组成元素或描绘这些实施例的保护范围。其唯一目的是用简单的形式呈现一些概念，以此作为后面的详细说明的序言。

3、根据本发明实施例的第一方面，提供了一种实现多层抽屉渲染的方法。

4、在一个实施例中，所述实现多层抽屉渲染的方法包括：

5、在初始页面中部署并配置抽屉状态监听机制；

6、监听初始页面中抽屉的状态，并基于每个抽屉的状态，更新每个抽屉的层级信息；

7、将每个抽屉的层级信息和标识符传递至每个抽屉对应的抽屉组件中，并为每个抽屉执行渲染处理。

8、优选的，所述在初始页面中部署并配置抽屉状态监听机制包括：

9、在初始页面中，创建并初始化公共变量；

10、为初始页面中每个抽屉的打开按钮设置事件监听器；

11、在事件监听器中设定用于处理抽屉打开逻辑的回调函数。

12、优选的，所述公共变量包括：层级存储变量和数组存储变量，所述层级存储变量用于存储当前打开抽屉的层级信息，所述数组存储变量用于存储并共享每个抽屉的层级信息。

13、优选的，所述监听初始页面中抽屉的状态，并基于每个抽屉的状态，更新每个抽屉的层级信息包括：

14、通过事件监听器监测用户是否点击抽屉打开按钮；

15、若用户点击抽屉打开按钮时，为每个抽屉生成标识符；

16、利用事件监听器中的回调函数分别更新公共变量中的层级存储变量和数组存储变量。

17、优选的，所述若用户点击抽屉打开按钮时，为每个抽屉生成标识符包括：

18、在用户点击抽屉打开按钮时，获取抽屉当前的层级信息及时间戳信息；

19、将抽屉当前的层级信息和时间戳信息进行组合，得到信息字符串；

20、利用混合加密算法对得到的信息字符串进行加密处理，得到标识符；

21、将得到标识符与对应的抽屉进行关联。

22、优选的，所述利用混合加密算法对得到的信息字符串进行加密处理，得到标识符包括：

23、利用md5算法对信息字符串进行初步加密，得到初始加密数据；

24、基于椭圆曲线加密算法，将信息字符串中的时间戳信息加密处理，得到随机字符串；

25、将初始加密数据和随机字符串进行按位异或运算，得到组合数据；

26、将得到的组合数据再次通过md5算法进行加密处理，得到最终的标识符。

27、优选的，所述基于椭圆曲线加密算法，将信息字符串中的时间戳信息加密处理，得到随机字符串包括：

28、从信息字符串中提取时间戳信息，并将时间戳信息输入至椭圆曲线加密算法中，并在椭圆曲线生成点集；

29、从椭圆曲线上生成的点集中，去除位于坐标轴上的点和无穷远点的点，并随机选择坐标点；

30、将随机选择的坐标点扩展至预设的字符长度，得到扩展坐标点；

31、利用伪随机数产生器将得到的扩展坐标点进行随机转换，得到随机字符串。

32、优选的，所述将初始加密数据和随机字符串进行按位异或运算，得到组合数据包括：

33、分别将初始加密数据和随机字符串进行二进制转换，得到二进制数据；

34、将初始加密数据和随机字符串的二进制数据进行逐位异或运算，得到新的二进制数据；

35、将新的二进制数据转为预先设定的数据格式，得到组合数据。

36、优选的，所述将每个抽屉的层级信息和标识符传递至每个抽屉对应的抽屉组件中，并为每个抽屉执行渲染处理包括：

37、基于每个抽屉的层级信息和标识符，以每个抽屉作为节点构建树形数据结构；

38、利用深度优先遍历方法对树形数据结构进行处理，得到结构化数据组；

39、基于结构化数据组计算每个节点的渲染位置和预估高度；

40、初始化抽屉组件，并基于每个节点的渲染位置和预估高度，通过抽屉组件执行渲染操作，将抽屉内容展示在页面上。

41、根据本发明实施例的第二方面，提供了一种实现多层抽屉渲染的系统。

42、在一个实施例中，所述实现多层抽屉渲染的系统包括：

43、部署配置模块，用于在初始页面中部署并配置抽屉状态监听机制；

44、信息更新模块，用于监听初始页面中抽屉的状态，并基于每个抽屉的状态，更新每个抽屉的层级信息；

45、渲染处理模块，用于将每个抽屉的层级信息和标识符传递至每个抽屉对应的抽屉组件中，并为每个抽屉执行渲染处理。

46、根据本发明实施例的第三方面，提供了一种计算机设备。

47、在一些实施例中，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

48、本发明实施例提供的技术方案可以包括以下有益效果：

49、1、本发明通过在初始页面部署抽屉状态监听机制，能够实时响应用户的交互行为和页面状态的变化，这种动态响应性确保了用户界面能够及时更新，提供更流畅和反应灵敏的用户体验，监听并基于每个抽屉的状态更新其层级信息，可以确保所有抽屉组件的显示信息保持一致，将每个抽屉的层级信息和标识符传递至对应的抽屉组件并执行渲染处理，使得层级结构清晰可见，用户可以直观地理解信息的层次和组织结构，这对于导航和内容的快速访问非常有帮助。

50、2、本发明通过混合加密算法对抽屉的层级信息和时间戳进行加密处理，生成独特的标识符，大大提高了系统的安全性，这种加密方式结合了md5算法和椭圆曲线加密算法，使得生成的标识符具有唯一性。

51、3、本发明通过构建树形数据结构，每个抽屉作为一个节点，易于管理和理解整个系统的层级关系，利用树形结构，可以有效地组织和存储大量的层级信息，便于快速检索和更新，根据每个节点的层级和结构化数据组，计算节点的精确渲染位置和预估高度，这有助于实现复杂界面的精确布局，通过动态计算和调整渲染位置，用户界面能够实时响应数据变化和用户交互，提供更流畅和直观的用户体验。

52、应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。