WEB前端开发代码使用规范_第1页
WEB前端开发代码使用规范_第2页
WEB前端开发代码使用规范_第3页
WEB前端开发代码使用规范_第4页
WEB前端开发代码使用规范_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、web前端代码规范规范目的为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档， 特制订此文档。木规范文档一经确认，前端开发人员必须按木文档规范进行前台页面开发。木 文档如有不对或者不合适的地方请及吋提出，经讨论决定后方可更改。基本准则符合web标准；语义化html;结构、表现、行为分离；兼容性优页面性能方面，代 码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。文件规范1. html，css, js, images文件均归档至相应约定的目录中cssimagesbackstagejs后台投块.csswebrootimagesfrontstagevjsweb

2、-inf前台模块.2. html文件命名：英文驼峰式命名，文件名.html。按实际模块需求命名。3. jsp文件命名：英文驼峰式命名，文件名.jsp。按实呩模块需求命名。4. css文件命名：英文驼峰式命名，文件名.css。共用base, css,首贞index, css,其他 页而按实际模块需求命名。5. js文件命名：英文驼峰式命名，文件名.js。共用common, js，其他依实际模块需求命 名。html书写规范1. 文档类型声明及编码：统一为html5的声明类型<!doctype html；编码统一为 <meta charset=utf-8/，|5写时利用ide实现s次分明

3、的缩进。2. 非特殊情况卜* css文件必须在head./head之间引入，选择link方式引入而非 ©import 形式。3. 非特殊情况下js文件必须在页面底部引入。4. 引入样式文件或javascript文件吋，须略去默认类型声明，写法如下：<1 ink rel=stylesheet href=/style. </stylescript src=</script>5. 引入js库文件，文件名须包含库名称及版本号及是否为压缩版，比如： jquery-1. 4. 1. min. js；6. 引入插件，文件名格式为库名称+插件名称，比如：jquery. coo

4、kie. jso7. 所宥html标签嵌套必须是.|卜:确的，禁止出现多出或者少出闭合标签的情况。8. 所有编码均遵循xhtml标准，标签、属性、属性命名必须由小写字母及下划线数字组成, 且所有标签必须闭合，包括br（br /），hr （hr />）等；属性值必须用双引号包括。9. 充分利用无兼容性问题的html自身标签，比如span、em、strong、optgroup、label6.需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去 设置，如果没有，须以"data-"为前缀来添加自定义属性，避免使

5、用"data: 等其他命名方式。语义化html,如标题根据重要性用hl-h6(同一页面只能有一个hl)，段落标记用p,歹ij表 用ul，内联元素中不可嵌蕓块状元素。尽可能减少div的嵌套层数。在页而中尽量避免使用内嵌样式表，即在标签内使用styles""。以背景形式呈现的图片，尽量写入cm样式中；重要图片必须加上alt属性；特殊符号使用：尽可能使用代码替代:比如(&lt;)、(&gt;)、空格(&nbsp;)、&(&amp;)、”(&quot;)等等；尽量避免使用过度复杂的html结构。css书写规范1. 编码统一为

6、utf-8。2. 为丫避免一些浏览器兼容性问题以及增加样式重用性，每个页面必须引入base, css (详见 附件一)，此文件不可随意修改。3. class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id 仅使用在大的模块上，class可用在重复使用率高及子级中。4. 为javascript预留钩子的命名，请以js_起始，比如:js_hide, js_show05. class与id命名：使用英文命名，命名要语义化，简明化，但不耍使用诸如first, last 之类的命名。使用驼峰式和下划线分隔相结合的命名规则，即命名应以父级加子级的命名规范, 如：父级的类为s

7、imple子级的类应该为simple_f irst,以此类推，但是尽量避免岀现超过四级的 类命名。6. css属性书写顺序，建议遵循：自身属性一布局定位属性一文木属性一其他属性。此条 可根据自身习惯书写，但尽量保证同类属性写在一起。属性列举：自身属性主要包括:width、height、margin、padding、border、background；布局定位属性主要包括:display> list-style、position （相应的 top、right、bottom、 left） 、 float、 clear、 visibility、 overflow；文木属性主要包括：color、

8、font、text-decoration、text-align、vertical-align、white-space其他：content；7.8.9.is写代码前，考虑并提高样式重复使用率。充分利用html自身属性及样式继承原理减少代码量样式表中中文字体名，请务必转码成unicode码，以避免编码错误时乱码10. 背景图片请尽可能使用sprite技术，减小http请求，考虑到多人协作开发，sprite按 模块制作。11. 使用table标签时(尽量避免使用table标签)，请不要用width、height、cellspacing、 cellpadding等table属性直接定义表现，应尽可能的

9、利用table自身私有属性分离结构 与表现，如：thead、tr、th、td、tbody、tfoot、colgroup、scope。12. 用png图片做图片时，要求图片格式为png-8格式，若png_8实在影响图片质量或其中有 半透明效果，请为ie6单独定义背景：background： none； filter： progid： dximagctransform. microsoft. alphalmagcloadcr (sizingmethod=crop, src=, img/bg. png )；13. 避免兼容性属性的使用，比如text-shadow、css3的相关属性；14. 减少使用

10、影响性能的属性，比如position: absolute、float；15. 代码缩进与格式：开发阶段竽行书写，系统交付时可再将所有css进行压缩；使用tab键 进行缩进，每层缩进一个tab键16. 背景重复，确保使用的图片在与迭代方向相同的长度要大于1像素而小于10像素。简单 点说，就是x轴迭代，宽度要在1和10之间，y轴迭代，长度要在1和10之间。javascript书写规范1. 文件编码统一为utf-8,书写过程过，每条语句必须以分号结朿。2. 变量命名：驼峰式命名。首字母须小写，如：itaolun。3. 类命名：驼峰式命名。首字母大写，如：itaoluno4. 函数命名：驼峰式命名。首

11、字母小写。如：itaolunoo5. 构造函数命名：全部大写。6. 命名语义化，尽可能利用英文单词或其缩写。7. 尽量避免使用存在兼容性及消耗资源的方法或属性，比如evalo、innertexto8. 后期优化中，javascript非注释类屮文字符须转换成unicode编码使用，以避免编码错误 时乱码显示。9. 代码结构明了，加适量注释。提高函数重用率。10. 注重与html分离，减小reflow，注重性能。11. 减少dom访m次数。方法是将得到的元素用变量存储起来。12. 减少dom事件绑定。13. 将自己写的js用匿名函数乜起來，避免变量冲突。(function()()片规范1. 所有

12、页面元素类图片均放入images文件夹，测试用图片放于images/demo文件夹；2. 图片格式仅限于gif、png、jpg;3. 命名全部用小写英文字母、数字、_的组合，其中不得包含汉字、空格、特殊字符；尽量 用易懂的词汇。4. 在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。5. 尽量避免使用半透明的png图片6. 运用csssprite技术集中小的背景图或图标，减小页面http请求，但注意，请务必在对 应的psd源图中划参考线，并保存至images目录下。注释规范1. html注释：注释格式<!-_注释一，-只能在注释的始末位置，不可置入注释文字区域;2. c

13、ss注释：注释格式/*注释*/;3. javascript注释，单行注释使用/单行注释，多行注释使用/*多行注释*/。语言组织类1. 新增，而非“添加，增加”之类的同语2. 编辑，而非“修改，更新”之类的词语3. 保存，而非“提交”之类的词语4. 所有操作除了保存表单外，保存用户操作统一使用“确定”词语开发及测试工具约定建议使用myeclipse、eclipse、aptana,亦卩1根据自己喜好选择，但须遵循如下原则：1. 不可利用ide的视图模式“画”代码。2. 不可利用ide生成相关功能代码，比如dw内置的一些功能js;3. 编码必须格式化，比如缩进；4. 测试工具:前期开发仅测试fire

14、fox、ie6、ie7、ie8、ie9,后期优化时加入opera、 chrome、 safari；5. 建议测试顺序：firefox>ie9>ie8>ie7>ie6>0pera>chrome>safari,必须 安装firebug插件。base, css/*css reset*/ body, div，dl，dt，dd, ul，ol，li，hl, h2, h3, h4, h5, h6,pre, form, f ieldset, input, textarea, p,blockquote, th, tdmargin: 0padding: 0tablebor

15、der-collapse:collapse;border-spacing: 0fieldset, imgborder: 0address, caption, cite, code, dfn, cm, strong, th, var font-style:/7o77/7<?7;font-weight:norm alol, ul1iststye:none; caption, thtext-al ign: left.，hl, h2, h3, h4, h5, h6 font-size: 100% font-weight:似人q:before, q:aftercontent: ”；abbr，acr

16、onm border: 0a text-decorat ion: none.，cursor: pointer;a: hover, a: focus textdccoration: underline; body，button, input,select, textarea, a/氺 for ie*/font: 12px/l. 5tahoma，arial，5b8b4f53, sansserif.，button, input, select, textareafont-size:100%/*文字排版*/.f12font-size:12px.f13font-size:13px.f 14font-si

17、ze: 14px.f16font-size:16px.f20font-size:/?%;.fb font-wei ght: bold.，.fn font-weight:normal.t2text-indent: 2em.lhl50 line-height: 150%;.lhl80line-height:iso%;.lh200line-height:«.uni text-decoration:underline;.no_unltext-decoration:none/*定位*/.tl text-al ign: left.，.tctext-align:center;.tr text-al

18、ign:r/a(; bemargin-left:automargin-right:auto.f 1 float:display: inline.，.fr float:di splay: ini inc .cb clear: cl clear: left.，.cr clear:门诚广;.clear clear:di splay:overflowvisibilitywidth: height:.clearfix: after content: zz; display: block; height: 6; clear:visibility:.clearfixdisplay:inline-blockh

19、tml . clcarfix height: 1%. clearfix display:.vmvcr t i ca1-a1i gn: middlc;.pr position:relative;.paposi tion:.abs-rightposition:absojute;right: 0.zoomzoom:1.hidden visibility:力 jwe".none display: 776)/?;a长度高度岭.wlo width: 10px.w20 wi dth: 20px.w30 width:<5y?/z¥.w40width: 40px.w50width: 5

20、0px.w60width: 60px.w70width: 70px.w80 width .w90 width: 90px.wloowidth: loopx.，.w200 width: 200px.w250 width:.w300width: 300px.w400width: 400px.w500width: 500px;.w600width:600px.w700 width: 700px.w800 width: 800px.wwidth.h50height: 50px.h80height: 80px.hlooheight:100px.h200 he i ght: 200px.hheight:

21、100%.、/ *边距*/.mlo margin: 10px.ml5margin:15px.m3omargin:30px.mt5margin-top: 5px.mtlomargi ntop:10px.mtl5margi ntop:15px.mt20margin-top:7/zy;.mt30margin-top: 30px.mt50margin-top: 50px.mt 100margin-top:100px.mb10margin-bottom:10px.mbl5margin-bottom:i5px.mb20 margi n-bottom:.mb30margi n-bottom:30px.mb5

22、0margin-bottom: 50px.mbloomargin-bottom:100px .ml5margin-left:5px.ml10margin-left:10px.ml 15margi nleft:15px.ml20margin-left: 20px.ml30 margin-left: 30px.ml50margin-left: 50px.ml100margin-left: 100px.mr5margin-right: 5px.mr10margin-right:10px.mrl5margin-right:15px.mr20 margin-right:/?;.mr30 margin-right

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论