日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用原生JS進(jìn)行CSS格式化和壓縮

前  言

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)企業(yè)網(wǎng)站設(shè)計(jì)方案、改版、費(fèi)用等問題，行業(yè)涉及木托盤等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

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

原  理

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

 
 
 
    
  
  
  
  1. 選擇器{ 
    2. 
  
  
  
  2. 　　css屬性聲明：值; 
    3. 
  
  
  
  3. }
    4.

所以對CSS格式化也就比較簡單，大致分為以下幾步;

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

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

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

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

對CSS壓縮就比較簡單了，把空格合并，去掉換行就可以了

格式化

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

初始化：

 
 
 
    
  
  
  
  1. function formathtmljscss(source, spaceWidth, formatType) { 
    2. 
  
  
  
  2.     this.source = source; 
    3. 
  
  
  
  3.     this.spaceStr = "    "; 
    4. 
  
  
  
  4.     if (!isNaN(spaceWidth)) { 
    5. 
  
  
  
  5.         if (spaceWidth > 1) { 
    6. 
  
  
  
  6.             this.spaceStr = ""; 
    7. 
  
  
  
  7.             for (var i = 0; i < spaceWidth; i++) { 
    8. 
  
  
  
  8.                 this.spaceStr += " "; 
    9. 
  
  
  
  9.             } 
    10. 
  
  
  
  10.         } 
    11. 
  
  
  
  11.         else { 
    12. 
  
  
  
  12.             this.spaceStr = "\t"; 
    13. 
  
  
  
  13.         } 
    14. 
  
  
  
  14.     } 
    15. 
  
  
  
  15.     this.formatType = formatType; 
    16. 
  
  
  
  16.     this.output = []; 
    17. 
  
  
  
  17. }
    18.

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

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

 
 
 
    
  
  
  
  1. formathtmljscss.prototype.removeSpace = function () { 
    2. 
  
  
  
  2.     this.source = this.source.replace(/\s+|\n/g, " ") 
    3. 
  
  
  
  3.         .replace(/\s*{\s*/g, "{") 
    4. 
  
  
  
  4.         .replace(/\s*}\s*/g, "}") 
    5. 
  
  
  
  5.         .replace(/\s*:\s*/g, ":") 
    6. 
  
  
  
  6.         .replace(/\s*;\s*/g, ";"); 
    7. 
  
  
  
  7. }
    8.

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

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

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

 
 
 
    
  
  
  
  1. formathtmljscss.prototype.split = function () { 
    2. 
  
  
  
  2.     var bigqleft = this.source.split("{"); 
    3. 
  
  
  
  3.     var bigqright; 
    4. 
  
  
  
  4.     for (var i = 0; i < bigqleft.length; i++) { 
    5. 
  
  
  
  5.         if (bigqleft[i].indexOf("}") != -1) { 
    6. 
  
  
  
  6.             bigqright = bigqleft[i].split("}"); 
    7. 
  
  
  
  7.         } 
    8. 
  
  
  
  8.         else { 
    9. 
  
  
  
  9.             
    10. 
  
  
  
  10.         } 
    11. 
  
  
  
  11.     } 
    12. 
  
  
  
  12. }
    13.

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

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

 
 
 
    
  
  
  
  1. formathtmljscss.prototype.split = function () { 
    2. 
  
  
  
  2.     var bigqleft = this.source.split("{"); 
    3. 
  
  
  
  3.     var bigqright; 
    4. 
  
  
  
  4.     for (var i = 0; i < bigqleft.length; i++) { 
    5. 
  
  
  
  5.         if (bigqleft[i].indexOf("}") != -1) { 
    6. 
  
  
  
  6.             bigqright = bigqleft[i].split("}"); 
    7. 
  
  
  
  7.             var pv = bigqright[0].split(";"); 
    8. 
  
  
  
  8.             for (var j = 0; j < pv.length; j++) { 
    9. 
  
  
  
  9.                 pv[j] = this.formatStatement(this.trim(pv[j]),true); 
    10. 
  
  
  
  10.                 if (pv[j].length > 0) { 
    11. 
  
  
  
  11.                     this.output.push(this.spaceStr + pv[j] + ";\n"); 
    12. 
  
  
  
  12.                 } 
    13. 
  
  
  
  13.             } 
    14. 
  
  
  
  14.             this.output.push("}\n"); 
    15. 
  
  
  
  15.             bigqright[1] = this.trim(this.formatSelect(bigqright[1])); 
    16. 
  
  
  
  16.             if (bigqright[1].length > 0) { 
    17. 
  
  
  
  17.                 this.output.push(bigqright[1], " {\n"); 
    18. 
  
  
  
  18.             } 
    19. 
  
  
  
  19.         } 
    20. 
  
  
  
  20.         else { 
    21. 
  
  
  
  21.             this.output.push(this.trim(this.formatSelect(bigqleft[i])), " {\n"); 
    22. 
  
  
  
  22.         } 
    23. 
  
  
  
  23.     } 
    24. 
  
  
  
  24. }
    25.

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

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

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

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

 
 
 
    
  
  
  
  1. formathtmljscss.prototype.formatSelect = function (str) { 
    2. 
  
  
  
  2.     return str.replace(/\./g, " .") 
    3. 
  
  
  
  3.         .replace(/\s+/g, " ") 
    4. 
  
  
  
  4.         .replace(/\. /g, ".") 
    5. 
  
  
  
  5.         .replace(/\s*,\s*/g, ","); 
    6. 
  
  
  
  6. }
    7.

formatStatement：是處理“css屬性聲明：值;”部分的語法，做法就是給":"后面加上空格，把多個(gè)空格合并為一個(gè)，去掉“#”后面的空格，去掉"px"前面的空格，去掉"-"兩邊的空格，去掉":"前面的空格:

 
 
 
    
  
  
  
  1. formathtmljscss.prototype.formatStatement = function (str, autoCorrect) { 
    2. 
  
  
  
  2.     str = str.replace(/:/g, " : ") 
    3. 
  
  
  
  3.         .replace(/\s+/g, " ") 
    4. 
  
  
  
  4.         .replace("# ", "#") 
    5. 
  
  
  
  5.         .replace(/\s*px/ig, "px") 
    6. 
  
  
  
  6.         .replace(/\s*-\s*/g, "-") 
    7. 
  
  
  
  7.         .replace(/\s*:/g, ":"); 
    8. 
  
  
  
  8. 
  
  
  
  9.     return str; 
    10. 
  
  
  
  10. }
    11.

調(diào)  用

調(diào)用部分比較簡單，對于格式化來說就是去掉空格和換行，然后分組處理，對于壓縮來說就是去掉空格和換行：

 
 
 
    
  
  
  
  1. formathtmljscss.prototype.formatcss = function () { 
    2. 
  
  
  
  2.     if (this.formatType == "compress") { 
    3. 
  
  
  
  3.         this.removeSpace(); 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5.     else { 
    6. 
  
  
  
  6.         this.removeSpace(); 
    7. 
  
  
  
  7.         this.split(); 
    8. 
  
  
  
  8.         this.source = this.output.join(""); 
    9. 
  
  
  
  9.     } 
    10. 
  
  
  
  10. }
    11.

界面HTML代碼：

 
 
 
    
  
  
  
    2. 
  
  
  
  2.         
    3. 
  
  
  
  3.             
    4. 
  
  
  
  4.                 
    5. 
  
  
  
  5.                     
    CSS格式化/壓縮
    6. 
  
  
  
  6.                     
    7. 
  
  
  
  7.                         
    8. 
  
  
  
  8.                             
    9. 
  
  
  
  9.                                 格式化 / 壓縮  
    10. 
  
  
  
  10.                             
    11. 
  
  
  
  11.                             縮進(jìn)：
    12. 
  
  
  
  12.                             
      
  
  
  
    •                                 
    • 
  
  
  
    •                                     
      • 
  
  
  
    •                                         tab鍵縮進(jìn)
      • 
  
  
  
    •                                         2空格縮進(jìn)
      • 
  
  
  
    •                                         4空格縮進(jìn)
      • 
  
  
  
    •                                     
      • 
  
  
  
    •                                 
      • 
  
  
  
    •                             
    13. 
  
  
  
  13.                             類型：
    14. 
  
  
  
  14.                             格式化
    15. 
  
  
  
  15.                             壓縮
    16. 
  
  
  
  16.                         
    17. 
  
  
  
  17.                     
  •                     
  •                         
  •                             
  •                         
  •                     
  •                 
  •             
  •         
  •     

    • 跟頁面元素按鈕綁定事件:

     
 
 
      
  
  
  
    1. window.onload = function () { 
      2. 
  
  
  
    2.     var submitBtn = document.getElementById("submit"); 
      3. 
  
  
  
    3.     var tabsize = document.getElementById("tabsize"); 
      4. 
  
  
  
    4.     var sourceCon = document.getElementById("source"); 
      5. 
  
  
  
    5.     var size = 4; 
      6. 
  
  
  
    6.     var formatType = "format"; 
      7. 
  
  
  
    7.     submitBtn.onclick = function () { 
      8. 
  
  
  
    8.         var radios = document.getElementsByName("format_type"); 
      9. 
  
  
  
    9.         for (i = 0; i < radios.length; i++) { 
      10. 
  
  
  
    10.             if (radios[i].checked) { 
      11. 
  
  
  
    11.                 formatType = radios[i].value; 
      12. 
  
  
  
    12.                 break; 
      13. 
  
  
  
    13.             } 
      14. 
  
  
  
    14.         } 
      15. 
  
  
  
    15.         var format = new formathtmljscss(sourceCon.value, size, formatType); 
      16. 
  
  
  
    16.         format.formatcss(); 
      17. 
  
  
  
    17.         sourceCon.value = format.source; 
      18. 
  
  
  
    18.     } 
      19. 
  
  
  
    19.     tabsize.onchange = function () { 
      20. 
  
  
  
    20.         size = this.options[this.options.selectedIndex].value; 
      21. 
  
  
  
    21.         submitBtn.click(); 
      22. 
  
  
  
    22.         return false; 
      23. 
  
  
  
    23.     } 
      24. 
  
  
  
    24. }
      25.

    演示(請進(jìn)原文)


    本文名稱：用原生JS進(jìn)行CSS格式化和壓縮
    分享路徑：http://www.dlmjj.cn/article/dhgjoei.html