前端架构规范

1、Allyes网建架构规范目录1页面结构1.1综合页面1.2列表页面1.4内容页面2结构代码2.1页首代码2.2布局代码2.3内容模块代码3样式代码3.1全局样式3.2模块样式3.3布局样式3.4其它通用样式4行为脚本代码4.1框架4.2全局代码4.3页面插件2456789910111212121213141414目录4.4 服务器交互5目录结构及文件命名5.1 目录编排结构5.2 网页文件5.3 图像文件5.4 样式表文件脚本代码文件214151616171717页面结构页面基本布局结构www.tim-edu.c n4页面结构1.1综合页面2 pagewrapper1 wrapper1 wra

2、pper页面整体框架，用以定义整个网页背景 一J 图案、颜色等2 pagewrapper6 pagecor页面内容框架，设置页面内容的显示宽度、内容7 kvbanner3 headwrapper页首框架,包含Log。、导航、搜索栏、 用户信息等4 logo title定义页面标题或Logo5 navigator sbox 页面主导航搜索栏等9 footwrapper6 pageco ntent 页面主体内容部分7 kvbanner页面横幅、推荐内容模块8 module页面内容模块9 footwrapper页尾框架包含底部导航、版权信息等 内容3 headwrapper 4 logo title

3、 5 navigator sboxwww.tim-edu.c n页面结构1.2列表页面1 sidebar灰色线框部分内容同综合页面其它内容包括:2 sidemodule1 siderbar边栏，提供相关信息及功能的列表2 sidemodule边栏脱3 content页面主体内容4 contentlist内容列表www.tim-edu.c n页面结构www.tim-edu.c n页面结构4 contentlistwww.tim-edu.c n页面结构3 contentwww.tim-edu.c n页面结构1.3内容页面灰色线框部分内容同内容页面页面主要内容为archived盼页面正文archiv

4、ewww.tim-edu.c n结构代码2页面HTML代码布局、命名方式等结构代码2.1页首代码页首代码包括页面最上端的文档声明、vhead标签中的代码。文档声明至于页面最上端，在vhtml标签之上。通常使用的文档声明类型为HTML4.01 Transitional. HTML4.01 Strict. XHTML1.0 Transitional. XHTML1.0 Strict. XHTML1.1、HTML5等。页面外部载入的样式代码和行为脚本需要在vhead标签中定义。head标签中另夕卜需要定义页面字符集、页面 title z互联网公开浏览的页面需要定义keywords, descript

5、ion等页面SEO信息。2.2布局代码布局代码用于定义页面的显示框架,固定页面模块的位置等。 布局代码通常定义唯一的ID ,通常的命名方式为： wrapper:页面主框;page-wrapper:页面定位框架;head-wrapper:页首框架； page-content:页面主袜内容框架； side-wrapper:页面边栏框架; content-wrapper:页面正文框架;foot-wrapper:页丽框架；side-coll:边栏第一行模块外框； side-last:边栏底部模块外框;coll-3:页面主体第一行第三个模块外框； side-newslist:边栏新闻列表等。结构代码2.

6、3内容模块代码内容模块代码用于包含页面图文内容等，根据其功能定义Class属性，如： main-navigator:页面主导航模块；side-module:边栏内容模块;module-w200:宽度200的页面内容模块等。模块中不同的页面内容需要使用不同的标签来表示,标签使用方式为：<div>:显示谡块，用于定义页面布局框架，包装模块内容等；<h1>:站点标题,站点Logo ;<h2>:页面标题z页面主内容标题；vh3>vh6>:模块标题；<em>:斜体文本；<strong>:力哩文本；<p>:文字段落；<

7、;blockquote>:引用缩迸图文内容；<dl>:定义列表；<dt>:定义列表标题；<dd>:定义列表内容；<ol>:排序列表；<ul>:无排序列表；<li>：列表项;<form>:页面表单;<fieldset>:表单项组;<legend>:妾单项组标签;<label>:表单项标签等。www.tim-edu.c n9样式代码I 3定义网站页面的框架布局、内容模块样式等的 CSS代码样式代码样式代码规范主要遵循CSS2规范,少量使用CSS3新增代码。为保持各个浏览器兼

8、容，少量使用各浏览器的专有代 码。3.1全局样式全局样式，主要用于定义网站标签的默认样式,包括预置部分标签的字体、字体颜色、背景色、边框、边距等。主 要目的是使各个标签的基本样式在各个浏览器下显示效果相同。3.2模块样式定义页面各个内容模块中各部分的字体、字体大小、颜色等，以及模块的背景、背景图案等。模块样式代码命名对 应页面中各个模块的class。3.3布局样式定义页面各个布局框架的位置、大小等，代码命名对应页面中各个模块框架的id。3.4其它通用样式通用的辅助样式,如设置部分字体颜色、大小,部分区域的背景色,部分图文的排列方式,部分模块内容的宽高等, 定义为class ,代码命名对应该样式

9、所应用的效果，如,w100表示宽度100 , .red定义为红色字体,.alert定义为警www.tim-edu.c n11行为脚本代码4页面的JS脚本代码行为脚本代码脚本代码编写格式遵循ECMA-262规范，编写时避免使用各浏览器不兼容的方式4.1框架JS脚本框架使用常用的开源框架，女口prototype、jquery等。4.2全局代码设置页面的一些基本信息，全局的页面交互代码等，命名为object: ALLYES.4.3页面插件各种开源的JS插件，尽量使用各种功能稳定,可扩展性优秀的插件，便于修改。插件使用时写上相关的汪视代码。4.4后台交互各种表单验证代码、服务器端Ajax交互等代码,用

10、于增强页面安全性等。www.tim-edu.c n13目录结构及文件命名I 5网站内容目录放置结构及文件命名规范目录结构及文件命名5.1目录结构站点通常使用如下的目录结构:/assets/放置各类站点统一调用的文件,包括css样式表文件、JS脚本文件、CSS调用的背景图 文件等；/assets/styles/ /assets/images/ /assets/javascripts/ /assets/comp on ents/放置各个CSS样式表文件；放置CSS样式调用的图像文件；放置JS文件；放置页面调用的综合性组件（包含JS、图像、CSS等，如部分日历控件）；页面直接调用的图像文件和其他媒体

11、文件,放置位置如下:/images/media/ /media/swf/ /media/audio/ /media/video/放置页面直接调用的图像文件； 放置各类媒体文件；放置页面调用的Flash文件；放置各类音频文件；放置各类视频文件；5.2网页文件网页文件通常根据页面的实际内容或者功能来命名。目录结构及文件命名5.3图像文件CSS调用的图像文彳聊艮据其所涉及的功能添加前缀: bg_表示一般模块或框架的背景图；btn_表示用于按钮的图像；listimg_表示用于列表标记的图像； avatar_表示用于头像显示的图像； nav_表示用导航显彷的图像等。5.4样式表文件样式表文件根据其用途命名：resets.css或rewrites.css标签重写,定义站点的基本字体、字色、字体大小、页面背景色等，设定各个标签的基本 样式,使各个标签的默认外观在各个浏览器中相同；styles.css或common.css通用样式,预置各种通用的样式，如字体颜色、宽高、大小、按钮