本發(fā)明屬于計(jì)算機(jī)互聯(lián)網(wǎng)技術(shù)領(lǐng)域,尤其涉及到一種檢測flex布局屬性完整性的方法及系統(tǒng)。
背景技術(shù):
隨著互聯(lián)網(wǎng)的發(fā)展,用戶的體驗(yàn)直接關(guān)系到是否能夠留住用戶,那么前端開發(fā)布局直接關(guān)系到用戶體驗(yàn),前端開發(fā)flex布局對日益復(fù)雜的前端開發(fā)布局來說是一種利器,并且在不同的屏幕上能實(shí)現(xiàn)真正的響應(yīng)式式布局,可以不再單純地依賴百分比和float的強(qiáng)拼硬湊來達(dá)到需求,并且能彈性的伸縮元素,簡潔易維護(hù)的代碼,所以flex布局受到開發(fā)人員的各種青睞。但越來越多的用戶通過各種自己喜愛的瀏覽器進(jìn)行網(wǎng)頁瀏覽,造成網(wǎng)頁開發(fā)人員必須具備跨瀏覽器開發(fā)的能力,而flex的除了chrome外其他瀏覽器兼容性并沒有那么好,如果兼容性沒有寫完整,或者兼容性屬性的順序錯(cuò)亂直接會不起作用,所以檢查flex盒模型的寫法很有必要?,F(xiàn)有的檢查技術(shù)一般是在開發(fā)出來的網(wǎng)頁在不同的瀏覽器中反復(fù)測試才能看出是否有問題,這樣不管對測試人員測試和開發(fā)人員解bug都需要付出大量的時(shí)間和精力。
技術(shù)實(shí)現(xiàn)要素:
本發(fā)明的目的在于提供一種檢測flex布局屬性完整性的方法及系統(tǒng),用于解決現(xiàn)有技術(shù)中檢測flex盒模型兼容性屬性的完整性及順序的正確性所造成的不僅工作量大而且有可能不準(zhǔn)確的問題。
本發(fā)明一種檢測flex布局屬性完整性的方法,所述檢測flex布局屬性完整性的方法包括:接收待檢測的網(wǎng)站地址;訪問所述網(wǎng)站地址對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁的源碼;從網(wǎng)頁源碼中查找CSS樣式文件;在CSS樣式文件中查找是否有flex屬性;查找到flex屬性,則繼續(xù)檢測flex屬性的個(gè)數(shù);檢測flex屬性的順序;沒查找到flex屬性,則退出,并提示沒有flex屬性。
其中,所述訪問網(wǎng)站地址對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁源代碼是通過后臺執(zhí)行完成的。
其中,所述flex屬性包括:5個(gè)display屬性,所述5個(gè)display屬性值分別為-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex;6個(gè)水平居中屬性,分別為-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content;
6個(gè)垂直居中屬性,分別為-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items;
4個(gè)平鋪方式屬性,分別為-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction;5個(gè)換行屬性,分別為-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中,所述flex屬性的標(biāo)準(zhǔn)屬性值放在所有display屬性的最后。
其中,所述flex布局屬性完整性的檢測結(jié)果以消息框顯示,如果所述屬性個(gè)數(shù)不對或所述屬性排列順序不對,顯示此時(shí)代碼行數(shù)和CSS文件名;
其中,若所述屬性個(gè)數(shù)和所述屬性排列順序都對,顯示flex布局屬性完整的提示。
其中,本發(fā)明的一種檢測flex布局屬性完整性的系統(tǒng),包括:網(wǎng)站地址輸入模塊,用于接收待檢測的網(wǎng)站地址;網(wǎng)頁源碼獲取模塊,與所述網(wǎng)站輸入模塊相連,用于從所述網(wǎng)站輸入模塊中獲取所述網(wǎng)站地址,訪問所述網(wǎng)站地點(diǎn)在對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁的源代碼;CSS文件獲取模塊,用于從所述網(wǎng)頁源代碼中獲取CSS樣式文件;Flex屬性查找模塊,用于從CSS樣式文件中查找flex屬性;Flex屬性個(gè)數(shù)檢測模塊,用于檢測CSS文件中flex屬性的個(gè)數(shù);Flex屬性順序檢測模塊,用于檢測CSS文件中flex屬性中的各display屬性的順序。
其中,所述訪問網(wǎng)站地址對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁源代碼是通過后臺執(zhí)行完成的。
其中,所述flex屬性包括:5個(gè)display屬性,所述5個(gè)display屬性值分別為-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex;
6個(gè)水平居中屬性,分別為-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content;
6個(gè)垂直居中屬性,分別為-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items;
4個(gè)平鋪方式屬性,分別為-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction;
5個(gè)換行屬性,分別為-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中,所述flex屬性的標(biāo)準(zhǔn)屬性值放在所有display屬性的最后。
其中,將所述flex布局屬性完整性的檢測結(jié)果以消息框顯示,包括:所述屬性個(gè)數(shù)不對或所述屬性排列順序不對或所述屬性個(gè)數(shù)和所述屬性排列順序都不對,顯示此時(shí)代碼行數(shù)和CSS文件名;當(dāng)所述屬性個(gè)數(shù)和屬性排列順序都對,所述顯示flex布局屬性完整的提示。
本發(fā)明的實(shí)施例提供的技術(shù)方案可以包括以下有益效果:
針對以上特點(diǎn),本發(fā)明一種檢測flex布局屬性完整性的方法和系統(tǒng),能夠快速確定flex盒模型的屬性的寫法是否完整,編寫順序是否正確,并對錯(cuò)誤進(jìn)行準(zhǔn)確的定位提示,從而提高工作效率。
附圖說明
圖1是檢測flex布局屬性完整性的方法流程圖。
圖2是檢測flex布局屬性完整性的系統(tǒng)框圖。
具體實(shí)施方式
以下參考附圖,對本發(fā)明予以進(jìn)一步地詳盡闡述。
請參閱附圖1,在本實(shí)施例中,該一種檢測flex布局屬性完整性的方法,所述檢測flex布局屬性完整性的方法包括以下步驟:
步驟S1:接收待檢測的網(wǎng)站地址;
步驟S2:訪問所述網(wǎng)站地址對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁的源碼;
步驟S3:從網(wǎng)頁源碼中查找CSS樣式文件;
步驟S4:在CSS樣式文件中查找是否有flex屬性;
步驟S5:查找到flex屬性,則繼續(xù)檢測flex屬性的個(gè)數(shù);
步驟S6:檢測flex屬性的順序;
步驟S7:如果沒查找到flex屬性,則退出,并提示沒有flex屬性。
其中,步驟S2所述訪問網(wǎng)站地址對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁源代碼是通過后臺執(zhí)行完成的。
其中,步驟4中所述flex屬性包括:5個(gè)display屬性,所述5個(gè)display屬性值分別為-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex;
6個(gè)水平居中屬性,分別為-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content;
6個(gè)垂直居中屬性,分別為-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items;
4個(gè)平鋪方式屬性,分別為-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction;5個(gè)換行屬性,分別為-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中,步驟4中所述flex屬性的標(biāo)準(zhǔn)屬性值放在所有display屬性的最后。
其中,步驟5中,查找到flex屬性,所述flex布局屬性完整性的檢測結(jié)果以消息框顯示,如果所述屬性個(gè)數(shù)不對,則顯示此時(shí)代碼行數(shù)和CSS文件名。
其中,步驟6中,如果所述屬性排列順序不對,則顯示此時(shí)代碼行數(shù)和CSS文件名。
其中,若所述屬性個(gè)數(shù)和所述屬性排列順序都對,顯示flex布局屬性完整的提示。
其中,請參閱附圖2,本發(fā)明的一種檢測flex布局屬性完整性的系統(tǒng)100,包括:網(wǎng)站地址輸入模塊101,用于接收待檢測的網(wǎng)站地址;網(wǎng)頁源碼獲取模塊102,與所述網(wǎng)站輸入模塊相連,用于從所述網(wǎng)站輸入模塊中獲取所述網(wǎng)站地址,訪問所述網(wǎng)站地點(diǎn)在對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁的源代碼;CSS文件獲取模塊103,用于從所述網(wǎng)頁源代碼中獲取CSS樣式文件;Flex屬性查找模塊104,用于從CSS樣式文件中查找flex屬性;Flex屬性個(gè)數(shù)檢測模塊105,用于檢測CSS文件中flex屬性的個(gè)數(shù);Flex屬性順序檢測模塊106,用于檢測CSS文件中flex屬性中的各display屬性的順序。
其中,網(wǎng)頁源碼獲取模塊102中,所述訪問網(wǎng)站地址對應(yīng)的網(wǎng)頁并獲取所述網(wǎng)頁源代碼是通過后臺執(zhí)行完成的。
其中,flex屬性查找模塊104所查找的所述flex屬性包括:5個(gè)display屬性,所述5個(gè)display屬性值分別為-webkit-flex、-moz-box、-moz-flex、-ms-flexbox、flex;6個(gè)水平居中屬性,分別為-webkit-box-align、-moz-boxx-align、-ms-flex-pack、-webkit-justify-content、-moz-justify-content、justify-content;
6個(gè)垂直居中屬性,分別為-webkit-box-pack、-moz-boxx-pack、-ms-flex-align、-webkit-align-items、-moz-align-items、align-items;4個(gè)平鋪方式屬性,分別為-webkit-box-orient、-webkit-flex-direction、-ms-flex-direction、flex-direction;
5個(gè)換行屬性,分別為-webkit-flex-wrap、-moz-flex-wrap、-ms-flex-wrap、-o-flex-wrap、flex-wrap。
其中,所述flex屬性的標(biāo)準(zhǔn)屬性值放在所有display屬性的最后。
其中,將所述flex布局屬性完整性的檢測結(jié)果以消息框顯示,包括:Flex屬性個(gè)數(shù)檢測模塊105檢測到的所述屬性個(gè)數(shù)不對或Flex屬性順序檢測模塊106檢測到的所述屬性排列順序不對,均顯示此時(shí)代碼行數(shù)和CSS文件名;當(dāng)所述屬性個(gè)數(shù)和屬性排列順序都對,所述顯示flex布局屬性完整的提示。
上述內(nèi)容,僅為本發(fā)明的較佳實(shí)施例,并非用于限制本發(fā)明的實(shí)施方案,本領(lǐng)域普通技術(shù)人員根據(jù)本發(fā)明的主要構(gòu)思和精神,可以十分方便地進(jìn)行相應(yīng)的變通或修改,故本發(fā)明的保護(hù)范圍應(yīng)以權(quán)利要求書所要求的保護(hù)范圍為準(zhǔn)。
應(yīng)當(dāng)理解的是,本發(fā)明并不局限于上面已經(jīng)描述并在附圖中示出的精確結(jié)構(gòu),并且可以在不脫離其范圍執(zhí)行各種修改和改變。本發(fā)明的范圍僅由所附的權(quán)利要求來限制。