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

我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，經(jīng)常會(huì)看到很相似的幾種內(nèi)容。比如下面這兩種樣子：

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

其實(shí)這就得談?wù)劇绊?yè)面重用機(jī)制”了，下面所寫(xiě)的積木式網(wǎng)頁(yè)構(gòu)建方式就能夠很好的處理頁(yè)面重用這個(gè)問(wèn)題。

接下來(lái)將從以下4個(gè)方面對(duì)積木式網(wǎng)頁(yè)開(kāi)發(fā)進(jìn)行描述：

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

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

編寫(xiě)網(wǎng)頁(yè)基本的樣式

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

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

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

Web Developer

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

我用紅線大致描了一下頁(yè)面的信息塊，接下來(lái)我們來(lái)分析一下信息：

一張展示圖

一個(gè)標(biāo)題

商品的列表信息（包括總價(jià)）

附屬品的列表信息

購(gòu)買(mǎi)按鈕

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

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

    
    

        
賠本大甩賣(mài)
        

            

                眼鏡
                500元
            
            

                外套
                300元
            
            

                iPhone 5S
                88元
            
            

                總價(jià)
                僅需888元
            
        
        

            
附帶品
            

                
可樂(lè)一罐
                
飯碗一個(gè)
                
6塊錢(qián)的麻辣燙
            
        
        買(mǎi)買(mǎi)買(mǎi)
    

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

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

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

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

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

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

// A類(lèi)樣式
...
// B類(lèi)樣式
...

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

class psTreatmentA implements productStackWrap {
    ...
}

class psTreatmentB implements productStackWrap {
    ...
}

...

class psTreatmentN implements productStackWrap {
    ...
}

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

那么我們改怎么針對(duì)這個(gè)類(lèi)來(lái)寫(xiě)屬于它實(shí)例的樣式呢？那么看一下下面兩段代碼就可以理解了。

/* A類(lèi)樣式 */
.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類(lèi)樣式 */
.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;
}

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

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

場(chǎng)景一：

PM說(shuō)：“我們換回以前那份設(shè)計(jì)稿吧?！?/p>

FE說(shuō)：“好的，馬上弄?！保S手刪除了引入的B樣式，引入A樣式，OK，解決問(wèn)題~）

場(chǎng)景二：

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

FE說(shuō)：“我看看設(shè)計(jì)稿來(lái)（啪啪啪~看完設(shè)計(jì)稿，發(fā)現(xiàn)其中有很多復(fù)用的網(wǎng)頁(yè)樣式）?！?/p>

FE再說(shuō)：“我盡力吧，晚上做完回你。（使用通用的結(jié)構(gòu)include，最后將之前項(xiàng)目中的A...N樣式拿來(lái)一套，解決問(wèn)題?。?/p>

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

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

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

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