前  言

一直比較喜歡收集網(wǎng)頁(yè)特效，很多時(shí)候都會(huì)遇到CSS被壓縮過(guò)的情況，這時(shí)查看起來(lái)就會(huì)非常不方便，有時(shí)為了減少文件大小，也會(huì)對(duì)自己的CSS進(jìn)行壓縮，網(wǎng)上提供這樣服務(wù)的很多，但都不盡如人意，因此打算自己動(dòng)手寫(xiě)一個(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屬性聲明前空格寬度，類(lèi)型(格式化/壓縮)

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代碼：

<div id="content"> 
        <div class="container"> 
            <div class="box"> 
                <div class="main"> 
                    <h2>CSS格式化/壓縮</h2> 
                    <div id="blurb"> 
                        <fieldset id="options"> 
                            <button id="submit"> 
                                <span>格式化 / 壓縮&nbsp;&nbsp;<img alt="格式化" src="/images/29.png"/></span> 
                            </button><br/> 
                            <span>縮進(jìn)：</span> 
                            <ul> 
                                <li> 
                                    <select name="tabsize" id="tabsize"> 
                                        <option value="1">tab鍵縮進(jìn)</option> 
                                        <option value="2">2空格縮進(jìn)</option> 
                                        <option selected="selected" value="4">4空格縮進(jìn)</option> 
                                    </select> 
                                </li> 
                            </ul><br /> 
                            <span>類(lèi)型：</span><br /> 
                            <input type="radio" name="format_type" value="format" checked="checked" id="format_format" /><label for="format_format">格式化</label> 
                            <input type="radio" name="format_type" value="compress" id="format_compress" /><label for="format_compress">壓縮</label> 
                        </fieldset> 
                    </div> 
                    <div id="beauty"> 
                        <fieldset id="textarea-wrap"> 
                            <textarea rows="20" cols="40" id="source"></textarea> 
                        </fieldset> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 

跟頁(yè)面元素按鈕綁定事件:

window.onload = function () {  
    var submitBtn = document.getElementById("submit");  
    var tabsize = document.getElementById("tabsize");  
    var sourceCon = document.getElementById("source");  
    var size = 4;  
    var formatType = "format";  
    submitBtn.onclick = function () {  
        var radios = document.getElementsByName("format_type");  
        for (i = 0; i < radios.length; i++) {  
            if (radios[i].checked) {  
                formatType = radios[i].value;  
                break;  
            }  
        }  
        var format = new formathtmljscss(sourceCon.value, size, formatType);  
        format.formatcss();  
        sourceCon.value = format.source;  
    }  
    tabsize.onchange = function () {  
        size = this.options[this.options.selectedIndex].value;  
        submitBtn.click();  
        return false;  
    }  
} 

演示(請(qǐng)進(jìn)原文)

原文鏈接：http://www.cnblogs.com/artwl/archive/2012/03/25/2416909.html

【編輯推薦】

1. 10件有關(guān)JavaScript讓人費(fèi)解的事情
2. 面向?qū)ο蟮腏avaScript基本知識(shí)指南大全
3. 是時(shí)候開(kāi)始使用JavaScript嚴(yán)格模式了
4. 好用的高質(zhì)量JavaScript庫(kù)一覽
5. 一位反JavaScript主義者的覺(jué)醒