网页页面调整方法及装置与流程

1.本公开涉及网页页面技术领域，尤其涉及一种网页页面调整方法及装置。


背景技术：

2.在传统的web编程方式中,经常会发生组件样式相互冲突的情况，经常发生页面出现样式错乱的情况，到了项目维护阶段,增加技术人员不必要的工作量。
3.公开于本技术背景技术部分的信息仅仅旨在加深对本技术的一般背景技术的理解，而不应当被视为承认或以任何形式暗示该信息构成已为本领域技术人员所公知的现有技术。


技术实现要素：

4.本公开实施例提供一种网页页面调整方法及装置，能够至少解决现有技术中一部分问题。
5.本公开实施例的第一方面，提供一种网页页面调整方法,包括：
6.基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；
7.根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，
8.若否，则进行报错，给出提示文件，和/或将不符合要求的目标代码文件调整为符合预设标准组件样式。
9.在一种可选的实施方式中，
10.所述判断所述扫描信息中组件样式是否符合预设标准组件样式的方法包括：
11.判断所述扫描信息中组件样式是否符合作用域scope的规范。
12.在一种可选的实施方式中，
13.所述方法还包括：
14.获取所述目标代码文件的样式特征，基于预设的样式隔离模型，获取所述样式隔离模型中预设的样式隔离模板与所述样式特征的匹配度，
15.若所述匹配度超过预设阈值，则自动为所述目标代码文件进行样式隔离；
16.若所述匹配度低于预设阈值，则存储所述样式特征，并搜索和/或配置与所述样式特征对应的准样式隔离模板。
17.在一种可选的实施方式中，
18.所述将不符合要求的目标代码文件调整为符合预设标准组件样式的方法包括：
19.基于预先配置的作用域安装工具，为不符合要求的目标代码文件安装作用域，并为不符合要求的目标代码文件实现层叠样式表css样式规范。
20.在一种可选的实施方式中，
21.所述作用域安装工具包括nodejs工具。
22.本公开实施例的第二方面，
23.提供一种网页页面调整装置，包括：
24.第一单元，用于基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；
25.第二单元，用于根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，
26.第三单元，用于若否，则进行报错，给出提示文件，和/或
27.将不符合要求的目标代码文件调整为符合预设标准组件样式。
28.在一种可选的实施方式中，
29.所述第二单元还用于：
30.判断所述扫描信息中组件样式是否符合作用域scope的规范。
31.在一种可选的实施方式中，
32.所述装置还包括第四单元，所述第四单元用于：
33.获取所述目标代码文件的样式特征，基于预设的样式隔离模型，获取所述样式隔离模型中预设的样式隔离模板与所述样式特征的匹配度，
34.若所述匹配度超过预设阈值，则自动为所述目标代码文件进行样式隔离；
35.若所述匹配度低于预设阈值，则存储所述样式特征，并搜索和/或配置与所述样式特征对应的准样式隔离模板。
36.在一种可选的实施方式中，
37.所述第三单元还用于：
38.基于预先配置的作用域安装工具，为不符合要求的目标代码文件安装作用域，并为不符合要求的目标代码文件实现层叠样式表css样式规范。
39.在一种可选的实施方式中，
40.所述作用域安装工具包括nodejs工具。
41.本公开提供一种网页页面调整方法，所述方法包括
42.基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；
43.根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，
44.若否，则进行报错，给出提示文件，和/或将不符合要求的目标代码文件调整为符合预设标准组件样式。
45.本公开的网页页面调整方法，能够保证所有的css都是具有scope的,会自动进行样式隔离，从而从根本上解决样式错乱的问题。
附图说明
46.图1为本公开实施例提供的一种网页页面调整方法的流程示意图；
47.图2为本公开实施例提供的一种网页页面调整装置的结构示意图。
具体实施方式
48.为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
49.本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
50.应当理解，在本公开的各种实施例中，各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本公开实施例的实施过程构成任何限定。
51.应当理解，在本公开中，“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
52.应当理解，在本公开中，“多个”是指两个或两个以上。“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。“包含a、b和c”、“包含a、b、c”是指a、b、c三者都包含，“包含a、b或c”是指包含a、b、c三者之一，“包含a、b和/或c”是指包含a、b、c三者中任1个或任2个或3个。
53.应当理解，在本公开中，“与a对应的b”、“与a相对应的b”、“a与b
54.相对应”或者“b与a相对应”，表示b与a相关联，根据a可以确定b。根据a确定b并不意味着仅仅根据a确定b，还可以根据a和/或其他信息确定b。a与b的匹配，是a与b的相似度大于或等于预设的阈值。
55.取决于语境，如在此所使用的“若”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”或“响应于检测”。
56.下面以具体地实施例对本公开的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。
57.图1示例性地示出本公开实施例网页页面调整方法的流程示意图，如图1所示，所述方法包括：
58.步骤s101、基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；
59.示例性地，当样式调整工具配置完成后，可以在接收到代码文件时，对接收到的代码文件进行扫描。扫描的方式可以是实时扫描或定时扫描，具体为，当样式调整工具接收到代码文件时，样式调整工具实时对接收到的代码文件进行扫描。
60.或者，当样式调整工具接收到代码文件时，样式调整工具根据预设时长或时刻，在接收到代码文件的时长或时刻满足预设时长或时刻时，对代码文件进行扫描。当样式调整工具对代码文件进行扫描时，读取扫描到的代码文件信息。
61.步骤s102、根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，
62.在一种可选的实施方式中，
63.所述判断所述扫描信息中组件样式是否符合预设标准组件样式的方法包括：
64.判断所述扫描信息中组件样式是否符合作用域scope的规范。
65.示例性地，scope属于css伪类，它表示作为选择器要匹配的参考点的元素。
66.可以通过判断扫描信息中组件样式是否符合作用域scope的规范，通过判断是否符合作用域scope的规范，可以判断网页页面是否会发生样式错乱，从而能够保证在编译阶段即可发现问题，提高工作人员的工作效率。
67.在一种可选的实施方式中，
68.所述方法还包括：
69.获取所述目标代码文件的样式特征，基于预设的样式隔离模型，获取所述样式隔离模型中预设的样式隔离模板与所述样式特征的匹配度，
70.若所述匹配度超过预设阈值，则自动为所述目标代码文件进行样式隔离；
71.若所述匹配度低于预设阈值，则存储所述样式特征，并搜索和/或配置与所述样式特征对应的准样式隔离模板。
72.示例性地，本公开的样式隔离模型可以是基于神经网络模型构建的，用于判断输入该模型的代码文件的样式特征与预设的样式隔离模板的匹配度，
73.若所述匹配度超过预设阈值，则自动为所述目标代码文件进行样式隔离；
74.若所述匹配度低于预设阈值，则存储所述样式特征，并搜索和/或配置与所述样式特征对应的准样式隔离模板。
75.在匹配度低于预设阈值时，说明没有合适的样式隔离模板，则可以存储该样式特征，并且搜索和/或配置与样式特征对应的准样式隔离模板，从而在下次遇到该样式特征时，准确匹配与该样式特征对应的样式隔离模板。
76.步骤s103、若否，则进行报错，给出提示文件，和/或
77.将不符合要求的目标代码文件调整为符合预设标准组件样式。
78.在一种可选的实施方式中，
79.所述将不符合要求的目标代码文件调整为符合预设标准组件样式的方法包括：
80.基于预先配置的作用域安装工具，为不符合要求的目标代码文件安装作用域，并为不符合要求的目标代码文件实现层叠样式表css样式规范。
81.示例性地，预先配置的作用域安装工具，可以将不符合要求的目标代码文件，也即目标代码文件中没有指定scope时，当前的组件样式可能与别的组件产生冲突，从而导致页面会出现样式错误。
82.在一种可选的实施方式中，
83.所述作用域安装工具包括nodejs工具。
84.在一种可选的实施方式中，
85.所述作用域安装工具包括nodejs管理工具。
86.示例性地，nodejs管理工具是基于chrome v8引擎的javascript运行环境，使用事件驱动、非阻塞式i/o的模型，使其轻量又高效。
87.本公开提供一种网页页面调整方法，所述方法包括
88.基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；
89.根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，
90.若否，则进行报错，给出提示文件，和/或将不符合要求的目标代码文件调整为符合预设标准组件样式。
91.本公开的网页页面调整方法，能够保证所有的css都是具有scope的,会自动进行样式隔离，从而从根本上解决样式错乱的问题。
92.图2示例性地示出本公开实施例网页页面调整装置的结构示意图，如图2所示，所述装置包括：
93.第一单元21，用于基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；
94.第二单元22，用于根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，
95.第三单元23，用于若否，则进行报错，给出提示文件，和/或
96.将不符合要求的目标代码文件调整为符合预设标准组件样式。
97.在一种可选的实施方式中，
98.所述第二单元22还用于：
99.判断所述扫描信息中组件样式是否符合作用域scope的规范。
100.在一种可选的实施方式中，
101.所述装置还包括第四单元，所述第四单元用于：
102.获取所述目标代码文件的样式特征，基于预设的样式隔离模型，获取所述样式隔离模型中预设的样式隔离模板与所述样式特征的匹配度，
103.若所述匹配度超过预设阈值，则自动为所述目标代码文件进行样式隔离；
104.若所述匹配度低于预设阈值，则存储所述样式特征，并搜索和/或配置与所述样式特征对应的准样式隔离模板。
105.在一种可选的实施方式中，
106.所述第三单元23还用于：
107.基于预先配置的作用域安装工具，为不符合要求的目标代码文件安装作用域，并为不符合要求的目标代码文件实现层叠样式表css样式规范。
108.在一种可选的实施方式中，
109.所述作用域安装工具包括nodejs工具。
110.本公开还提供一种程序产品，该程序产品包括执行指令，该执行指令存储在可读存储介质中。设备的至少一个处理器可以从可读存储介质读取该执行指令，至少一个处理器执行该执行指令使得设备实施上述的各种实施方式提供的方法。
111.其中，可读存储介质可以是计算机存储介质，也可以是通信介质。通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。计算机存储介质可以是通用或专用计算机能够存取的任何可用介质。例如，可读存储介质耦合至处理器，从而使处理器能够从该可读存储介质读取信息，且可向该可读存储介质写入信息。当然，可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(application specific integrated circuits，简称：asic)中。另外，该asic可以位于用户设备中。当然，处理器和可读存储介质也可以作为分立组件存在于通信设备中。可读存储介质可以是只读存储器(rom)、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。
112.在上述终端或者服务器的实施例中，应理解，处理器可以是中央处理单元(英文：central processing unit，简称：cpu)，还可以是其他通用处理器、数字信号处理器(英文：
digital signal processor，简称：dsp)、专用集成电路(英文：application specific integrated circuit，简称：asic)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本公开所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。
113.最后应说明的是：以上各实施例仅用以说明本公开的技术方案，而非对其限制；尽管参照前述各实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本公开各实施例技术方案的范围。

技术特征：
1.一种网页页面调整方法，其特征在于，包括：基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，若否，则进行报错，给出提示文件，和/或将不符合要求的目标代码文件调整为符合预设标准组件样式。2.根据权利要求1所述的方法，其特征在于，所述判断所述扫描信息中组件样式是否符合预设标准组件样式的方法包括：判断所述扫描信息中组件样式是否符合作用域scope的规范。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：获取所述目标代码文件的样式特征，基于预设的样式隔离模型，获取所述样式隔离模型中预设的样式隔离模板与所述样式特征的匹配度，若所述匹配度超过预设阈值，则自动为所述目标代码文件进行样式隔离；若所述匹配度低于预设阈值，则存储所述样式特征，并搜索和/或配置与所述样式特征对应的准样式隔离模板。4.根据权利要求1所述的方法，其特征在于，所述将不符合要求的目标代码文件调整为符合预设标准组件样式的方法包括：基于预先配置的作用域安装工具，为不符合要求的目标代码文件安装作用域，并为不符合要求的目标代码文件实现层叠样式表css样式规范。5.根据权利要求1所述的方法，其特征在于，所述作用域安装工具包括nodejs工具。6.一种网页页面调整装置，其特征在于，包括：第一单元，用于基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；第二单元，用于根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，第三单元，用于若否，则进行报错，给出提示文件，和/或将不符合要求的目标代码文件调整为符合预设标准组件样式。7.根据权利要求6所述的装置，其特征在于，所述第二单元还用于：判断所述扫描信息中组件样式是否符合作用域scope的规范。8.根据权利要求6所述的装置，其特征在于，所述装置还包括第四单元，所述第四单元用于：获取所述目标代码文件的样式特征，基于预设的样式隔离模型，获取所述样式隔离模型中预设的样式隔离模板与所述样式特征的匹配度，若所述匹配度超过预设阈值，则自动为所述目标代码文件进行样式隔离；若所述匹配度低于预设阈值，则存储所述样式特征，并搜索和/或配置与所述样式特征对应的准样式隔离模板。9.根据权利要求6所述的装置，其特征在于，所述第三单元还用于：基于预先配置的作用域安装工具，为不符合要求的目标代码文件安装作用域，并为不符合要求的目标代码文件实现层叠样式表css样式规范。10.根据权利要求6所述的装置，其特征在于，所述作用域安装工具包括nodej s工具。

技术总结
本公开提供一种网页页面调整方法及装置，所述方法包括基于预先安装并配置完成的样式调整工具，获取目标代码文件的扫描信息；根据所述扫描信息，判断所述扫描信息中组件样式是否符合预设标准组件样式，若否，则进行报错，给出提示文件，和/或将不符合要求的目标代码文件调整为符合预设标准组件样式。本公开的方法能够保证所有的css都是具有scope的,会自动进行样式隔离，从而从根本上解决样式错乱的问题。题。题。


技术研发人员：高扬
受保护的技术使用者：上海众言网络科技有限公司
技术研发日：2021.11.09
技术公布日：2022/3/7