一种检测flex布局属性完整性的方法及系统与流程

本发明属于计算机互联网技术领域，尤其涉及到一种检测flex布局属性完整性的方法及系统。

背景技术：

随着互联网的发展,用户的体验直接关系到是否能够留住用户，那么前端开发布局直接关系到用户体验，前端开发flex布局对日益复杂的前端开发布局来说是一种利器，并且在不同的屏幕上能实现真正的响应式式布局，可以不再单纯地依赖百分比和float的强拼硬凑来达到需求，并且能弹性的伸缩元素，简洁易维护的代码，所以flex布局受到开发人员的各种青睐。但越来越多的用户通过各种自己喜爱的浏览器进行网页浏览，造成网页开发人员必须具备跨浏览器开发的能力，而flex的除了chrome外其他浏览器兼容性并没有那么好，如果兼容性没有写完整，或者兼容性属性的顺序错乱直接会不起作用，所以检查flex盒模型的写法很有必要。现有的检查技术一般是在开发出来的网页在不同的浏览器中反复测试才能看出是否有问题，这样不管对测试人员测试和开发人员解bug都需要付出大量的时间和精力。

技术实现要素：

本发明的目的在于提供一种检测flex布局属性完整性的方法及系统，用于解决现有技术中检测flex盒模型兼容性属性的完整性及顺序的正确性所造成的不仅工作量大而且有可能不准确的问题。

本发明一种检测flex布局属性完整性的方法，所述检测flex布局属性完整性的方法包括：接收待检测的网站地址；访问所述网站地址对应的网页并获取所述网页的源码；从网页源码中查找CSS样式文件；在CSS样式文件中查找是否有flex属性；查找到flex属性，则继续检测flex属性的个数；检测flex属性的顺序；没查找到flex属性，则退出，并提示没有flex属性。

其中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。

其中，所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；

6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；

4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。

其中，所述flex属性的标准属性值放在所有display属性的最后。

其中，所述flex布局属性完整性的检测结果以消息框显示，如果所述属性个数不对或所述属性排列顺序不对，显示此时代码行数和CSS文件名；

其中，若所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。

其中，本发明的一种检测flex布局属性完整性的系统，包括：网站地址输入模块，用于接收待检测的网站地址；网页源码获取模块，与所述网站输入模块相连，用于从所述网站输入模块中获取所述网站地址，访问所述网站地点在对应的网页并获取所述网页的源代码；CSS文件获取模块，用于从所述网页源代码中获取CSS样式文件；Flex属性查找模块，用于从CSS样式文件中查找flex属性；Flex属性个数检测模块，用于检测CSS文件中flex属性的个数；Flex属性顺序检测模块，用于检测CSS文件中flex属性中的各display属性的顺序。

其中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。

其中，所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；

6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；

6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；

4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；

5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。

其中，所述flex属性的标准属性值放在所有display属性的最后。

其中，将所述flex布局属性完整性的检测结果以消息框显示，包括：所述属性个数不对或所述属性排列顺序不对或所述属性个数和所述属性排列顺序都不对，显示此时代码行数和CSS文件名；当所述属性个数和属性排列顺序都对，所述显示flex布局属性完整的提示。

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

针对以上特点，本发明一种检测flex布局属性完整性的方法和系统，能够快速确定flex盒模型的属性的写法是否完整，编写顺序是否正确，并对错误进行准确的定位提示，从而提高工作效率。

附图说明

图1是检测flex布局属性完整性的方法流程图。

图2是检测flex布局属性完整性的系统框图。

具体实施方式

以下参考附图，对本发明予以进一步地详尽阐述。

请参阅附图1，在本实施例中，该一种检测flex布局属性完整性的方法，所述检测flex布局属性完整性的方法包括以下步骤：

步骤S1：接收待检测的网站地址；

步骤S2：访问所述网站地址对应的网页并获取所述网页的源码；

步骤S3：从网页源码中查找CSS样式文件；

步骤S4：在CSS样式文件中查找是否有flex属性；

步骤S5：查找到flex属性，则继续检测flex属性的个数；

步骤S6：检测flex属性的顺序；

步骤S7：如果没查找到flex属性，则退出，并提示没有flex属性。

其中，步骤S2所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。

其中，步骤4中所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；

6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；

6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；

4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。

其中，步骤4中所述flex属性的标准属性值放在所有display属性的最后。

其中，步骤5中，查找到flex属性，所述flex布局属性完整性的检测结果以消息框显示，如果所述属性个数不对，则显示此时代码行数和CSS文件名。

其中，步骤6中，如果所述属性排列顺序不对，则显示此时代码行数和CSS文件名。

其中，若所述属性个数和所述属性排列顺序都对，显示flex布局属性完整的提示。

其中，请参阅附图2，本发明的一种检测flex布局属性完整性的系统100，包括：网站地址输入模块101，用于接收待检测的网站地址；网页源码获取模块102，与所述网站输入模块相连，用于从所述网站输入模块中获取所述网站地址，访问所述网站地点在对应的网页并获取所述网页的源代码；CSS文件获取模块103，用于从所述网页源代码中获取CSS样式文件；Flex属性查找模块104，用于从CSS样式文件中查找flex属性；Flex属性个数检测模块105，用于检测CSS文件中flex属性的个数；Flex属性顺序检测模块106，用于检测CSS文件中flex属性中的各display属性的顺序。

其中，网页源码获取模块102中，所述访问网站地址对应的网页并获取所述网页源代码是通过后台执行完成的。

其中，flex属性查找模块104所查找的所述flex属性包括：5个display属性，所述5个display属性值分别为-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex；6个水平居中属性，分别为-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content；

6个垂直居中属性，分别为-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items；4个平铺方式属性，分别为-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction；

5个换行属性，分别为-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。

其中，所述flex属性的标准属性值放在所有display属性的最后。

其中，将所述flex布局属性完整性的检测结果以消息框显示，包括：Flex属性个数检测模块105检测到的所述属性个数不对或Flex属性顺序检测模块106检测到的所述属性排列顺序不对，均显示此时代码行数和CSS文件名；当所述属性个数和属性排列顺序都对，所述显示flex布局属性完整的提示。

上述内容，仅为本发明的较佳实施例，并非用于限制本发明的实施方案，本领域普通技术人员根据本发明的主要构思和精神，可以十分方便地进行相应的变通或修改，故本发明的保护范围应以权利要求书所要求的保护范围为准。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本发明的范围仅由所附的权利要求来限制。