文豆Web前端开发规范手册V1.2.docx

资源描述

文豆Web前端规范手册V1.2 文豆Web前端开发规范手册更新记录版本号日期更新内容修订 V1.0 2010-05-01 创建文档宋敏鹏 V1.1 2011-02-01 修改细节宋敏鹏 V1.2 2015-05-28 修改细节宋敏鹏文豆WEB前端开发规范手册 1、规范目的 3 2、基本准则 3 3、文件规范 3 3.1 目录结构 3 3.2 html 文件命名 4 3.3 css 文件命名 4 3.4 js文件命名 4 4、HTML 书写规范 4 4.1 编码 4 4.2 文档类型声明 4 4.3 语法 4 4.4 文件引入 5 4.5 语义化 html 5 5、CSS 书写规范 6 5.1 编码 6 5.2 协作开发及分工 6 5.3 CSS语法 6 5.4 class 与 id 命名 6 5.6 属性列举 7 5.7 CSS优化 7 6、JAVASCRIPT 书写规范 7 6.1 编码 7 6.2 语法 7 6.3 变量命名 7 6.4 变量声明 8 7、注释规范 8 7.1 html 注释 8 7.2 css 注释 8 7.3 JavaScript 注释 8 8、图片规范 8 9、开发测试工具约定 9 1、规范目的为提高团队协作效率,便于后台开发人员套页面及前端后期优化维护,输出高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前端页面制作。本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。 2、基本准则编写符合 w3c 标准,语义化的 html,实现结构、表现、行为分离;浏览器兼容性优良(暂定 IE、chrome、firefox)。页面性能方面,代码要求简洁有序, 尽可能的减小服务器负载,注重 css 代码质量,保证浏览器能最快的解析。 3、文件规范 3.1 目录结构 css、js、images 文件均归档至约定的目录中。约定目录为: / /index.html /images/ /css/ base.css /js/ common.js jquery-1.9..min.js 可根据需要创建子目进行分类。 3.2 html 文件命名英文命名,后缀为.html 3.3 css 文件命名英文命名,后缀为.css。公用 css 请放在 base.css 中,重置样式浏览器内置样式的 css 为 reset.css,其它css 文件根据页面名称命名。 3.4 js文件命名英文命名, 后缀为.js。公用 js 请放在 common.js 中, 其他依模块需求命名。注:所有文件命名,由多个单词组成时,采用中划线连接方式,比如:账号模型文件 account-model.js,错误报告页面 error-report.html 等。 4、html 书写规范 4.1 编码统一为 utf-8 编码。 <meta charset="utf-8" /> 4.2 文档类型声明 HTML5 声明类型<!DOCTYPE html> ，移动端页面必须用这个类型。 4.3 语法代码书写时实现层次分明的缩进。所有的标签、属性、属性命名必须由小写字母及连接线(-)组成, 且所有标签必须闭合; 属性值必须用双引号。不要在自动闭合标签结尾处使用斜线(HTML5 规范指出他们是可选的)。充分利用无兼容性问题的 html 自身标签, 比如 em, strong, label 等。需要为 html 元素添加自定义属性的时候, 首先要考虑有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性(可用 jquery 的 data()函数获取属性值),避免使用"data:" 等其他命名方式。在标签中尽量避免使用 style 属性,即 style="..."。 4.4 文件引入一般情况下CSS样式文件必须外链至<head>...</head>之间; 一般情况下 javascript 文件必须外链至页面底部。引入js库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如 jquery-1.9.2.min.js; 引入插件, 文件名格式为库名称.插件名称,比如 jQuery.cookie.js。 4.5 语义化 html 如标题根据重要性用 h*(同一页面只能有一个 h1), 段落标记用 p, 列表用 ul, 内联元素中不可嵌套块级元素。尽可能减少 div 嵌套等，如： <div class="box"><div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div> 完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>; 尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。书写链接地址时, 必须避免重定向,例如:href=" 即须在 URL 地址后面加上“/”; 必须为含有描述性表单元素(input, textarea)添加 label，如： <p>姓名: <input type="text" id="name" name="name" /></p> 须写成: <p><label for="name">姓名: </label><input type="text" id="name" /></p> 能以背景形式呈现的图片, 尽量写入 css 样式中; 重要图片必须加上 alt 属性; 给重要的元素和截断的元素加上title; 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能; 特殊符号使用:尽可能使用 html 实体字符。 4.6 属性顺序 HTML 属性应该按照特定的顺序出现以保证易读性。 id class name data-* src, for, type, href title, alt 5、css 书写规范 5.1 编码统一为 utf-8。 5.2 协作开发及分工根据各个模块，根据页面相似性, 事先写好大体框架文件,分配给前端人员实现内部细节;公用 css 文件 base.css 在制定框架时完成, 协作开发过程中, 每个页面请务必都要引入, 此文件包含头部底部样式, 此文件不可随意修改;每个页面必须引入 reset.css 文件。 5.3 CSS语法使用组合选择器时,保持每个独立的选择器占用一行。声明块的右括号应该另起一行。每条声明应该只占用一行来保证错误报告更加准确。尽可能使用短的十六进制数值,例如使用 #fff 替代 #ffffff。不要为 0 指明单位,比如使用 margin: 0; 而不是 margin: 0px。所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的,但是如果没有他,你的代码会更容易出错。所有的十六进制值都应该使用小写字母,例如 #fff。因为小写字母有更多样的外形,在浏览文档时,他们能够更轻松的被区分开来。为选择器中的属性取值添加引号,例如 input[type="text"]。他们只在某些情况下可有可无,所以都使用引号可以增加一致性。 5.4 class 与 id 命名大的框架命名比如 header/footer/wrapper/left/right 之类的统一命名. 其他样式名称由小写英文字母、数字、链接线来组合命名, 如 i-comment, width-200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化。 5.5 css 属性书声明顺序建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起。 5.6 属性列举布局定位属性主要包括: display & list-style & position(相应的 top,right,bottom,left) & float & clear & visibility & overflow。自身属性主要包括:width & height & margin & padding & border & background。文本属性主要包括:color & font & text-decoration & text-align & vertical-align & white- space。所列出的这些属性只是最常用到的, 并不代表全部;书写代码前, 考虑并提高样式重复使用率。 5.7 CSS优化 css 属性的尽量简写,移除空的 css 规则,如 a{}。中文字体名, 请务必转码成 unicode 码, 以避免编码错误时乱码;背景图片请尽可能使用 sprite 技术, 减小 http 请求, 考虑到多人协作开发,sprite 按模块制作;减少使用影响性能的属性, 比如 position:absolute || float。正确使用显示属性:如 display:line 不要和 width,height,float, margin,padding 同时使用;display:line-block 不要和 float 同时使用。 6、Javascript 书写规范 6.1 编码文件编码统一为 utf-8。 6.2 语法行代码结束必须有分号,字符常量一般情况下统一使用 '' 单引号。 6.3 变量命名驼峰式命名。原生 JavaScript 变量要求是纯英文字母, 首字母须小写, 如 myTest Var;另,要求变量集中声明,避免全局变量。常量命名:采用大写字母,下划线连接的方式,如 MAX_COUNT。类命名:首字母大写, 驼峰式命名,如 MyTestClass。函数命名:首字母小写驼峰式命名, 如 myTestFun ()。命名语义化, 尽可能利用英文单词或其缩写。 6.4 变量声明所有函数内变量声明放在函数内头部,只使用一个 var(多了 JSLint 报错), 一个变量一行。 6.5 后期优化 JavaScript 非注释类中文字符打包成独立的语言包, 以避免 js 混淆后出现乱码;尽量将 js 压缩或混淆。代码结构明了, 加适量注释. 提高函数重用率。尽量避免使用存在兼容性及消耗资源的方法或属性, 比如 eval() 。 7、注释规范 7.1 html 注释注释格式 , '--'只能在注释的始末位置,不可置入注释文字区域; 7.2 css 注释注释格式 /*这儿是注释*/; 7.3 JavaScript 注释单行注释使用://这儿是单行注释多行注释使用: /* 多行注注释*/ 8、图片规范所有页面元素类图片均放入 images 文件夹; 图片格式仅限于 gif 、png 、 jpg; 命名全部用小写英文字母、数字、连接线的组合,其中不得包含汉字、空格、特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另外命名分头尾两部分, 用连接线链接, 比如 ad-left01.gif || btn-submit.gif; 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少页面加载时间。运用 css sprite 技术集中小的背景图或图标, 减小页面 http 请求, 但注意, 请务必在对应的 css sprite 的 psd 源文件中划参考线, 并保存至 images/psd 目录下. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景: _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’images/bg.png’); 9、开发测试工具约定建议使用 Sublime|| DW , 亦可根据自己喜好选择, 但须遵循如下原则: 不可利用 IDE 的视图模式'画'代码; 不可利用IDE生成相关功能代码, 比如DW内置的一些功能js;代码必须格式化, 比如缩进和排版; 测试工具: 前期开发仅测试 FireFox -->IE8 ,后期优化时加入 Chrome & Safari;建议测试顺序: FireFox-->IE8--->Chrome-->Safari,建议安装 firebug 及 IE Tab Plus 插件. 10、其他规范开发过程中严格按分工完成页面, 以提高 css 复用率, 避免重复开发。减小沉冗代码, 书写所有人都可以看的懂的代码。简洁易懂是一种美德. 为用户着想, 为服务器着想。附： DIV+CSS 命名规范 1.CSS ID 的命名外　套：　　wrap 主导航：　　mainnav 子导航：　　subnav 页　脚：　　footer 整个页面：　content 页　眉：　　header 页　脚：　　footer 标签：　　label 标　题：　　title 主导航：　　mainbav（globalnav）顶导航：　　topnav 边导航：　　sidebar 左导航：　　left-sidebar 右导航：　　right-sidebar 旗　志：　　logo 标　语：　　banner 菜单内容： menu-content 菜单容器：　menu-container 子菜单：　　submenu 边导航图标：sidebar-icon 注释：　　　note 面包屑：　　breadcrumb(即页面所处位置导航提示) 容器：　　　container 内容：　　　content 搜索：　　　search 登陆：　　　login 功能区：　　shop(如购物车，收银台) 当前的　　　current 2.另外在编辑样式表时可用的注释可这样写： <-- Footer --> 内容区 <-- End Footer --> 3.样式文件命名基本的 base.css 布局，版面 layout.css 专栏 columns.css 文字 font.css 打印样式 print.css 主题 themes.css 10

展开阅读全文