土豆網(wǎng)(tudou.com)前端概況
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:58:47 作者:佚名
我要評(píng)論

一、分工和流程
在土豆網(wǎng),以項(xiàng)目開發(fā)為核心,誰(shuí)都可以帶項(xiàng)目,擔(dān)任項(xiàng)目經(jīng)理。
一個(gè)典型的土豆網(wǎng)項(xiàng)目中,當(dāng)進(jìn)入正式開發(fā)階段,通常參與者包括:1名設(shè)計(jì)師,1-2名前端工程師,1到多名后臺(tái)工程師,1-2名系統(tǒng)運(yùn)維管理員。
其中,前三者的工作都是可以并發(fā)的,最終整合通常是
一、分工和流程
在土豆網(wǎng),以項(xiàng)目開發(fā)為核心,誰(shuí)都可以帶項(xiàng)目,擔(dān)任項(xiàng)目經(jīng)理。
一個(gè)典型的土豆網(wǎng)項(xiàng)目中,當(dāng)進(jìn)入正式開發(fā)階段,通常參與者包括:1名設(shè)計(jì)師,1-2名前端工程師,1到多名后臺(tái)工程師,1-2名系統(tǒng)運(yùn)維管理員。
其中,前三者的工作都是可以并發(fā)的,最終整合通常是前段工程師,對(duì)于復(fù)雜度較低的頁(yè)面處理,一般工程師也可以直接參與。
不管是設(shè)計(jì)師、前端和后臺(tái)工程師,對(duì)于分離的領(lǐng)會(huì)和理解都非常重要,并且導(dǎo)致配合上,不同理解層次的人會(huì)產(chǎn)生不同的配合效果。
其中,設(shè)計(jì)師和前端工程師的配合無(wú)疑是最重要的,設(shè)計(jì)師的風(fēng)格直接導(dǎo)致前端頁(yè)面結(jié)構(gòu)的簡(jiǎn)潔或者復(fù)雜,程序邏輯的簡(jiǎn)潔或者復(fù)雜。
一個(gè)卓越于設(shè)計(jì)并且理解W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)的設(shè)計(jì)師是珍稀而罕見(jiàn)的。
二、基本架構(gòu)(Architecture)
架構(gòu)的目標(biāo):可擴(kuò)展性、可維護(hù)性、可復(fù)用性
1. 內(nèi)容(Infomation/Content)
土豆網(wǎng)的內(nèi)容結(jié)構(gòu),從模塊來(lái)說(shuō),如中心橙色圈所區(qū)分出的九個(gè)大塊:

從其功用來(lái)說(shuō),則分為三個(gè)層次:

這些特性決定了后面所有前端架構(gòu)的基調(diào)。
#p#
2. 結(jié)構(gòu)層(Structure)
A、 頁(yè)面(Page)結(jié)構(gòu)
a) 概覽
一個(gè)典型左右版式的頁(yè)面樣式:

土豆網(wǎng)的所有頁(yè)面都基于這個(gè)頁(yè)面模型,分別是:上下導(dǎo)航、內(nèi)容,內(nèi)容分為貫穿版式或者左右版式。
在左右區(qū)域中分別由盒狀模型擔(dān)任最終內(nèi)容的承載結(jié)構(gòu)。
解析如下:

HTML片段:

#p#
b) 導(dǎo)航
i、 頂部導(dǎo)航
土豆網(wǎng)導(dǎo)航分為三種,常規(guī)導(dǎo)航、黑色小黑邊導(dǎo)航,以及視頻播放頁(yè)面的專用導(dǎo)航。
這三種導(dǎo)航使用的HTML是基本一致的,通過(guò)CSS來(lái)控制不同狀態(tài)下的表現(xiàn):

模型解析:

HTML片段:

ii、 底部導(dǎo)航(從略)
c)內(nèi)容
i、 貫穿版式:在個(gè)別頁(yè)面,會(huì)出現(xiàn)沒(méi)有左右布局的全頁(yè)面橫向貫穿版式,這時(shí)頁(yè)面結(jié)構(gòu)內(nèi)只有Content,沒(méi)有Main或者Side,此時(shí)盒狀模型全部直接堆積在Content內(nèi)。另外,除了全站首頁(yè)以外的所有公共頁(yè)面都是特制并保持風(fēng)格統(tǒng)一的貫穿版式。
ii、 左右側(cè)欄:最常見(jiàn)的布局,存在于絕大部分頁(yè)面。最主要應(yīng)用在內(nèi)頁(yè)管理區(qū)域,首頁(yè)也有用到。
iii、 混合版式:只有視頻播放頁(yè)面用到。
#p#
B、 盒狀(box)模型結(jié)構(gòu)
盒裝模型是建立在頁(yè)面布局的基礎(chǔ)上,承載內(nèi)容和數(shù)據(jù)的最直接頁(yè)面基礎(chǔ)結(jié)構(gòu),主要分為容器、標(biāo)題、內(nèi)容、底部三個(gè)部分。
一個(gè)典型的盒裝模型效果分為側(cè)欄效果和主欄效果兩種風(fēng)格,統(tǒng)一的HTML結(jié)構(gòu),通過(guò)CSS來(lái)控制樣式上顯示的不同,這一部分在樣式層主要討論。
在首頁(yè)以及少量特殊頁(yè)面上,會(huì)有額外的風(fēng)格,但是依然以盒狀模型為基礎(chǔ)。

解析如下:

HTML片段如下:

C、包裝(pack)模型
對(duì)于站內(nèi)存在的視頻、豆單、播客、小組、話題討論等等,都有既定的統(tǒng)一表現(xiàn)風(fēng)格,因此在盒裝模型以外,單獨(dú)設(shè)立了面向這些常用內(nèi)容的模型結(jié)構(gòu),因?yàn)槭谴虬幚?,所以稱之為包裝模型。
包裝模型基本風(fēng)格一致,但是在各處的顯示略有不同,同時(shí)還會(huì)涉及在個(gè)人主頁(yè)上自定義樣式等,是需要符合全站出處可用的封裝模型。
常見(jiàn)的有:

包裝模型最重要的變化來(lái)自于樣式層的處理,其結(jié)構(gòu)本身很簡(jiǎn)單,就不做解析了,以下是一個(gè)視頻包的HTML片段范例:

#p#
3.樣式層(Style)
1、全局、模塊和頁(yè)面級(jí)
a)土豆網(wǎng)的所有頁(yè)面都應(yīng)用了全局樣式global.css(簡(jiǎn)寫為_g.css),位于“/skin/g/_g.css”;該樣式文件包含了包括主要布局、導(dǎo)航條、盒狀模型、包裝模型以及常用工具類;
b)所有位于一級(jí)導(dǎo)航以及類似風(fēng)格的頁(yè)面使用的是公眾樣式,位于“/skin/public/v.css”;所有內(nèi)頁(yè)管理使用的是內(nèi)頁(yè)樣式,,位于“/skin/my/v.css”;
c)所有獨(dú)立頁(yè)面使用自己獨(dú)有的樣式文件,命名以頁(yè)面功能或所在模塊為基準(zhǔn);
d)頁(yè)面樣式的基本原則是:如果某一特定頁(yè)面樣式的代碼超過(guò)整個(gè)文件的1/3,會(huì)被獨(dú)立成為單個(gè)的樣式文件。否則,通常會(huì)合并在其頁(yè)面所在的模塊中;
c)特別少量的樣式,可以寫在頁(yè)面HEAH區(qū)域,或者寫在HTML,并沒(méi)有特別苛刻的要求,這是出于對(duì)當(dāng)前項(xiàng)目效率的考量。
舉一些例子:
-首頁(yè)
/skin/g/_g.css(全局風(fēng)格)
/skin/public/index.css(公眾區(qū)域的首頁(yè)風(fēng)格)
-視頻首頁(yè)
/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)頁(yè)管理界面模塊風(fēng)格)
/skin/my/clips.css(我的視頻頁(yè)面級(jí)風(fēng)格)
/skin/playlist/append.css(分享視頻的Toolkit封裝)
-視頻播放頁(yè)面
/skin/video/v.css(重點(diǎn)獨(dú)立頁(yè)面,特殊優(yōu)化,合并了_g.css等樣式)
2、抽象與實(shí)例、繼承和重載
a)全站級(jí)別的繼承和重載機(jī)制;
因?yàn)樯婕叭值臉邮蕉急环庋b在Global.css里,如果在模塊級(jí)或者頁(yè)面級(jí)需要對(duì)該樣式加以調(diào)整,辦法是重寫相關(guān)的類;
以下示例清晰地展示了一個(gè)視頻包(Pack)在類的繼承和重載的情況:

* 是一個(gè)全局樣式,規(guī)定了所有邊距的重置;
.pack 是一個(gè)抽象的包封裝,該類記錄了所有包的共性,其代碼如下??盏念惪赡軙?huì)在一些生僻的瀏覽器上造成意外的問(wèn)題,但是通常不會(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)在對(duì)各自私有部分的派生。以實(shí)現(xiàn)代碼的精簡(jiǎn)和復(fù)用性。
在一個(gè)HTML片段中,調(diào)用的方法是:首先應(yīng)用抽象類或者父類,然后應(yīng)用實(shí)力類或者子類,例如:
<div class="pack pack_user director"></div>
在這個(gè)例子中,director代表豆角,這個(gè)類可能書寫在某個(gè)模塊中,也可能在頁(yè)面級(jí)的樣式中,對(duì)前面的類進(jìn)一步重寫和修正;
修正的時(shí)候只需要書寫需要被修改或者重置的語(yǔ)句就可以了。
在上面的示例中,因?yàn)轫?yè)面的需要,模塊級(jí)別的/skin/public/v.css重寫了pack_clip的寬度:
#programpage .pack_clip{width:167px;}
當(dāng)父類和抽象類被修改的時(shí)候,全站的所有Pack模型都會(huì)被修正,但是不影響到子類所做出的私有派生或者復(fù)寫,也就不會(huì)影響某一個(gè)特殊頁(yè)面的獨(dú)立樣式;
關(guān)于類、抽象和繼承的方法很多,考慮到命名方法和選擇符,會(huì)有大量不同的處理風(fēng)格。然而最主要的思想都在各種面向?qū)ο蟮木幊虝杏性敿?xì)的技巧和說(shuō)明,這里就不復(fù)述了。
在土豆網(wǎng)的樣式中,大量應(yīng)用了類似的辦法和技巧來(lái)處理可維護(hù)、可擴(kuò)展和可復(fù)用性。
TIPS:
-
前端開發(fā)眼下最好的開發(fā)工具是Firebug,很好,很強(qiáng)大;
樣式命名很重要,優(yōu)先考慮以類(class)為基礎(chǔ),輕易不使用標(biāo)識(shí)(ID),標(biāo)識(shí)(ID)通常用于頁(yè)面級(jí)樣式所需要的元素,乃至一個(gè)細(xì)節(jié)上最終端的元素;
元素選擇符也很重要,“.pack_clip ul li a img {}”有著很高的優(yōu)先權(quán),要慎用;
以上兩點(diǎn)歸納起來(lái)說(shuō)就是:盡量降低各種命名和選擇符的優(yōu)先權(quán),越是全局和抽象優(yōu)先權(quán)應(yīng)該最低,在一個(gè)特定的微觀元素部分,可以放心使用高優(yōu)先權(quán)來(lái)復(fù)寫;當(dāng)出現(xiàn)三層甚至五層的集成和復(fù)寫的時(shí)候,這就會(huì)顯得相當(dāng)重要,如果不能很好地重寫,輕易不要使用important,而是想辦法重構(gòu)父類(的命名和選擇符);
為了處理可擴(kuò)展性,會(huì)稍微增加HTML結(jié)構(gòu)的冗余性,然而從整體上來(lái)看,是值得的;
最終管理、處置和使用這些架構(gòu)的是人。
4. 行為層(Behavior)
待續(xù)
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國(guó)外的一些網(wǎng)站)
今天的文章,我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習(xí),希望對(duì)你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長(zhǎng)度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁(yè)前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位,一般用于pc端網(wǎng)頁(yè)開發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸,是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點(diǎn),選擇適合的壓縮工具為將來(lái)做項(xiàng)目開發(fā)使用是一件很重要的事情!!在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21html,css,javascript是怎樣變成頁(yè)面的
瀏覽器是多進(jìn)程的,有瀏覽器主進(jìn)程,網(wǎng)絡(luò)進(jìn)程,渲染進(jìn)程,插件進(jìn)程等,在將html,css,javascript解析成一個(gè)頁(yè)面的時(shí)候,就需要多個(gè)進(jìn)程的分工合作2023-05-01- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁(yè)中使用Unicode字符的介紹(&#,\u等)
國(guó)際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語(yǔ)言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-12-02告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-27