土豆网前端概况
一、分工和流程
在土豆網(wǎng)，以項(xiàng)目開發(fā)為核心，誰都可以帶項(xiàng)目，擔(dān)任項(xiàng)目經(jīng)理。
一個(gè)典型的土豆網(wǎng)項(xiàng)目中，當(dāng)進(jìn)入正式開發(fā)階段，通常參與者包括：1名設(shè)計(jì)師，1-2名前端工程師，1到多名后臺工程師，1-2名系統(tǒng)運(yùn)維管理員。
其中，前三者的工作都是可以并發(fā)的，最終整合通常是前段工程師，對于復(fù)雜度較低的頁面處理，一般工程師也可以直接參與。
不管是設(shè)計(jì)師、前端和后臺工程師，對于分離的領(lǐng)會(huì)和理解都非常重要，并且導(dǎo)致配合上，不同理解層次的人會(huì)產(chǎn)生不同的配合效果。
其中，設(shè)計(jì)師和前端工程師的配合無疑是最重要的，設(shè)計(jì)師的風(fēng)格直接導(dǎo)致前端頁面結(jié)構(gòu)的簡潔或者復(fù)雜，程序邏輯的簡潔或者復(fù)雜。
一個(gè)卓越于設(shè)計(jì)并且理解W3C網(wǎng)頁標(biāo)準(zhǔn)的設(shè)計(jì)師是珍稀而罕見的。
二、基本架構(gòu)（Architecture）
架構(gòu)的目標(biāo)：可擴(kuò)展性、可維護(hù)性、可復(fù)用性
1. 內(nèi)容（Infomation/Content）
土豆網(wǎng)的內(nèi)容結(jié)構(gòu)，從模塊來說，如中心橙色圈所區(qū)分出的九個(gè)大塊：
2.????? 結(jié)構(gòu)層（Structure）
A、 頁面（Page）結(jié)構(gòu)
a) 概覽
一個(gè)典型左右版式的頁面樣式：
土豆網(wǎng)的所有頁面都基于這個(gè)頁面模型，分別是：上下導(dǎo)航、內(nèi)容，內(nèi)容分為貫穿版式或者左右版式。
在左右區(qū)域中分別由盒狀模型擔(dān)任最終內(nèi)容的承載結(jié)構(gòu)。
解析如下：
HTML片段：
點(diǎn)擊放大
從其功用來說，則分為三個(gè)層次：
點(diǎn)擊放大
這些特性決定了后面所有前端架構(gòu)的基調(diào)。
b)? 導(dǎo)航
i、 頂部導(dǎo)航
土豆網(wǎng)導(dǎo)航分為三種，常規(guī)導(dǎo)航、黑色小黑邊導(dǎo)航，以及視頻播放頁面的專用導(dǎo)航。
這三種導(dǎo)航使用的HTML是基本一致的，通過CSS來控制不同狀態(tài)下的表現(xiàn)：
點(diǎn)擊放大
模型解析：?
點(diǎn)擊放大
HTML片段：
點(diǎn)擊放大
ii、 底部導(dǎo)航（從略）
c)內(nèi)容
i、 貫穿版式：在個(gè)別頁面，會(huì)出現(xiàn)沒有左右布局的全頁面橫向貫穿版式，這時(shí)頁面結(jié)構(gòu)內(nèi)只有Content，沒有Main或者Side，此時(shí)盒狀模型全部直接堆積在Content內(nèi)。另外，除了全站首頁以外的所有公共頁面都是特制并保持風(fēng)格統(tǒng)一的貫穿版式。
ii、 左右側(cè)欄：最常見的布局，存在于絕大部分頁面。最主要應(yīng)用在內(nèi)頁管理區(qū)域，首頁也有用到。
iii、 混合版式：只有視頻播放頁面用到。
| B、 盒狀（box）模型結(jié)構(gòu)
解析如下： HTML片段如下： C、包裝（pack）模型
包裝模型最重要的變化來自于樣式層的處理，其結(jié)構(gòu)本身很簡單，就不做解析了，以下是一個(gè)視頻包的HTML片段范例： |
3.樣式層（Style）
1、全局、模塊和頁面級
a）土豆網(wǎng)的所有頁面都應(yīng)用了全局樣式global.css（簡寫為_g.css），位于“/skin/g/_g.css”；該樣式文件包含了包括主要布局、導(dǎo)航條、盒狀模型、包裝模型以及常用工具類；
b）所有位于一級導(dǎo)航以及類似風(fēng)格的頁面使用的是公眾樣式，位于“/skin/public/v.css”；所有內(nèi)頁管理使用的是內(nèi)頁樣式，，位于“/skin/my/v.css”；
c）所有獨(dú)立頁面使用自己獨(dú)有的樣式文件，命名以頁面功能或所在模塊為基準(zhǔn)；
d）頁面樣式的基本原則是：如果某一特定頁面樣式的代碼超過整個(gè)文件的1/3，會(huì)被獨(dú)立成為單個(gè)的樣式文件。否則，通常會(huì)合并在其頁面所在的模塊中；
c）特別少量的樣式，可以寫在頁面HEAH區(qū)域，或者寫在HTML，并沒有特別苛刻的要求，這是出于對當(dāng)前項(xiàng)目效率的考量。
舉一些例子：
-首頁
/skin/g/_g.css（全局風(fēng)格）
/skin/public/index.css（公眾區(qū)域的首頁風(fēng)格）
-視頻首頁
/skin/g/_g.css（全局風(fēng)格）
/skin/public/v.css（公眾區(qū)域的模塊風(fēng)格）
-我的視頻
/skin/g/_g.css（全局風(fēng)格）
/skin/my/v.css（內(nèi)頁管理界面模塊風(fēng)格）
/skin/my/clips.css（我的視頻頁面級風(fēng)格）
/skin/playlist/append.css（分享視頻的Toolkit封裝）
-視頻播放頁面
/skin/video/v.css（重點(diǎn)獨(dú)立頁面，特殊優(yōu)化，合并了_g.css等樣式）
2、抽象與實(shí)例、繼承和重載
a）全站級別的繼承和重載機(jī)制；
因?yàn)樯婕叭值臉邮蕉急环庋b在Global.css里，如果在模塊級或者頁面級需要對該樣式加以調(diào)整，辦法是重寫相關(guān)的類；
以下示例清晰地展示了一個(gè)視頻包（Pack）在類的繼承和重載的情況：
* 是一個(gè)全局樣式，規(guī)定了所有邊距的重置；
.pack 是一個(gè)抽象的包封裝，該類記錄了所有包的共性，其代碼如下。空的類可能會(huì)在一些生僻的瀏覽器上造成意外的問題，但是通常不會(huì)，這里書寫空類是為了保證在邏輯上的可閱讀性。
.pack { float:left; }
??? .pack ul {}
??? .pack li {list-style:none;}
??? .pack b { font-weight:normal;color:#686868;font-size:11px;font-family:Arial; }
在.pack下，書寫了所有包裝模型的實(shí)力類：.pack_clip, .pack_user, .pack_album, .pack_list，等等；
以下是視頻包和豆單包的例子：
.pack_clip {
??? padding:12px 10px;
??? color:#000;width:126px;
}
.pack_list {
??? padding:12px 3px;
??? color:#000;width:144px;
}
以上類的抽象和繼承主要體現(xiàn)在對各自私有部分的派生。以實(shí)現(xiàn)代碼的精簡和復(fù)用性。
在一個(gè)HTML片段中，調(diào)用的方法是：首先應(yīng)用抽象類或者父類，然后應(yīng)用實(shí)力類或者子類，例如：
<div class="pack pack_user director"></div>
在這個(gè)例子中，director代表豆角，這個(gè)類可能書寫在某個(gè)模塊中，也可能在頁面級的樣式中，對前面的類進(jìn)一步重寫和修正；
修正的時(shí)候只需要書寫需要被修改或者重置的語句就可以了。
在上面的示例中，因?yàn)轫撁娴男枰?#xff0c;模塊級別的/skin/public/v.css重寫了pack_clip的寬度：
#programpage .pack_clip{width:167px;}
當(dāng)父類和抽象類被修改的時(shí)候，全站的所有Pack模型都會(huì)被修正，但是不影響到子類所做出的私有派生或者復(fù)寫，也就不會(huì)影響某一個(gè)特殊頁面的獨(dú)立樣式；
關(guān)于類、抽象和繼承的方法很多，考慮到命名方法和選擇符，會(huì)有大量不同的處理風(fēng)格。然而最主要的思想都在各種面向?qū)ο蟮木幊虝杏性敿?xì)的技巧和說明，這里就不復(fù)述了。
在土豆網(wǎng)的樣式中，大量應(yīng)用了類似的辦法和技巧來處理可維護(hù)、可擴(kuò)展和可復(fù)用性。
TIPS：
4. 行為層（Behavior）
? 裝B遭雷劈，劈我吧!
總結(jié)
- 上一篇： 能简单才不简单，仿Flickr.com：
- 下一篇： 如何将SP1集成到Office 2007