摘要：接下來將從以下個方面對積木式網頁開發進行描述分析頁面結構構建網頁的結構編寫網頁基本的樣式編寫不同表現的樣式一分析頁面結構雖然的語法那些很簡單，但是在網頁設計和開發中，它卻占據著不可動搖的地位。

我們在瀏覽網頁的時候，經常會看到很相似的幾種內容。比如下面這兩種樣子：

看上去是不是比較像呢？其實就是圖片的位置不一樣，大致上可以認為是一樣的吧，那么針對這樣子的相似度較高的網頁，我們應該怎么樣開發呢？

其實這就得談談“頁面重用機制”了，下面所寫的積木式網頁構建方式就能夠很好的處理頁面重用這個問題。

接下來將從以下4個方面對積木式網頁開發進行描述：

分析頁面結構

構建網頁的結構

編寫網頁基本的樣式

編寫不同表現的樣式

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

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

Web Developer

下面我們要參考的結構就如下圖中2種樣子：

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

一張展示圖

一個標題

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

附屬品的列表信息

購買按鈕

好吧，這里就不需要PM來確認啦，自己當一回PM ^8^，接下來我們需要描述網頁結構。

經過上面的分析，我們可以得出如下的DOM結構：

    
    

        
賠本大甩賣
        

            

                眼鏡
                500元
            
            

                外套
                300元
            
            

                iPhone 5S
                88元
            
            

                總價
                僅需888元
            
        
        

            
附帶品
            

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

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

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

在此之前我們來看看我本地的文件結構：

demo  //文件夾
    A.css  //樣式1
    B.css  //樣式2
    index.css  //基本樣式
    index.html //DOM結構

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

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

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

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

class psTreatmentA implements productStackWrap {
    ...
}

class psTreatmentB implements productStackWrap {
    ...
}

...

class psTreatmentN implements productStackWrap {
    ...
}

注意這里用的是接口哦，CSS的復用可以是多繼承的關系，至少我是這么理解的。

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

/* 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結構，來穿上不同的樣式了，技術是很簡單的技術，但是不同的玩法能玩出不同的精彩哦~

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

場景一：

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

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

場景二：

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

FE說：“我看看設計稿來（啪啪啪~看完設計稿，發現其中有很多復用的網頁樣式）。”

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

好處還有很多呢，等待你去發現~

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

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

.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;
}