本篇內(nèi)容介紹了“怎么用原生JS進(jìn)行CSS格式化和壓縮”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司客戶idc服務(wù)中心，提供成都移動(dòng)機(jī)房、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過(guò)各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開(kāi)放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。

前  言

一直比較喜歡收集網(wǎng)頁(yè)特效，很多時(shí)候都會(huì)遇到CSS被壓縮過(guò)的情況，這時(shí)查看起來(lái)就會(huì)非常不方便，有時(shí)為了減少文件大小，也會(huì)對(duì)自己的CSS進(jìn)行壓縮，網(wǎng)上提供這樣服務(wù)的很多，但都不盡如人意，因此打算自己動(dòng)手寫一個(gè)JS來(lái)進(jìn)行CSS的格式化和壓縮。

原  理

CSS的結(jié)構(gòu)如下：

選擇器{  css屬性聲明：值;  }

所以對(duì)CSS格式化也就比較簡(jiǎn)單，大致分為以下幾步;

1、把多個(gè)空格合并成一個(gè)，去掉換行

2、對(duì)處理后的字符串按"{"進(jìn)行分組

3、遍歷分組，對(duì)含有"}"的部分再次以"}"進(jìn)行分組

4、對(duì)分組后的數(shù)據(jù)進(jìn)行處理，主要是加上空格和換行

對(duì)CSS壓縮就比較簡(jiǎn)單了，把空格合并，去掉換行就可以了

格式化

下面分步對(duì)以上步驟進(jìn)行實(shí)現(xiàn)。

初始化：

function formathtmljscss(source, spaceWidth, formatType) {      this.source = source;      this.spaceStr = "    ";      if (!isNaN(spaceWidth)) {          if (spaceWidth > 1) {              this.spaceStr = "";              for (var i = 0; i < spaceWidth; i++) {                  this.spaceStr += " ";              }          }          else {              this.spaceStr = "\t";          }      }      this.formatType = formatType;      this.output = [];  }

這里幾個(gè)參數(shù)分別是要格式化的CSS代碼、CSS屬性聲明前空格寬度，類型(格式化/壓縮)

1、把多個(gè)空格合并成一個(gè)，去掉換行：

formathtmljscss.prototype.removeSpace = function () {      this.source = this.source.replace(/\s+|\n/g, " ")          .replace(/\s*{\s*/g, "{")          .replace(/\s*}\s*/g, "}")          .replace(/\s*:\s*/g, ":")          .replace(/\s*;\s*/g, ";");  }

2、對(duì)處理后的字符串按"{"進(jìn)行分組

formathtmljscss.prototype.split = function () {      var bigqleft = this.source.split("{");  }

3、遍歷分組，對(duì)含有"}"的部分再次以"}"進(jìn)行分組

formathtmljscss.prototype.split = function () {      var bigqleft = this.source.split("{");      var bigqright;      for (var i = 0; i < bigqleft.length; i++) {          if (bigqleft[i].indexOf("}") != -1) {              bigqright = bigqleft[i].split("}");          }          else {                       }      }  }

4、對(duì)分組后的數(shù)據(jù)進(jìn)行處理，主要是加上空格和換行

這里的處理主要分為，把CSS屬性聲明和值部分取出來(lái)，然后加上空格和換行：

formathtmljscss.prototype.split = function () {      var bigqleft = this.source.split("{");      var bigqright;      for (var i = 0; i < bigqleft.length; i++) {          if (bigqleft[i].indexOf("}") != -1) {              bigqright = bigqleft[i].split("}");              var pv = bigqright[0].split(";");              for (var j = 0; j < pv.length; j++) {                  pv[j] = this.formatStatement(this.trim(pv[j]),true);                  if (pv[j].length > 0) {                      this.output.push(this.spaceStr + pv[j] + ";\n");                  }              }              this.output.push("}\n");              bigqright[1] = this.trim(this.formatSelect(bigqright[1]));              if (bigqright[1].length > 0) {                  this.output.push(bigqright[1], " {\n");              }          }          else {              this.output.push(this.trim(this.formatSelect(bigqleft[i])), " {\n");          }      }  }

這里調(diào)用了幾個(gè)方法：trim、formatSelect、formatStatement，下面一一說(shuō)明。

trim：從命名就可以看出是去除首尾空格;

formathtmljscss.prototype.trim = function (str) {      return str.replace(/(^\s*)|(\s*$)/g, "");  }

formatSelect：是處理選擇器部分語(yǔ)法，做法就是給"."前面加上空格，把","前后的空格去掉，把多個(gè)空格合并為一個(gè):

formathtmljscss.prototype.formatSelect = function (str) {      return str.replace(/\./g, " .")          .replace(/\s+/g, " ")          .replace(/\. /g, ".")          .replace(/\s*,\s*/g, ",");  }

formatStatement：是處理“css屬性聲明：值;”部分的語(yǔ)法，做法就是給":"后面加上空格，把多個(gè)空格合并為一個(gè)，去掉“#”后面的空格，去掉"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, ":");       return str;  }

調(diào)  用

調(diào)用部分比較簡(jiǎn)單，對(duì)于格式化來(lái)說(shuō)就是去掉空格和換行，然后分組處理，對(duì)于壓縮來(lái)說(shuō)就是去掉空格和換行：

formathtmljscss.prototype.formatcss = function () {      if (this.formatType == "compress") {          this.removeSpace();      }      else {          this.removeSpace();          this.split();          this.source = this.output.join("");      }  }

界面HTML代碼：

                                                            
CSS格式化/壓縮
                                                                                                            格式化 / 壓縮                               
                             縮進(jìn)：                             
                                 
                                                                              tab鍵縮進(jìn)                                         2空格縮進(jìn)                                         4空格縮進(jìn)                                                                      
                             
                             類型：                             格式化                             壓縮