摘要：接下來將從以下個方面對積木式網(wǎng)頁開發(fā)進行描述分析頁面結(jié)構(gòu)構(gòu)建網(wǎng)頁的結(jié)構(gòu)編寫網(wǎng)頁基本的樣式編寫不同表現(xiàn)的樣式一分析頁面結(jié)構(gòu)雖然的語法那些很簡單，但是在網(wǎng)頁設(shè)計和開發(fā)中，它卻占據(jù)著不可動搖的地位。

我們在瀏覽網(wǎng)頁的時候，經(jīng)常會看到很相似的幾種內(nèi)容。比如下面這兩種樣子：

看上去是不是比較像呢？其實就是圖片的位置不一樣，大致上可以認(rèn)為是一樣的吧，那么針對這樣子的相似度較高的網(wǎng)頁，我們應(yīng)該怎么樣開發(fā)呢？

其實這就得談?wù)劇绊撁嬷赜脵C制”了，下面所寫的積木式網(wǎng)頁構(gòu)建方式就能夠很好的處理頁面重用這個問題。

接下來將從以下4個方面對積木式網(wǎng)頁開發(fā)進行描述：

分析頁面結(jié)構(gòu)

構(gòu)建網(wǎng)頁的結(jié)構(gòu)

編寫網(wǎng)頁基本的樣式

編寫不同表現(xiàn)的樣式

雖然HTML的語法那些很簡單，但是在網(wǎng)頁設(shè)計和開發(fā)中，它卻占據(jù)著不可動搖的地位。首先我們需要根據(jù)設(shè)計師的PSD和產(chǎn)品經(jīng)理所描述的需求，然后確定我們網(wǎng)頁的結(jié)構(gòu)，反復(fù)的與他們溝通，確定更多的信息，才讓我們的網(wǎng)頁結(jié)構(gòu)的生命周期變得更長。

這里推薦一個Chrome的插件，可以瞬間去除CSS和JavaScript的效果，查看到最原始網(wǎng)頁的表現(xiàn)。

Web Developer

下面我們要參考的結(jié)構(gòu)就如下圖中2種樣子：

我用紅線大致描了一下頁面的信息塊，接下來我們來分析一下信息：

一張展示圖

一個標(biāo)題

商品的列表信息（包括總價）

附屬品的列表信息

購買按鈕

好吧，這里就不需要PM來確認(rèn)啦，自己當(dāng)一回PM ^8^，接下來我們需要描述網(wǎng)頁結(jié)構(gòu)。

經(jīng)過上面的分析，我們可以得出如下的DOM結(jié)構(gòu)：

    
    

        
賠本大甩賣
        

            

                眼鏡
                500元
            
            

                外套
                300元
            
            

                iPhone 5S
                88元
            
            

                總價
                僅需888元
            
        
        

            
附帶品
            

                
可樂一罐
                
飯碗一個
                
6塊錢的麻辣燙
            
        
        買買買
    

我們這里不需要任何樣式，也會是一個很美的網(wǎng)頁，至少看起來整潔，信息整齊。（圖片太大，直截取文本部分。因為圖片的寬、高在初始化的時候必須要設(shè)置的，至于為什么要設(shè)置可以查閱Google，主要是給圖片預(yù)留空間，提升文檔性能。）

好吧，到這里我們的DOM結(jié)構(gòu)就構(gòu)造完了，接下來添加一點基本的，也可以理解為公用的樣式，這里的公用可以不理解為積木塊共有的樣式。說起來繞了一點，也就是說不同表現(xiàn)的共有樣式可以與本身結(jié)構(gòu)具有的基本樣式進行分離，這個可以看自己喜好來決定。

在此之前我們來看看我本地的文件結(jié)構(gòu)：

demo  //文件夾
    A.css  //樣式1
    B.css  //樣式2
    index.css  //基本樣式
    index.html //DOM結(jié)構(gòu)

這里可以處理一些基本的網(wǎng)頁樣式信息，比如恢復(fù)一些元素的默認(rèn)值、調(diào)整部分間隙。這部分代碼位于：index.css中，內(nèi)容放入文章末尾吧，這里我們連貫的描述怎么做頁面重用。

說了怎么久，DOM結(jié)構(gòu)和基本樣式都搞好啦，那么現(xiàn)在我們來實現(xiàn)我們的兩張圖。現(xiàn)在我們只需要做的是在最外層DOM結(jié)構(gòu)中加入不同的類名：

// A類樣式
...
// B類樣式
...

這樣我們利用CSS的權(quán)重來控制特殊的樣式，其實這里的 psTreatmentA 類更像一個命名空間，如果用嚴(yán)格的語言來理解的話，那么可以理解為：

class psTreatmentA implements productStackWrap {
    ...
}

class psTreatmentB implements productStackWrap {
    ...
}

...

class psTreatmentN implements productStackWrap {
    ...
}

注意這里用的是接口哦，CSS的復(fù)用可以是多繼承的關(guān)系，至少我是這么理解的。

那么我們改怎么針對這個類來寫屬于它實例的樣式呢？那么看一下下面兩段代碼就可以理解了。

/* A類樣式 */
.psTreatmentA {
    width: 310px;
}
.psTreatmentA .psImage {
    width: 80px;
    height: 112px;
    float: left;
}
.psTreatmentA .psTitle {
    margin-left: 100px;
}
.psTreatmentA .psPriceWrap {
    margin-left: 100px;
    text-align: right;
}
.psTreatmentA .psCTA {
    margin: 0 auto;
}

/* B類樣式 */
.psTreatmentB {
    width: 385px;
}
.psTreatmentB .psImage {
    width: 386px;
    height: 287px;
    display: block;
    margin-bottom: 20px;
}
.psTreatmentB .psPriceWrap {
    text-align: left;
    margin-left: 110px;
}
.psTreatmentB .psTitle {
    text-align: center;
    font-size: 27px;
}

這樣做了過后就能夠使用同一套DOM結(jié)構(gòu)，來穿上不同的樣式了，技術(shù)是很簡單的技術(shù)，但是不同的玩法能玩出不同的精彩哦~

那么，這樣做有什么好處呢？這里隨機列幾條吧。

場景一：

PM說：“我們換回以前那份設(shè)計稿吧。”

FE說：“好的，馬上弄。”（隨手刪除了引入的B樣式，引入A樣式，OK，解決問題~）

場景二：

PM說：“這是最新設(shè)計稿，要趕緊上線，1天能上線嗎？”

FE說：“我看看設(shè)計稿來（啪啪啪~看完設(shè)計稿，發(fā)現(xiàn)其中有很多復(fù)用的網(wǎng)頁樣式）。”

FE再說：“我盡力吧，晚上做完回你。（使用通用的結(jié)構(gòu)include，最后將之前項目中的A...N樣式拿來一套，解決問題！）”

好處還有很多呢，等待你去發(fā)現(xiàn)~

雖然上面文章描述了樣式上的重用，其實在JS行為的把握上我們也可以使用相同處理事情的方式，將JS行為的類將表現(xiàn)給分離出來，能夠更好的應(yīng)對需求的變更以及增加代碼的可維護~

附：（文章例子中的基本樣式）

.productStackWrap {
    position: relative;
    font-size: 14px;
    margin: 40px 0;
    border: 1px solid #999;
    padding: 20px;
}
.psTitle {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 5px 0;
}
.psPriceWrap {
    padding: 0;
}
.psPriceWrap li {
    list-style: none;
    padding: 2px 0;
}
.spLabel {
    display: inline-block;
    width: 75px;
    text-align: right;
    padding-right: 3px;
}
.spAmount {
    display: inline-block;
    width: 75px;
    text-align: right;
    font-weight: 700;
}
.spTotalPrice {
    color: green;
}
.spDescriptionWrap p {
    line-height: 150%;
}
.psCTA {
    background: green;
    color: #fff;
    padding: 5px 0;
    width: 120px;
    display: block;
    border: 0;
    text-align: center;
    font-size: 20px;
    text-shadow: 1px 1px 1px #666;
    border-radius: 5px;
    background-clip: padding-box;
    background: #92c436;
    background: linear-gradient(top, #92c436 0%, #97c64b 50%, #80c217 51%, #7cbc0a 100%);
}
.descBulletsUL li {
    padding: 4px 0;
}