土豆网(tudou.com)前端概况

【 tulaoshi.com - Web开发 】

一、分工和流程

在土豆网，以项目开发为核心，谁都可以带项目，担任项目经理。
一个典型的土豆网项目中，当进入正式开发阶段，通常参与者包括：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来控制样式上显示的不同，这一部分在样式层主要讨论。
在首页以及少量特殊页面上，会有额外的风格，但是依然以盒状模型为基础。

在上面的示例中，因为页面的需要，模块级别的/skin/public/v.css重写了pack_clip的宽度：

#programpage .pack_clip{width:167px;}

当父类和抽象类被修改的时候，全站的所有Pack模型都会被修正，但是不影响到子类所做出的私有派生或者复写，也就不会影响某一个特殊页面的独立样式；
关于类、抽象和继承的方法很多，考虑到命名方法和选择符，会有大量不同的处理风格。然而最主要的思想都在各种面向对象的编程书籍中有详细的技巧和说明，这里就不复述了。

在土豆网的样式中，大量应用了类似的办法和技巧来处理可维护、可扩展和可复用性。

TIPS：

4. 行为层（Behavior）

待续