前端架构规范.

Allyes网建架构规范目录1页面结构41.1综合页面51.2列表页面61.4内容页面72结构代码82.1页首代码92.2布局代码92.3内容模块代码103样式代码113.1全局样式123.2模块样式123.3布局样式123.4其它通用样式124行为脚本代码134.1框架144.2全局代码144.3页面插件142页面整体框架，用以定义整个网页背景图案、颜色等2pagewrapper页面内容框架，设置页面内容的显示宽度、内容3headwrapper页首框架，包含Logo、导航、搜索栏、用户信息等4logotitle定义页面标题或Logo5navigatorsbox页面主导航搜索栏等6pagecontent页面主体内容部分7kvbanner页面横幅、推荐内容模块8module页面内容模块9footwrapper页尾框架包含底部导航、版权信息等内容5列表页面灰色线框部分内容同综合页面其它内容包括：1siderbar边栏，提供相关信息及功能的列表2sidemodule边栏模块3content页面主体内容4contentlist内容列表6代码布局、命名方式等8页首代码页首代码包括页面最上端的文档声明、head标签中的代码。文档声明至于页面最上端，在html标签之上。通常使用的文档声明类型为HTML4.01Transitional、HTML4.01Strict、XHTML1.0Transitional、XHTML1.0Strict、XHTML1.1、HTML5等。页面外部载入的样式代码和行为脚本需要在head标签中定义。head标签中另外需要定义页面字符集、页面title，互联网公开浏览的页面需要定义keywords、description等页面SEO信息。9布局代码布局代码用于定义页面的显示框架，固定页面模块的位置等。布局代码通常定义唯一的ID，通常的命名方式为：wrapper:页面主框；page-wrapper:页面定位框架；head-wrapper:页首框架；page-content:页面主体内容框架；side-wrapper:页面边栏框架；content-wrapper:页面正文框架；foot-wrapper:页脚框架；side-col1:边栏第一行模块外框；side-last:边栏底部模块外框；col1-3:页面主体第一行第三个模块外框；side-newslist:边栏新闻列表等。结构代码210内容模块代码内容模块代码用于包含页面图文内容等，根据其功能定义Class属性，如：main-navigator:页面主导航模块；side-module:边栏内容模块；module-w200:宽度200的页面内容模块等。模块中不同的页面内容需要使用不同的标签来表示，标签使用方式为：div:显示模块，用于定义页面布局框架，包装模块内容等；h1:站点标题，站点Logo；h2:页面标题，页面主内容标题；h3~h6:模块标题；em:斜体文本；strong:加粗文本；p:文字段落；blockquote:引用缩进图文内容；dl:定义列表；dt:定义列表标题；dd:定义列表内容；ol:排序列表；ul:无排序列表；li:列表项；form:页面表单；fieldset:表单项组；legend:表单项组标签；label:表单项标签等。样式代码3定义网站页面的框架布局、内容模块样式等的CSS代码11全局样式全局样式，主要用于定义网站标签的默认样式，包括预置部分标签的字体、字体颜色、背景色、边框、边距等。主要目的是使各个标签的基本样式在各个浏览器下显示效果相同。3.2模块样式定义页面各个内容模块中各部分的字体、字体大小、颜色等，以及模块的背景、背景图案等。模块样式代码命名对应页面中各个模块的class。样式代码规范主要遵循CSS2规范，少量使用CSS3新增代码。为保持各个浏览器兼容，少量使用各浏览器的专有代码。3.3布局样式定义页面各个布局框架的位置、大小等，代码命名对应页面中各个模块框架的id。3.4其它通用样式通用的辅助样式，如设置部分字体颜色、大小，部分区域的背景色，部分图文的排列方式，部分模块内容的宽高等，定义为class，代码命名对应该样式所应用的效果，如.w100表示宽度100，.red定义为红色字体，.alert定义为警告信息样式。行为脚本代码4页面的JS脚本代码13脚本框架使用常用的开源框架，如prototype、jquery等。4.2全局代码设置页面的一些基本信息，全局的页面交互代码等，命名为object:ALLYES。脚本代码编写格式遵循ECMA-262规范，编写时避免使用各浏览器不兼容的方式4.3页面插件各种开源的JS插件，尽量使用各种功能稳定，可扩展性优秀的插件，便于修改。插件使用时写上相关的注视代码。4.4后台交互各种表单验证代码、服务器端Ajax交互等代码，用于增强页面安全性等。目录结构及文件命名5网站内容目录放置结构及文件命名规范15目录结构站点通常使用如下的目录结构：/assets/放置各类站点统一调用的文件，包括CSS样式表文件、JS脚本文件、CSS调用的背景图文件等；/assets/styles/放置各个CSS样式表文件；/assets/images/放置CSS样式调用的图像文件；/assets/javascripts/放置JS文件；/assets/components/放置页面调用的综合性组件（包含JS、图像、CSS等，如部分日历控件）；页面直接调用的图像文件和其他媒体文件，放置位置如下：/images/放置页面直接调用的图像文件；/media/放置各类媒体文件；/media/swf/放置页面调用的Flash文件；/media/audio/放置各类音频文件；/media/video/放置各类视频文件；5.2网页文件网页文件通常根据页面的实际内容或者功能来命名。目录结构及文件命名517调用的图像文件根据其所涉及的功能添加前缀：bg_表示一般模块或框架的背景图；btn_表示用于按钮的图像；listimg_表示用于列表标记的图像；avatar_表示用于头像显示的图像；nav_表示用导航显示的图像等。5.4样式表文件样式表文件根据其用途命名：resets.css或rewrites.css标签重写，定义站点的基本字体、字色、字体大小、页面背景色等，设定各个标签的基本样式，使各个标签的默认外观在各个浏览器中相同；styles.css或common.css通用样式，预置各种通用的样式，如字体颜色、宽高、大小、按钮样式等；constructions.css或grid.css站点页面通用布局框架的布局样式代码，定义站点页面通用部分的布局，如页首、页脚、导航等模块的位置大小等；modules.css模块样式，定义站点各个通用模块的细节样式等。5.5脚本代码文件根据代码的功能命名，站点通用信息和行为的相关脚本代码放置于common.js中。