一种网页代码文件生成方法、装置、电子设备和存储介质与流程

本申请涉及数据处理领域，具体涉及一种网页代码文件生成方法、装置、电子设备和存储介质。

背景技术：

1、目前，为了丰富网页视觉效果，很多网页上会设置动态显示的网页元素，该网页元素的动态显示，需要引入一些javascript动画库实现网页元素的动画，以及需要监听浏览器窗口的滚动事件，来及时触发网页元素的动画。这种方案，代码文件的编写成本高、耗时久，且还可能导致网页浏览时，所需事件监听器过多，网页性能下降。

技术实现思路

1、本申请实施例提供一种网页代码文件生成方法、装置、电子设备和存储介质，可以降低网页代码文件的生产成本，还可以避免网页元素的动画的触发对事件监听器的需求，有利于降低网页运行时的开销。

2、第一方面，本申请实施例提供一种网页代码文件生成方法，包括：

3、获取网页代码文件对应的目标语法树；

4、从所述目标语法树中，确定包含目标网页元素的目标节点，其中，所述目标网页元素添加有预设动画特效类，所述预设动画特效类定义了动画样式；

5、在所述目标语法树中为所述目标节点新增预设节点类型的父节点；

6、设置所述父节点的类名包含预设特效触发类的第一类名，其中，所述预设特效触发类被定义为对所述预设动画特效类对应的所述目标网页元素添加透明的动画特效触发区域，以及在网页操作位置出现在所述动画特效触发区域时，启动所述预设动画特效类的元素动画；

7、对所述目标语法树进行代码文件转换，得到目标网页代码文件。

8、第二方面，本申请实施例提供一种网页代码文件生成装置，包括：

9、语法树获取单元，用于获取网页代码文件对应的目标语法树；

10、节点获取单元，用于从所述目标语法树中，确定包含目标网页元素的目标节点，其中，所述目标网页元素添加有预设动画特效类，所述预设动画特效类定义了动画样式；

11、节点新增单元，用于在所述目标语法树中为所述目标节点新增预设节点类型的父节点；

12、节点设置单元，用于设置所述父节点的类名包含预设特效触发类的第一类名，其中，所述预设特效触发类被定义为对所述预设动画特效类对应的所述目标网页元素添加透明的动画特效触发区域，以及在网页操作位置出现在所述动画特效触发区域时，启动所述预设动画特效类的元素动画；

13、转换单元，用于对所述目标语法树进行代码文件转换，得到目标网页代码文件。

14、第三方面，本申请实施例还提供一种电子设备，包括存储器存储有多条指令；处理器从存储器中加载指令，以执行本申请实施例所提供的任一种网页代码文件生成方法的步骤。

15、第四方面，本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质存储有多条指令，指令适于处理器进行加载，以执行本申请实施例所提供的任一种网页代码文件生成方法的步骤。

16、第五方面，本申请实施例还提供一种计算机程序产品，包括计算机程序或指令，计算机程序或指令被处理器执行时实现本申请实施例所提供的任一种网页代码文件生成方法中的步骤。

17、采用申请实施例的方案，可以获取网页代码文件对应的目标语法树；从目标语法树中，确定包含目标网页元素的目标节点，其中，目标网页元素添加有预设动画特效类，预设动画特效类定义了动画样式；在目标语法树中为目标节点新增预设节点类型的父节点；设置父节点的类名包含预设特效触发类的第一类名，其中，预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域，以及在网页操作位置出现在动画特效触发区域时，启动预设动画特效类的元素动画；对目标语法树进行代码文件转换，得到目标网页代码文件，由此，可以通过层叠样式表的类实现网页元素的动画，以及避免动画的触发对事件监听器的需求，降低网页代码文件的生产成本和网页运行时的开销，且还可以基于语法树结构，自动且快速地为需要添加特效的网页元素，添加所需的类名，在大规模的网页中批量应用时，有效节约手动添加代码的时间和工作量。

技术特征：

1.一种网页代码文件生成方法，其特征在于，包括：

2.根据权利要求1所述的网页代码文件生成方法，其特征在于，所述获取网页代码文件对应的目标语法树，包括：

3.根据权利要求2所述的网页代码文件生成方法，其特征在于，所述目标网页元素为文本元素，所述从所述初始语法树中，识别包含待添加特效的网页元素的节点，包括：

4.根据权利要求1所述的网页代码文件生成方法，其特征在于，所述从所述目标语法树中，确定包含目标网页元素的目标节点，包括：

5.根据权利要求1所述的网页代码文件生成方法，其特征在于，所述预设节点类型为元素节点，所述在所述目标语法树中为所述目标节点新增预设节点类型的父节点，包括：

6.根据权利要求1-5任一项所述的网页代码文件生成方法，其特征在于，所述目标网页元素为文本元素，所述预设动画特效类中声明了文字间距属性，和动画属性，所述文字间距属性的值用于控制文本元素中文字的间距，所述动画属性用于控制所述文字间距属性的值从预设负值到预设正值。

7.根据权利要求1-5任一项所述的网页代码文件生成方法，其特征在于，所述预设特效触发类被定义通过伪元素和伪类在所述预设动画特效类对应的目标网页元素上下方分别添加一动画特效触发区域，以及在网页操作位置从在上的动画特效触发区域上方进入所述动画特效触发区域，启动所述预设动画特效类的动画，从所述动画特效触发区域离开，停止所述预设动画特效类的动画。

8.根据权利要求7所述的网页代码文件生成方法，其特征在于，所述预设特效触发类中还声明了对比度属性，所述对比度属性用于控制所述预设动画特效类对应的目标网页元素的对比度。

9.一种网页代码文件生成装置，其特征在于，包括：

10.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有多条指令；所述处理器从所述存储器中加载指令，以执行如权利要求1～8任一项所述的网页代码文件生成方法的步骤。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行如权利要求1～8任一项所述的网页代码文件生成方法的步骤。

技术总结
本申请公开了一种网页代码文件生成方法、装置、电子设备和存储介质，可以获取网页代码文件对应的目标语法树；从目标语法树中，确定包含目标网页元素的目标节点，其中，目标网页元素添加有预设动画特效类，预设动画特效类定义了动画样式；在目标语法树中为目标节点新增预设节点类型的父节点；设置父节点的类名包含预设特效触发类的第一类名，其中，预设特效触发类被定义为对预设动画特效类对应的目标网页元素添加透明的动画特效触发区域；对目标语法树转换得到目标网页代码文件，由此，可通过层叠样式表的类名实现网页元素动画，自动、快速地为网页元素添加类名，降低生产成本，节约手动添加代码的时间和工作量，避免网页运行对监听器的需求。

技术研发人员：杨泽伟
受保护的技术使用者：网易（杭州）网络有限公司
技术研发日：
技术公布日：2024/2/1