[发明专利]一种检测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；