《文豆Web前端开发规范手册V1..docx》由会员分享，可在线阅读，更多相关《文豆Web前端开发规范手册V1..docx（10页珍藏版）》请在金锄头文库上搜索。
1、文豆Web前端开发规范手册更新记录版本号日期更新内容修订V1.02010-05-01创建文档宋敏鹏V1.12011-02-01修改细节宋敏鹏V1.22015-05-28修改细节宋敏鹏文豆WEB前端开发规范手册1、规范目的32、基本准则33、文件规范33.1 目录结构33.2 html 文件命名43.3 css 文件命名43.4 js文件命名44、HTML 书写规范44.1 编码44.2 文档类型声明44.3 语法44.4 文件引入54.5 语义化 html55、CSS 书写规范65.1 编码65.2 协作开发及分工65.3 CSS语法65.4 class 与 id 命名65.6 属性列举75.
2、7 CSS优化76、JAVASCRIPT 书写规范76.1 编码76.2 语法76.3 变量命名76.4 变量声明87、注释规范87.1 html 注释87.2 css 注释87.3 JavaScript 注释88、图片规范89、开发测试工具约定91、规范目的为提高团队协作效率,便于后台开发人员套页面及前端后期优化维护,输出 高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前端页面制作。本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。2、基本准则编写符合 w3c 标准,语义化的 html,实现结构、表现、行为分离;浏览器兼容性优良(暂定 IE、c
3、hrome、firefox)。 页面性能方面,代码要求简洁有序, 尽可能的减小服务器负载,注重 css 代码质量,保证浏览器能最快的解析。3、文件规范3.1 目录结构css、js、images 文件均归档至约定的目录中。 约定目录为:/index.html/images/css/base.css/js/common.jsjquery-1.9.min.js可根据需要创建子目进行分类。3.2 html 文件命名英文命名,后缀为.html3.3 css 文件命名英文命名,后缀为.css。公用 css 请放在 base.css 中,重置样式浏览器内置样式的 css 为 reset.css,其它css
4、文件根据页面名称命名。3.4 js文件命名英文命名, 后缀为.js。公用 js 请放在 common.js 中, 其他依模块需求命名。注:所有文件命名,由多个单词组成时,采用中划线连接方式,比如:账号模型文件 account-model.js,错误报告页面 error-report.html 等。 4、html 书写规范4.1 编码统一为 utf-8 编码。4.2 文档类型声明HTML5 声明类型 ，移动端页面必须用这个类型。4.3 语法代码书写时实现层次分明的缩进。所有的标签 、属性 、属性命名必须由小写字母及连接线(-)组成, 且所有标签必须闭合; 属性值必须用双引号。不要在自动闭合标签结
5、尾处使用斜线(HTML5 规范指出他们是可选的)。充分利用无兼容性问题的 html 自身标签, 比如 em, strong, label 等。需要为 html 元素添加自定义属性的时候, 首先要考虑有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以data-为前缀来添加自定义属性(可用 jquery 的 data()函数获取属性值),避免使用data: 等其他命名方式。在标签中尽量避免使用 style 属性,即 style=.。4.4 文件引入一般情况下CSS样式文件必须外链至.之间;一般情况下 javascript 文件必须外链至页面底部。引入js库文件, 文件名须包含库名称及版本
6、号及是否为压缩版, 比 如 jquery-1.9.2.min.js;引入插件, 文件名格式为库名称.插件名称,比如 jQuery.cookie.js。4.5 语义化 html如标题根据重要性用 h*(同一页面只能有一个 h1), 段落标记用 p, 列表用 ul, 内联元素中不可嵌套块级元素。尽可能减少 div 嵌套等，如：欢迎访问XXX,您的用 户名是用户名完全可以用以下代码替代:欢迎 访问XXX,您的用户名是用户名;尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。书写链接地址时, 必须避免重定向,例如:href=http:
7、/ 即须在 URL 地址后面加上“/”;必须为含有描述性表单元素(input, textarea)添加 label，如：姓 名:须写成:姓名:能以背景形式呈现的图片, 尽量写入 css 样式中;重要图片必须加 上 alt 属性; 给重要的元素和截断的元素加上title;给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;特殊符号使用:尽可能使用 html 实体字符。4.6 属性顺序HTML 属性应该按照特定的顺序出现以保证易读性。idclassnamedata-*src, for, type, href title, alt5、css 书写规范5.1 编码统一为 utf-8。 5.2
8、 协作开发及分工根据各个模块，根据页面相似性, 事先写好大体框架文件,分配给前端人员实现内部细节;公用 css 文件 base.css 在制定框架时完成, 协作开发过程中, 每个页面请务必都要引入, 此文件包含头部底部样式, 此文件不可随意修改;每个页面必须引入 reset.css 文件。5.3 CSS语法使用组合选择器时,保持每个独立的选择器占用一行。 声明块的右括号应该另起一行。 每条声明应该只占用一行来保证错误报告更加准确。 尽可能使用短的十六进制数值,例如使用 #fff 替代 #ffffff。 不要为 0 指明单位,比如使用 margin: 0; 而不是 margin: 0px。所有声
9、明应该以分号结尾。虽然最后一条声明后的分号是可选的,但是如果没有他,你的代码会更容易出错。所有的十六进制值都应该使用小写字母,例如 #fff。因为小写字母 有更多样的外形,在浏览文档时,他们能够更轻松的被区分开来。为选择器中的属性取值添加引号,例如 inputtype=text。 他们只在某些情况下可有可无,所以都使用引号可以增加一致性。5.4 class 与 id 命名大的框架命名比如 header/footer/wrapper/left/right 之类的统一命名. 其他样式名称由小写英文字母、数字、链接线来组合命名, 如 i-comment, width-200; 避免使用中文拼音, 尽
10、量使用简易的单词组合; 总之, 命名要语义化, 简明化。5.5 css 属性书声明顺序建议遵循: 布局定位属性-自身属性-文本属性-其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起。5.6 属性列举布局定位属性主要包括: display & list-style & position(相应的 top,right,bottom,left) & float & clear & visibility & overflow。自身属性主要包括:width & height & margin & padding & border & background。文本属性主要包括:color &
11、font & text-decoration & text-align & vertical-align & white- space。所列出的这些属性只是最常用到的, 并不代表全部;书写代码前, 考虑并提高样式重复使用率。5.7 CSS优化css 属性的尽量简写,移除空的 css 规则,如 a。中文字体名, 请务必转码成 unicode 码, 以避免编码错误时乱码;背景图片请尽可能使用 sprite 技术, 减小 http 请求, 考虑到多人协作开发,sprite 按模块制作;减少使用影响性能的属性, 比如 position:absolute | float。正确使用显示属性:如 displ
12、ay: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
13、。函数命名:首字母小写驼峰式命名, 如 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
