一、分工和流程

在土豆網，以項目開發為核心，誰都可以帶項目，擔任項目經理。
一個典型的土豆網項目中，當進入正式開發階段，通常參與者包括：1名設計師，1-2名前端工程師，1到多名后臺工程師，1-2名系統運維管理員。
其中，前三者的工作都是可以并發的，最終整合通常是前段工程師，對于復雜度較低的頁面處理，一般工程師也可以直接參與。

不管是設計師、前端和后臺工程師，對于分離的領會和理解都非常重要，并且導致配合上，不同理解層次的人會產生不同的配合效果。
其中，設計師和前端工程師的配合無疑是最重要的，設計師的風格直接導致前端頁面結構的簡潔或者復雜，程序邏輯的簡潔或者復雜。
一個卓越于設計并且理解W3C網頁標準的設計師是珍稀而罕見的。

二、基本架構（Architecture）

架構的目標：可擴展性、可維護性、可復用性

1. 內容（Infomation/Content）
土豆網的內容結構，從模塊來說，如中心橙色圈所區分出的九個大塊：

2.????? 結構層（Structure）

A、 頁面（Page）結構

a) 概覽
一個典型左右版式的頁面樣式：

土豆網的所有頁面都基于這個頁面模型，分別是：上下導航、內容，內容分為貫穿版式或者左右版式。

在左右區域中分別由盒狀模型擔任最終內容的承載結構。
解析如下：

HTML片段：

點擊放大

從其功用來說，則分為三個層次：

點擊放大

這些特性決定了后面所有前端架構的基調。

b)? 導航

i、 頂部導航

土豆網導航分為三種，常規導航、黑色小黑邊導航，以及視頻播放頁面的專用導航。

這三種導航使用的HTML是基本一致的，通過CSS來控制不同狀態下的表現：

點擊放大

模型解析：?

點擊放大

HTML片段：

點擊放大

ii、 底部導航（從略）

c)內容

i、 貫穿版式：在個別頁面，會出現沒有左右布局的全頁面橫向貫穿版式，這時頁面結構內只有Content，沒有Main或者Side，此時盒狀模型全部直接堆積在Content內。另外，除了全站首頁以外的所有公共頁面都是特制并保持風格統一的貫穿版式。

ii、 左右側欄：最常見的布局，存在于絕大部分頁面。最主要應用在內頁管理區域，首頁也有用到。

iii、 混合版式：只有視頻播放頁面用到。

B、 盒狀（box）模型結構 盒裝模型是建立在頁面布局的基礎上，承載內容和數據的最直接頁面基礎結構，主要分為容器、標題、內容、底部三個部分。 一個典型的盒裝模型效果分為側欄效果和主欄效果兩種風格，統一的HTML結構，通過CSS來控制樣式上顯示的不同，這一部分在樣式層主要討論。 在首頁以及少量特殊頁面上，會有額外的風格，但是依然以盒狀模型為基礎。 點擊放大 解析如下： HTML片段如下： C、包裝（pack）模型 對于站內存在的視頻、豆單、播客、小組、話題討論等等，都有既定的統一表現風格，因此在盒裝模型以外，單獨設立了面向這些常用內容的模型結構，因為是打包處理，所以稱之為包裝模型。 包裝模型基本風格一致，但是在各處的顯示略有不同，同時還會涉及在個人主頁上自定義樣式等，是需要符合全站出處可用的封裝模型。 常見的有： 點擊放大 包裝模型最重要的變化來自于樣式層的處理，其結構本身很簡單，就不做解析了，以下是一個視頻包的HTML片段范例：

3.樣式層（Style）

1、全局、模塊和頁面級

a）土豆網的所有頁面都應用了全局樣式global.css（簡寫為_g.css），位于“/skin/g/_g.css”；該樣式文件包含了包括主要布局、導航條、盒狀模型、包裝模型以及常用工具類；
b）所有位于一級導航以及類似風格的頁面使用的是公眾樣式，位于“/skin/public/v.css”；所有內頁管理使用的是內頁樣式，，位于“/skin/my/v.css”；
c）所有獨立頁面使用自己獨有的樣式文件，命名以頁面功能或所在模塊為基準；
d）頁面樣式的基本原則是：如果某一特定頁面樣式的代碼超過整個文件的1/3，會被獨立成為單個的樣式文件。否則，通常會合并在其頁面所在的模塊中；
c）特別少量的樣式，可以寫在頁面HEAH區域，或者寫在HTML，并沒有特別苛刻的要求，這是出于對當前項目效率的考量。

舉一些例子：
-首頁
/skin/g/_g.css（全局風格）
/skin/public/index.css（公眾區域的首頁風格）

-視頻首頁
/skin/g/_g.css（全局風格）
/skin/public/v.css（公眾區域的模塊風格）

-我的視頻
/skin/g/_g.css（全局風格）
/skin/my/v.css（內頁管理界面模塊風格）
/skin/my/clips.css（我的視頻頁面級風格）
/skin/playlist/append.css（分享視頻的Toolkit封裝）

-視頻播放頁面
/skin/video/v.css（重點獨立頁面，特殊優化，合并了_g.css等樣式）

2、抽象與實例、繼承和重載

a）全站級別的繼承和重載機制；

因為涉及全局的樣式都被封裝在Global.css里，如果在模塊級或者頁面級需要對該樣式加以調整，辦法是重寫相關的類；
以下示例清晰地展示了一個視頻包（Pack）在類的繼承和重載的情況：

* 是一個全局樣式，規定了所有邊距的重置；

.pack 是一個抽象的包封裝，該類記錄了所有包的共性，其代碼如下。空的類可能會在一些生僻的瀏覽器上造成意外的問題，但是通常不會，這里書寫空類是為了保證在邏輯上的可閱讀性。

.pack { float:left; }
??? .pack ul {}
??? .pack li {list-style:none;}
??? .pack b { font-weight:normal;color:#686868;font-size:11px;font-family:Arial; }

在.pack下，書寫了所有包裝模型的實力類：.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;
}

以上類的抽象和繼承主要體現在對各自私有部分的派生。以實現代碼的精簡和復用性。
在一個HTML片段中，調用的方法是：首先應用抽象類或者父類，然后應用實力類或者子類，例如：

<div class="pack pack_user director"></div>

在這個例子中，director代表豆角，這個類可能書寫在某個模塊中，也可能在頁面級的樣式中，對前面的類進一步重寫和修正；
修正的時候只需要書寫需要被修改或者重置的語句就可以了。

在上面的示例中，因為頁面的需要，模塊級別的/skin/public/v.css重寫了pack_clip的寬度：

#programpage .pack_clip{width:167px;}

當父類和抽象類被修改的時候，全站的所有Pack模型都會被修正，但是不影響到子類所做出的私有派生或者復寫，也就不會影響某一個特殊頁面的獨立樣式；
關于類、抽象和繼承的方法很多，考慮到命名方法和選擇符，會有大量不同的處理風格。然而最主要的思想都在各種面向對象的編程書籍中有詳細的技巧和說明，這里就不復述了。

在土豆網的樣式中，大量應用了類似的辦法和技巧來處理可維護、可擴展和可復用性。

TIPS：

?前端開發眼下最好的開發工具是Firebug，很好，很強大；

樣式命名很重要，優先考慮以類（class）為基礎，輕易不使用標識（ID），標識（ID）通常用于頁面級樣式所需要的元素，乃至一個細節上最終端的元素；

元素選擇符也很重要，“.pack_clip ul li a img {}”有著很高的優先權，要慎用；

以上兩點歸納起來說就是：盡量降低各種命名和選擇符的優先權，越是全局和抽象優先權應該最低，在一個特定的微觀元素部分，可以放心使用高優先權來復寫；當出現三層甚至五層的集成和復寫的時候，這就會顯得相當重要，如果不能很好地重寫，輕易不要使用important，而是想辦法重構父類（的命名和選擇符）；

為了處理可擴展性，會稍微增加HTML結構的冗余性，然而從整體上來看，是值得的；

最終管理、處置和使用這些架構的是人。

4. 行為層（Behavior）

? 裝B遭雷劈，劈我吧!

總結

以上是生活随笔為你收集整理的土豆网前端概况的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。