土豆网前端概况

一、分工和流程

在土豆网&＃xff0c;以项目开发为核心&＃xff0c;谁都可以带项目&＃xff0c;担任项目经理。
一个典型的土豆网项目中&＃xff0c;当进入正式开发阶段&＃xff0c;通常参与者包括&＃xff1a;1名设计 师&＃xff0c;1-2名前端工程师&＃xff0c;1到多名后台工程师&＃xff0c;1-2名系统运维管理员。
其中&＃xff0c;前三者的工作都是可以并发的&＃xff0c;最终整合通常是前段工程师&＃xff0c;对于复杂 度较低的页面处理&＃xff0c;一般工程师也可以直接参与。

不管是设计师、前端和后台工程师&＃xff0c;对于分离的领会和理解都非常重要&＃xff0c;并且导致配合上&＃xff0c;不同理解层次的人会产生不同的配合效果。
其中&＃xff0c;设计师 和前端工程师的配合无疑是最重要的&＃xff0c;设计师的风格直接导致前端页面结构的简洁或者复杂&＃xff0c;程序逻辑的简洁或者复杂。
一个卓越于设计并且理解W3C网 页标准的设计师是珍稀而罕见的。

二、基本架构&＃xff08;Architecture&＃xff09;

架构的目标&＃xff1a;可扩展性、可维护性、可复用性

1. 内容&＃xff08;Infomation/Content&＃xff09;
土豆网的内容结构&＃xff0c;从模块来说&＃xff0c;如中心橙色圈所区 分出的九个大块&＃xff1a;

从其功用来说&＃xff0c;则分为三个层次&＃xff1a;

这些特性决定了后面所有前端架构的基调。

2.      结构层&＃xff08;Structure&＃xff09;

A、 页面&＃xff08;Page&＃xff09;结构

a) 概览
一个典型左右版式的页面样式&＃xff1a;

土豆网的所有页面都基于这个页面模型&＃xff0c;分别是&＃xff1a;上下导航、内容&＃xff0c;内容分为贯穿版式或者左右版式。

在左右区域中分别由盒状模型担任最终内容的承载结构。
解析如下&＃xff1a;

HTML片段&＃xff1a;

b)  导航

i、 顶部导航

土豆网导航分为三种&＃xff0c;常规导航、黑色小黑边导航&＃xff0c;以及视频播放页面的专用导航。

这三种导航使用的HTML是基本一致的&＃xff0c;通过CSS来控制不同状态下的表现&＃xff1a;

点击放大

模型解析&＃xff1a; 

HTML片段&＃xff1a;

ii、 底部导航&＃xff08;从略&＃xff09;

c)内容

i、 贯穿版式&＃xff1a;在个别页面&＃xff0c;会出现没有左右布局的全页面横向贯穿版式&＃xff0c;这时页面结构内只有Content&＃xff0c;没有Main或者Side&＃xff0c;此时盒状模型全部直接堆 积在Content内。另外&＃xff0c;除了全站首页以外的所有公共页面都是特制并保持风格统一的贯穿版式。

ii、 左右侧栏&＃xff1a;最常见的布局&＃xff0c;存在于绝大部分页面。最主要应用在内页管理区域&＃xff0c;首页也有用到。

iii、 混合版式&＃xff1a;只有视频播放页面用到。

B、 盒状&＃xff08;box&＃xff09;模型结构
盒装模型是建立在页面布局的基础上&＃xff0c;承载内容和数据的最直接页面基础结 构&＃xff0c;主要分为容器、标题、内容、底部三个部分。
一个典型的盒装模型效果分为侧栏效果和主栏效果两种风格&＃xff0c;统一的HTML结构&＃xff0c;通过CSS来控制样 式上显示的不同&＃xff0c;这一部分在样式层主要讨论。
在首页以及少量特殊页面上&＃xff0c;会有额外的风格&＃xff0c;但是依然以盒状模型为基础。

解析如下&＃xff1a;

HTML片段如下&＃xff1a;

C、包装&＃xff08;pack&＃xff09;模型
对于站内存在的视频、豆单、播客、小组、话题讨论等等&＃xff0c;都有既定的统一表现风 格&＃xff0c;因此在盒装模型以外&＃xff0c;单独设立了面向这些常用内容的模型结构&＃xff0c;因为是打包处理&＃xff0c;所以称之为包装模型。
包装模型基本风格一致&＃xff0c;但是在各处的显示 略有不同&＃xff0c;同时还会涉及在个人主页上自定义样式等&＃xff0c;是需要符合全站出处可用的封装模型。
常见的有&＃xff1a;

包装模型最重要的变化来自于样式层的处理&＃xff0c;其结构本身很简单&＃xff0c;就不做解析了&＃xff0c;以下是一个视频包的HTML片段范例&＃xff1a;

3.样式层&＃xff08;Style&＃xff09;

1、全局、模块和页面级

a&＃xff09;土豆网的所有页面都应用了全局样式global.css&＃xff08;简写为_g.css&＃xff09;&＃xff0c;位于“/skin/g/_g.css”&＃xff1b;该样式文件包含了包括 主要布局、导航条、盒状模型、包装模型以及常用工具类&＃xff1b;
b&＃xff09;所有位于一级导航以及类似风格的页面使用的是公众样式&＃xff0c;位于“/skin /public/v.css”&＃xff1b;所有内页管理使用的是内页样式&＃xff0c;&＃xff0c;位于“/skin/my/v.css”&＃xff1b;
c&＃xff09;所有独立页面使用自己独有的样式文 件&＃xff0c;命名以页面功能或所在模块为基准&＃xff1b;
d&＃xff09;页面样式的基本原则是&＃xff1a;如果某一特定页面样式的代码超过整个文件的1/3&＃xff0c;会被独立成为单个的样式文 件。否则&＃xff0c;通常会合并在其页面所在的模块中&＃xff1b;
c&＃xff09;特别少量的样式&＃xff0c;可以写在页面HEAH区域&＃xff0c;或者写在HTML&＃xff0c;并没有特别苛刻的要求&＃xff0c;这是出于 对当前项目效率的考量。

举一些例子&＃xff1a;
-首页
/skin/g/_g.css&＃xff08;全局风格&＃xff09;
/skin/public/index.css&＃xff08;公众区域的 首页风格&＃xff09;

-视频首页
/skin/g/_g.css&＃xff08;全局风格&＃xff09;
/skin/public/v.css&＃xff08;公众区域的模块风格&＃xff09;

-我的视频
/skin/g/_g.css&＃xff08;全局风格&＃xff09;
/skin/my/v.css&＃xff08;内页管理界面模块风格&＃xff09;
/skin /my/clips.css&＃xff08;我的视频页面级风格&＃xff09;
/skin/playlist/append.css&＃xff08;分享视频的Toolkit封装&＃xff09;

-视频播放页面
/skin/video/v.css&＃xff08;重点独立页面&＃xff0c;特殊优化&＃xff0c;合并了_g.css等样式&＃xff09;

2、抽象与实例、继承和重载

a&＃xff09;全站级别的继承和重载机制&＃xff1b;

因为涉及全局的样式都被封装在Global.css里&＃xff0c;如果在模块级或者页面级需要对该样式加以调整&＃xff0c;办法是重写相关的类&＃xff1b;
以下示例清晰地 展示了一个视频包&＃xff08;Pack&＃xff09;在类的继承和重载的情况&＃xff1a;

* 是一个全局样式&＃xff0c;规定了所有边距的重置&＃xff1b;

.pack 是一个抽象的包封装&＃xff0c;该类记录了所有包的共性&＃xff0c;其代码如下。空的类可能会在一些生僻的浏览器上造成意外的问题&＃xff0c;但是通常不会&＃xff0c;这里书写空类是为了保证在逻 辑上的可阅读性。

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

在.pack下&＃xff0c;书写了所有包装模型的实力类&＃xff1a;.pack_clip, .pack_user, .pack_album, .pack_list&＃xff0c;等等&＃xff1b;
以下是视频包和豆单包的例子&＃xff1a;

.pack_clip {
    padding:12px 10px;
    color:#000;width:126px;
}
.pack_list {
    padding:12px 3px;
    color:#000;width:144px;
}

以上类的抽象和继承主要体现在对各自私有部分的派生。以实现代码的精简和复用性。
在一个HTML片段中&＃xff0c;调用的方法是&＃xff1a;首先应用抽象类或者 父类&＃xff0c;然后应用实力类或者子类&＃xff0c;例如&＃xff1a;

在这个例子中&＃xff0c;director代表豆角&＃xff0c;这个类可能书写在某个模块中&＃xff0c;也可能在页面级的样式中&＃xff0c;对前面的类进一步重写和修正&＃xff1b;
修正的时候 只需要书写需要被修改或者重置的语句就可以了。

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

#programpage .pack_clip{width:167px;}

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

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

TIPS&＃xff1a;

1.  前端开发眼下最好的开发工具是Firebug&＃xff0c;很好&＃xff0c;很强大&＃xff1b;
2. 样式命名很重要&＃xff0c;优先考虑以类&＃xff08;class&＃xff09;为基础&＃xff0c;轻易不使用标识&＃xff08;ID&＃xff09;&＃xff0c;标识&＃xff08;ID&＃xff09;通常用于页面级样式所需要的元素&＃xff0c;乃至一个细节上最终 端的元素&＃xff1b;
3. 元素选择符也很重要&＃xff0c;“.pack_clip ul li a img {}”有着很高的优先权&＃xff0c;要慎用&＃xff1b;
4. 以上两点归纳起来说就是&＃xff1a;尽量降低各种命名和选择符的优先权&＃xff0c;越是全局和抽象优先权应该最低&＃xff0c;在一个特定的微观元素部分&＃xff0c;可以放心使用高优先权来 复写&＃xff1b;当出现三层甚至五层的集成和复写的时候&＃xff0c;这就会显得相当重要&＃xff0c;如果不能很好地重写&＃xff0c;轻易不要使用important&＃xff0c;而是想办法重构父类&＃xff08;的命名和 选择符&＃xff09;&＃xff1b;
5. 为了处理可扩展性&＃xff0c;会稍微增加HTML结构的冗余性&＃xff0c;然而从整体上来看&＃xff0c;是值得的&＃xff1b;
6. 最终管理、处置和使用这些架构的是人。

4. 行为层&＃xff08;Behavior&＃xff09;