一種檢測flex布局屬性完整性的方法及系統(tǒng)技術方案

本發(fā)明專利技術提供一種檢測flex布局屬性完整性的方法和系統(tǒng)，該方法包括以下步驟：接收待檢測的網站地址；訪問所述網站地址對應的網頁并獲取所述網頁的源碼；從網頁源碼中查找CSS樣式文件；在CSS樣式文件中查找是否有flex屬性；查找到flex屬性，則繼續(xù)檢測flex屬性的個數和flex屬性的順序；沒查找到flex屬性，則退出，并提示沒有flex屬性；該系統(tǒng)包括：網站地址輸入模塊，用于接收待檢測的網站地址；網頁源碼獲取模塊，用于從網站地址對應的網頁中獲取網頁的源代碼；CSS文件獲取模塊，用于從網頁源代碼中獲取CSS樣式文件；Flex屬性查找模塊，用于從CSS樣式文件中查找flex屬性；Flex屬性個數檢測模塊和Flex屬性順序檢測模塊，用于檢測CSS文件中flex屬性的個數和排列順序。

Method and system for detecting integrality of flex layout attribute

The present invention provides a method and system for detecting flex layout attributes integrity, the method comprises the following steps: receiving the detected website address; access to the website address of the corresponding web page and get the web page from the web page source code for source code; CSS style file; search in the CSS style file is the flex attribute; find the flex attribute, it continues to detect the flex attribute number and flex attribute order; not to search the flex attribute, then exit, and no flex attribute; the system comprises a web address input module for receiving the undetected website address; Web page source code acquisition module, used to obtain the corresponding web page from the web site the address of the page source code; CSS file acquisition module is used for obtaining the CSS style files from the web page source code; Flex attribute lookup module is used from the CSS style file Find the flex property; the Flex property number detection module and the Flex property sequential detection module are used to detect the number of flex attributes in the CSS file and the order of the arrangement.

【技術實現(xiàn)步驟摘要】
一種檢測flex布局屬性完整性的方法及系統(tǒng)
本專利技術屬于計算機互聯(lián)網
，尤其涉及到一種檢測flex布局屬性完整性的方法及系統(tǒng)。
技術介紹
隨著互聯(lián)網的發(fā)展,用戶的體驗直接關系到是否能夠留住用戶，那么前端開發(fā)布局直接關系到用戶體驗，前端開發(fā)flex布局對日益復雜的前端開發(fā)布局來說是一種利器，并且在不同的屏幕上能實現(xiàn)真正的響應式式布局，可以不再單純地依賴百分比和float的強拼硬湊來達到需求，并且能彈性的伸縮元素，簡潔易維護的代碼，所以flex布局受到開發(fā)人員的各種青睞。但越來越多的用戶通過各種自己喜愛的瀏覽器進行網頁瀏覽，造成網頁開發(fā)人員必須具備跨瀏覽器開發(fā)的能力，而flex的除了chrome外其他瀏覽器兼容性并沒有那么好，如果兼容性沒有寫完整，或者兼容性屬性的順序錯亂直接會不起作用，所以檢查flex盒模型的寫法很有必要。現(xiàn)有的檢查技術一般是在開發(fā)出來的網頁在不同的瀏覽器中反復測試才能看出是否有問題，這樣不管對測試人員測試和開發(fā)人員解bug都需要付出大量的時間和精力。
技術實現(xiàn)思路
本專利技術的目的在于提供一種檢測flex布局屬性完整性的方法及系統(tǒng)，用于解決現(xiàn)有技術中檢測flex盒模型兼容性屬性的完整性及順序的正確性所造成的不僅工作量大而且有可能不準確的問題。本專利技術一種檢測flex布局屬性完整性的方法，所述檢測flex布局屬性完整性的方法包括：接收待檢測的網站地址；訪問所述網站地址對應的網頁并獲取所述網頁的源碼；從網頁源碼中查找CSS樣式文件；在CSS樣式文件中查找是否有flex屬性；查找到flex屬性，則繼續(xù)檢測flex屬性的個數；檢測flex屬性的順序；沒查找到flex屬性，則退出，并提示沒有flex屬性。其中，所述訪問網站地址對應的網頁并獲取所述網頁源代碼是通過后臺執(zhí)行完成的。其中，所述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布局屬性完整性的系統(tǒng)，包括：網站地址輸入模塊，用于接收待檢測的網站地址；網頁源碼獲取模塊，與所述網站輸入模塊相連，用于從所述網站輸入模塊中獲取所述網站地址，訪問所述網站地點在對應的網頁并獲取所述網頁的源代碼；CSS文件獲取模塊，用于從所述網頁源代碼中獲取CSS樣式文件；Flex屬性查找模塊，用于從CSS樣式文件中查找flex屬性；Flex屬性個數檢測模塊，用于檢測CSS文件中flex屬性的個數；Flex屬性順序檢測模塊，用于檢測CSS文件中flex屬性中的各display屬性的順序。其中，所述訪問網站地址對應的網頁并獲取所述網頁源代碼是通過后臺執(zhí)行完成的。其中，所述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布局屬性完整性的方法和系統(tǒng)，能夠快速確定flex盒模型的屬性的寫法是否完整，編寫順序是否正確，并對錯誤進行準確的定位提示，從而提高工作效率。附圖說明圖1是檢測flex布局屬性完整性的方法流程圖。圖2是檢測flex布局屬性完整性的系統(tǒng)框圖。具體實施方式以下參考附圖，對本專利技術予以進一步地詳盡闡述。請參閱附圖1，在本實施例中，該一種檢測flex布局屬性完整性的方法，所述檢測flex布局屬性完整性的方法包括以下步驟：步驟S1：接收待檢測的網站地址；步驟S2：訪問所述網站地址對應的網頁并獲取所述網頁的源碼；步驟S3：從網頁源碼中查找CSS樣式文件；步驟S4：在CSS樣式文件中查找是否有flex屬性；步驟S5：查找到flex屬性，則繼續(xù)檢測flex屬性的個數；步驟S6：檢測flex屬性的順序；步驟S7：如果沒查找到flex屬性，則退出，并提示沒有flex屬性。其中，步驟S2所述訪問網站地址對應的網頁并獲取所述網頁源代碼是通過后臺執(zhí)行完成的。其中，步驟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本文檔來自技高網...

【技術保護點】
一種檢測flex布局屬性完整性的方法，其特征在于，包括以下步驟：接收待檢測的網站地址；訪問所述網站地址對應的網頁并獲取所述網頁的源碼；從網頁源碼中查找CSS樣式文件；在CSS樣式文件中查找是否有flex屬性；查找到flex屬性，則繼續(xù)檢測flex屬性的個數；檢測flex屬性的順序；沒查找到flex屬性，則退出，并提示沒有flex屬性。

【技術特征摘要】
1.一種檢測flex布局屬性完整性的方法，其特征在于，包括以下步驟：接收待檢測的網站地址；訪問所述網站地址對應的網頁并獲取所述網頁的源碼；從網頁源碼中查找CSS樣式文件；在CSS樣式文件中查找是否有flex屬性；查找到flex屬性，則繼續(xù)檢測flex屬性的個數；檢測flex屬性的順序；沒查找到flex屬性，則退出，并提示沒有flex屬性。2.根據權利要求1所述的檢測flex布局屬性完整性的方法，其特征在于，所述訪問網站地址對應的網頁并獲取所述網頁源代碼是通過后臺執(zhí)行完成的。3.根據權利要求1所述的檢測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。4.根據權利要求3所述的檢測flex布局屬性完整性的方法，其特征在于，所述flex屬性的標準屬性值放在所有display屬性的最后。5.根據權利要求1所述的檢測flex布局屬性完整性的方法，其特征在于，將所述flex布局屬性完整性的檢測結果以消息框顯示，包括：沒有查找到所述flex屬性，顯示此布局方法為非flex布局；查找到flex屬性，且所述屬性個數不對或所述屬性排列順序不對，顯示此時代碼行數和CSS文件名；查找到flex屬性，且所述屬性個數和所述屬性排列順序都對，顯示flex布局屬性完整的提示。6.一種檢測flex布局屬性完整性的系統(tǒng)，其特征在于，包括：網站地址輸入模塊，用于接收待檢...

【專利技術屬性】
技術研發(fā)人員：范春燕，袁北林，莫偉雄，羅輝，韓仲亮，譚和華，李耀軍，
申請(專利權)人：深圳市賽億科技開發(fā)有限公司，
類型：發(fā)明
國別省市：廣東,44