建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
原生JS進行CSS格式化和壓縮
前言
一直比較喜歡收集網(wǎng)頁特效，很多時候都會遇到CSS被壓縮過的情況，這時查看起來就會非常不方便，有時為了減少文件大小，也會對自己的CSS進行壓縮，網(wǎng)上提供這樣服務(wù)的很多，但都不盡如人意，因此打算自己動手寫一個JS來進行CSS的格式化和壓縮
原理
CSS的結(jié)構(gòu)如下：
選擇器{ css屬性聲明：值;}
所以對CSS格式化也就比較簡單，大致分為以下幾步;
1、把多個空格合并成一個，去掉換行
2、對處理后的字符串按"{"進行分組
3、遍歷分組，對含有"}"的部分再次以"}"進行分組
4、對分組后的數(shù)據(jù)進行處理，主要是加上空格和換行
對CSS壓縮就比較簡單了，把空格合并，去掉換行就可以了
格式化
下面分步對以上步驟進行實現(xiàn)。
初始化：
functionformathtmljscss(source, spaceWidth, formatType) {
this.source = source;
this.spaceStr = " ";
if(!isNaN(spaceWidth)) {
if(spaceWidth >1) {
this.spaceStr = "";
for(vari = 0; i this.spaceStr += " "; } } else{ this.spaceStr = " "; } } this.formatType = formatType; this.output = []; } 這里幾個參數(shù)分別是要格式化的CSS代碼、CSS屬性聲明前空格寬度，類型(格式化/壓縮) 1、把多個空格合并成一個，去掉換行： formathtmljscss.prototype.removeSpace = function() { this.source = this.source.replace(/s+| /g, " ") .replace(/s*{s*/g, "{") .replace(/s*}s*/g, "}") .replace(/s*:s*/g, ":") .replace(/s*;s*/g, ";"); } 2、對處理后的字符串按"{"進行分組 formathtmljscss.prototype.split = function() { varbigqleft = this.source.split("{"); } 3、遍歷分組，對含有"}"的部分再次以"}"進行分組 formathtmljscss.prototype.split = function() { varbigqleft = this.source.split("{"); varbigqright; for(vari = 0; i if(bigqleft[i].indexOf("}") != -1) { bigqright = bigqleft[i].split("}"); } else{ } } } 4、對分組后的數(shù)據(jù)進行處理，主要是加上空格和換行 這里的處理主要分為，把CSS屬性聲明和值部分取出來，然后加上空格和換行： formathtmljscss.prototype.split = function() { varbigqleft = this.source.split("{"); varbigqright; for(vari = 0; i if(bigqleft[i].indexOf("}") != -1) { bigqright = bigqleft[i].split("}"); varpv = bigqright[0].split(";"); for(varj = 0; j pv[j] = this.formatStatement(this.trim(pv[j]),true); if(pv[j].length >0) { this.output.push(this.spaceStr + pv[j] + "; "); } } this.output.push("} "); bigqright[1] = this.trim(this.formatSelect(bigqright[1])); if(bigqright[1].length >0) { this.output.push(bigqright[1], " { "); } } else{ this.output.push(this.trim(this.formatSelect(bigqleft[i])), " { "); } } } 這里調(diào)用了幾個方法：trim、formatSelect、formatStatement，下面一一說明。 trim：從命名就可以看出是去除首尾空格; formathtmljscss.prototype.trim = function(str) { returnstr.replace(/(^s*)|(s*$)/g, ""); } formatSelect：是處理選擇器部分語法，做法就是給"."前面加上空格，把","前后的空格去掉，把多個空格合并為一個: formathtmljscss.prototype.formatSelect = function(str) { returnstr.replace(/./g, " .") .replace(/s+/g, " ") .replace(/. /g, ".") .replace(/s*,s*/g, ","); } formatStatement：是處理“css屬性聲明：值;”部分的語法，做法就是給":"后面加上空格，把多個空格合并為一個，去掉“#”后面的空格，去掉"px"前面的空格，去掉"-"兩邊的空格，去掉":"前面的空格: formathtmljscss.prototype.formatStatement = function(str, autoCorrect) { str = str.replace(/:/g, " : ") .replace(/s+/g, " ") .replace("# ", "#") .replace(/s*px/ig, "px") .replace(/s*-s*/g, "-") .replace(/s*:/g, ":"); returnstr; } 調(diào)用 調(diào)用部分比較簡單，對于格式化來說就是去掉空格和換行，然后分組處理，對于壓縮來說就是去掉空格和換行： formathtmljscss.prototype.formatcss = function() { if(this.formatType == "compress") { this.removeSpace(); } else{ this.removeSpace(); this.split(); this.source = this.output.join(""); } } 界面HTML代碼： [[63738]] [[63739]] View Code 跟頁面元素按鈕綁定事件: [[63738]] [[63739]] View Code window.onload = function() { varsubmitBtn = document.getElementById("submit"); vartabsize = document.getElementById("tabsize"); varsourceCon = document.getElementById("source"); varsize = 4; varformatType = "format"; submitBtn.onclick = function() { varradios = document.getElementsByName("format_type"); for(i = 0; i if(radios[i].checked) { formatType = radios[i].value; break; } } varformat = newformathtmljscss(sourceCon.value, size, formatType); format.formatcss(); sourceCon.value = format.source; } tabsize.onchange = function() { size = this.options[this.options.selectedIndex].value; submitBtn.click(); returnfalse; } } 演示 歡迎大家測試挑刺哈！ [[63740]] 作者：Artwl 出處：http://artwl.cnblogs.com 本文首發(fā)博客園，版權(quán)歸作者跟博客園共有。轉(zhuǎn)載必須保留本段聲明，并在頁面顯著位置給出本文鏈接，否則保留追究法律責任的權(quán)利。 推薦工具：在線測試正則表達式、JS/HTML在線格式化
文章標題：原生JS進行CSS格式化和壓縮
URL網(wǎng)址：http://m.fisionsoft.com.cn/article/dposphd.html
