前端工程师-前端开发规则网站实例

前端工程师-前端开发规则网站实例

ID:22399766

大小:17.28 KB

页数:6页

时间:2018-10-29

前端工程师-前端开发规则网站实例_第1页
前端工程师-前端开发规则网站实例_第2页
前端工程师-前端开发规则网站实例_第3页
前端工程师-前端开发规则网站实例_第4页
前端工程师-前端开发规则网站实例_第5页
资源描述:

《前端工程师-前端开发规则网站实例》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、一、分工和流程在土豆网,以项目开发为核心,谁都可以带项目,担任项目经理。一个典型的土豆网项目中,当进入正式开发阶段,通常参与者包括:1名设计师,1-2名前端工程师,1到多名后台工程师,1-2名系统运维管理员。其中,前三者的工作都是可以并发的,最终整合通常是前段工程师,对于复杂度较低的页面处理,一般工程师也可以直接参与。不管是设计师、前端和后台工程师,对于分离的领会和理解都非常重要,并且导致配合上,不同理解层次的人会产生不同的配合效果。其中,设计师和前端工程师的配合无疑是最重要的,设计师的风格直接导致前端页面结构的

2、简洁或者复杂,程序逻辑的简洁或者复杂。一个卓越于设计并且理解W3C网页标准的设计师是珍稀而罕见的。二、基本架构(Architecture)基本架构()架构的目标:可扩展性、可维护性、可复用性1.内容(Infomation/Content)内容()土豆网的内容结构,从模块来说,如中心橙色圈所区分出的九个大块:2.结构层(结构层(Structure))A、页面(Page)结构、页面()a)概览一个典型左右版式的页面样式:土豆网的所有页面都基于这个页面模型,分别是:上下导航、内容,内容分为贯穿版式或者左右版式。在左右区

3、域中分别由盒状模型担任最终内容的承载结构。解析如下:HTML片段:点击放大从其功用来说,则分为三个层次:点击放大这些特性决定了后面所有前端架构的基调。b)导航i、顶部导航土豆网导航分为三种,常规导航、黑色小黑边导航,以及视频播放页面的专用导航。这三种导航使用的HTML是基本一致的,通过CSS来控制不同状态下的表现:点击放大模型解析:点击放大HTML片段:点击放大ii、底部导航(从略)c)内容内容i、贯穿版式:在个别页面,会出现没有左右布局的全页面横向贯穿版式,这时页面结构内只有Content,没有Main或者Si

4、de,此时盒状模型全部直接堆积在Content内。另外,除了全站首页以外的所有公共页面都是特制并保持风格统一的贯穿版式。ii、左右侧栏:最常见的布局,存在于绝大部分页面。最主要应用在内页管理区域,首页也有用到。iii、混合版式:只有视频播放页面用到。B、盒状(box)模型结构、盒状()盒装模型是建立在页面布局的基础上,承载内容和数据的最直接页面基础结构,主要分为容器、标题、内容、底部三个部分。一个典型的盒装模型效果分为侧栏效果和主栏效果两种风格,统一的HTML结构,通过CSS来控制样式上显示的不同,这一部分在样式

5、层主要讨论。在首页以及少量特殊页面上,会有额外的风格,但是依然以盒状模型为基础。点击放大解析如下:HTML片段如下:C、包装(pack)模型、包装()对于站内存在的视频、豆单、播客、小组、话题讨论等等,都有既定的统一表现风格,因此在盒装模型以外,单独设立了面向这些常用内容的模型结构,因为是打包处理,所以称之为包装模型。包装模型基本风格一致,但是在各处的显示略有不同,同时还会涉及在个人主页上自定义样式等,是需要符合全站出处可用的封装模型。常见的有:点击放大包装模型最重要的变化来自于样式层的处理,其结构本身很简单,就

6、不做解析了,以下是一个视频包的HTML片段范例:3.样式层(Style)样式层()样式层1、全局、模块和页面级、全局、a)土豆网的所有页面都应用了全局样式global.css(简写为_g.css),位于“/skin/g/_g.css”;该样式文件包含了包括主要布局、导航条、盒状模型、包装模型以及常用工具类;b)所有位于一级导航以及类似风格的页面使用的是公众样式,位于“/skin/public/v.css”;所有内页管理使用的是内页样式,,位于“/skin/my/v.css”;c)所有独立页面使用自己独有的样式文件

7、,命名以页面功能或所在模块为基准;d)页面样式的基本原则是:如果某一特定页面样式的代码超过整个文件的1/3,会被独立成为单个的样式文件。否则,通常会合并在其页面所在的模块中;c)特别少量的样式,可以写在页面HEAH区域,或者写在HTML,并没有特别苛刻的要求,这是出于对当前项目效率的考量。举一些例子:-首页/skin/g/_g.css(全局风格)/skin/public/index.css(公众区域的首页风格)-视频首页/skin/g/_g.css(全局风格)/skin/public/v.css(公众区域的模块风

8、格)-我的视频/skin/g/_g.css(全局风格)/skin/my/v.css(内页管理界面模块风格)/skin/my/clips.css(我的视频页面级风格)/skin/playlist/append.css(分享视频的Toolkit封装)-视频播放页面/skin/video/v.css(重点独立页面,特殊优化,合并了_g.css等样式)2、抽象与实例、继承和重载、

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。