开发备必:WEB前端开发规范文档

2011-03-17 17:41:52

<p>收藏一下</p> <p><strong>规范目的</strong><br /> 为提高团队协作效率,&amp;nbsp;便于后台人员添加功能及前端后期优化维护,&amp;nbsp;输出高质量的文档,&amp;nbsp;特制订此文档.&amp;nbsp;本规范文档一经确认,&amp;nbsp;前端开发人员必&amp;nbsp;须按本文档规范进行前台页面开发.&amp;nbsp;本文档如有不对或者不合适的地方请及时提出,&amp;nbsp;经讨论决定后方可更改.<br /> <br /> <strong>基本准则</strong><br /> 符合web标准,&amp;nbsp;语义化html,&amp;nbsp;结构表现行为分离,&amp;nbsp;兼容性优良.&amp;nbsp;页面性能方面,&amp;nbsp;代码要求简洁明了有序,&amp;nbsp;尽可能的减小服务器负载,&amp;nbsp;保证最快的&amp;nbsp;解析速度.<br /> <br /> <strong>文件规范</strong><br /> 1.&amp;nbsp;html,&amp;nbsp;css,&amp;nbsp;js,&amp;nbsp;images文件均归档至&amp;lt;系统开发规范&amp;gt;约定的目录中;<br /> 2.&amp;nbsp;html文件命名:&amp;nbsp;英文命名,&amp;nbsp;后缀.htm.&amp;nbsp;同时将对应界面稿放于同目录中,&amp;nbsp;若界面稿命名为中文,&amp;nbsp;请重命名与html文件同名,&amp;nbsp;以方便后端添加&amp;nbsp;功能时查找对应页面;<br /> 3.&amp;nbsp;css文件命名:&amp;nbsp;英文命名,&amp;nbsp;后缀.css.&amp;nbsp;共用base.css,&amp;nbsp;首页index.css,&amp;nbsp;其他页面依实际模块需求命名.;<br /> 4.&amp;nbsp;Js文件命名:&amp;nbsp;英文命名,&amp;nbsp;后缀.js.&amp;nbsp;共用common.js,&amp;nbsp;其他依实际模块需求命名.<br /> <br /> <strong>html书写规范</strong><br /> 1.&amp;nbsp;文档类型声明及编码:&amp;nbsp;统一为html5声明类型&amp;lt;!DOCTYPE&amp;nbsp;html&amp;gt;;&amp;nbsp;编码统一为&amp;lt;meta&amp;nbsp;charset=&amp;quot;gbk&amp;quot;&amp;nbsp;/&amp;gt;,&amp;nbsp;书写时利用IDE实现层&amp;nbsp;次分明的缩进;<br /> 2.&amp;nbsp;非特殊情况下样式文件必须外链至&amp;lt;head&amp;gt;...&amp;lt;/head&amp;gt;之间;非特殊情况下JavaScript文件必须外链至页面底部;<br /> 3.&amp;nbsp;引入样式文件或JavaScript文件时,&amp;nbsp;须略去默认类型声明,&amp;nbsp;写法如下:<br /> &amp;nbsp;</p> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>&amp;lt;link&amp;nbsp;rel=&amp;quot;stylesheet&amp;quot;&amp;nbsp;href=&amp;quot;...&amp;quot;&amp;nbsp;/&amp;gt;<br /> &amp;lt;style&amp;gt;...&amp;lt;/style&amp;gt;<br /> &amp;lt;script&amp;nbsp;src=&amp;quot;...&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;</div> </div> <br /> <p>  4.&amp;nbsp;引入JS库文件,&amp;nbsp;文件名须包含库名称及版本号及是否为压缩版,&amp;nbsp;比如jquery-1.4.1.min.js;&amp;nbsp;引入插件,&amp;nbsp;文件名格式为库名称+插件名称,&amp;nbsp;比&amp;nbsp;如jQuery.cookie.js;</p> <br /> <p>  5.&amp;nbsp;所有编码均遵循xhtml标准,&amp;nbsp;标签&amp;nbsp;&amp;amp;&amp;nbsp;属性&amp;nbsp;&amp;amp;&amp;nbsp;属性命名&amp;nbsp;必须由小写字母及下划线数字组成,&amp;nbsp;且所有标签必须闭合,&amp;nbsp;包括&amp;nbsp;br&amp;nbsp;(&amp;lt;br&amp;nbsp;/&amp;gt;),&amp;nbsp;hr(&amp;lt;hr&amp;nbsp;/&amp;gt;)等;&amp;nbsp;属性值必须用双引号包括;</p> <br /> <p>   6.&amp;nbsp;充分利用无兼容性问题的html自身标签,&amp;nbsp;比如span,&amp;nbsp;em,&amp;nbsp;strong,&amp;nbsp;optgroup,&amp;nbsp;label,等等;&amp;nbsp;需要为html 元素添加自定义属性的时候,&amp;nbsp;首先&amp;nbsp;要考虑下有没有默认的已有的合适标签去设置,&amp;nbsp;如果没有,&amp;nbsp;可以使用须以&amp;quot;data-&amp;quot;为前缀来添加自定义属性,避免 使用&amp;quot;data:&amp;quot;等其他命名方式;</p> <br /> <p>  7.&amp;nbsp;语义化html,&amp;nbsp;如&amp;nbsp;标题根据重要性用h*(同一页面只能有一个h1),&amp;nbsp;段落标记用p,&amp;nbsp;列表用ul,&amp;nbsp;内联元素中不可嵌套块级元素;</p> <br /> <p>   8.&amp;nbsp;尽可能减少div嵌套,&amp;nbsp;如&amp;lt;div&amp;nbsp;class=&amp;quot;box&amp;quot;&amp;gt;&amp;lt;div&amp;nbsp;class=&amp;quot;welcome&amp;quot;&amp;gt;欢迎访问 XXX,&amp;nbsp;您的用&amp;nbsp;户名是&amp;lt;div&amp;nbsp;class=&amp;quot;name&amp;quot;&amp;gt;用户名&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;amp; gt;完全可以用以下代码替代:&amp;nbsp;&amp;lt;div&amp;nbsp;class=&amp;quot;box&amp;quot;&amp;gt;&amp;lt;p&amp;gt;欢迎&amp;nbsp;访问XXX,&amp;nbsp;您的用户名是&amp;lt; span&amp;gt;用户名&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;;</p> <br /> <p>  9.&amp;nbsp;书写链接地址时,&amp;nbsp;必须避免重定向,例如:href=&amp;quot;http://itaolun.com/&amp;quot;,&amp;nbsp;即须在URL地址后面加上&amp;ldquo;/&amp;rdquo;;</p> <br /> <p>  10.&amp;nbsp;在页面中尽量避免使用style属性,即style=&amp;quot;&amp;hellip;&amp;quot;;</p> <br /> <p>  11.&amp;nbsp;必须为含有描述性表单元素(input,&amp;nbsp;textarea)添加label,&amp;nbsp;如</p> <br /> <br /> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>&amp;lt;p&amp;gt;姓&amp;nbsp;名:&amp;nbsp;&amp;lt;input&amp;nbsp;type=&amp;quot;text&amp;quot;&amp;nbsp;id=&amp;quot;name&amp;quot;&amp;nbsp;name=&amp;quot;name&amp;quot;&amp;nbsp;/&amp;gt;&amp;lt;/p&amp;gt;<br /> 须写成:<br /> &amp;lt;p&amp;gt;&amp;lt;label&amp;nbsp;for=&amp;quot;name&amp;quot;&amp;gt;姓&amp;nbsp;名:&amp;nbsp;&amp;lt;/label&amp;gt;&amp;lt;input&amp;nbsp;type=&amp;quot;text&amp;quot;&amp;nbsp;id=&amp;quot;name&amp;quot;&amp;nbsp;/&amp;gt;&amp;lt;/p&amp;gt;</div> </div> <br /> <p>  12.&amp;nbsp;能以背景形式呈现的图片,&amp;nbsp;尽量写入css样式中;</p> <br /> <p>  13.&amp;nbsp;重要图片必须加上alt属性;&amp;nbsp;给重要的元素和截断的元素加上title;</p> <br /> <p>  14.&amp;nbsp;给区块代码及重要功能(比如循环)加上注释,&amp;nbsp;方便后台添加功能;</p> <br /> <p>  15.&amp;nbsp;特殊符号使用:&amp;nbsp;尽可能使用代码替代:&amp;nbsp;比如&amp;nbsp;&amp;lt;(&amp;lt;)&amp;nbsp;&amp;amp;&amp;nbsp;&amp;gt;(&amp;gt;)&amp;nbsp;&amp;amp;&amp;nbsp;空格(&amp;nbsp;)&amp;nbsp;&amp;amp;&amp;nbsp;&amp;raquo;(&amp;raquo;)&amp;nbsp;等等;</p> <br /> <p>  16.&amp;nbsp;书写页面过程中,&amp;nbsp;请考虑向后扩展性;</p> <br /> <p>  17.&amp;nbsp;class&amp;nbsp;&amp;amp;&amp;nbsp;id&amp;nbsp;参见&amp;nbsp;css书写规范.</p> <br /> <br /> <strong>css书写规范</strong><br /> <p>  1.&amp;nbsp;编码统一为utf-8;</p> <br /> <p>   2.&amp;nbsp;协作开发及分工:&amp;nbsp;i会根据各个模块,&amp;nbsp;同时根据页面相似程序,&amp;nbsp;事先写好大体框架文件,&amp;nbsp;分配给前端人员实现内部结构&amp;amp;表现&amp;amp; 行为;&amp;nbsp;&amp;nbsp;共用css文件base.css由i书写,&amp;nbsp;协作开发过程中,&amp;nbsp;每个页面请务必都要引入,&amp;nbsp;此文件包含reset及头部底部样式,&amp;nbsp;此文件不可 随意修改;</p> <br /> <p>  3.&amp;nbsp;class与id的使用:&amp;nbsp;id是唯一的并是父级的,&amp;nbsp;class是可以重复的并是子级的,&amp;nbsp;所以id仅使用在大的模块上,&amp;nbsp;class可用在重复使用率高及子级&amp;nbsp;中;&amp;nbsp;id原则上都是由我分发框架文件时命名的,&amp;nbsp;为JavaScript预留钩子的除外;</p> <br /> <p>  4.&amp;nbsp;为JavaScript预留钩子的命名,&amp;nbsp;请以&amp;nbsp;js_&amp;nbsp;起始,&amp;nbsp;比如:&amp;nbsp;js_hide,&amp;nbsp;js_show;</p> <br /> <p>   5.&amp;nbsp;class与id命名:&amp;nbsp;大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样 式名称由&amp;nbsp;小写英文&amp;nbsp;&amp;amp;&amp;nbsp;数&amp;nbsp;字&amp;nbsp;&amp;amp;&amp;nbsp;_&amp;nbsp;来组合命名,&amp;nbsp;如i_comment,&amp;nbsp;fontred,&amp;nbsp;width200;&amp;nbsp;避免使用中文 拼音,&amp;nbsp;尽量使用简易的单词组合;&amp;nbsp;总之,&amp;nbsp;命名要语义化,&amp;nbsp;简明&amp;nbsp;化.</p> <br /> <p>  6.&amp;nbsp;规避class与id命名(此条重要,&amp;nbsp;若有不明白请及时与i沟通):</p> <br /> <p>    a,&amp;nbsp;通过从属写法规避,&amp;nbsp;示例见d;</p> <br /> <p>    b,&amp;nbsp;取父级元素id/class命名部分命名,&amp;nbsp;示例见d;</p> <br /> <p>    c,&amp;nbsp;重复使用率高的命名,&amp;nbsp;请以自己代号加下划线起始,&amp;nbsp;比如i_clear;</p> <br /> <p>    d,&amp;nbsp;a,b两条,&amp;nbsp;适用于在2中已建好框架的页面,&amp;nbsp;如,&amp;nbsp;</p> <br /> <br /> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>要在2中已建好框架的页面代码&amp;lt;div&amp;nbsp;id=&amp;quot;mainnav&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;中加入新的div元&amp;nbsp;素,<br /> 按a命名法则:&amp;nbsp;&amp;lt;div&amp;nbsp;id=&amp;quot;mainnav&amp;quot;&amp;gt;&amp;lt;div&amp;nbsp;class=&amp;quot;firstnav&amp;quot;&amp;gt;...&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;,<br /> 样式写法:&amp;nbsp;&amp;nbsp;#mainnav&amp;nbsp;&amp;nbsp;.firstnav{.......}<br /> 按b命名法则:&amp;nbsp;&amp;lt;div&amp;nbsp;id=&amp;quot;mainnav&amp;quot;&amp;gt;&amp;lt;div&amp;nbsp;class=&amp;quot;main_firstnav&amp;quot;&amp;gt;...&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;,<br /> 样式写法:&amp;nbsp;&amp;nbsp;.main_firstnav{.......}</div> </div> <br /> <p>  7.&amp;nbsp;css属性书写顺序,&amp;nbsp;建议遵循:&amp;nbsp;&amp;nbsp;布局定位属性--&amp;gt;自身属性--&amp;gt;文本属性--&amp;gt;其他属性.&amp;nbsp;此条可根据自身习惯书写,&amp;nbsp;但尽量保证同类属&amp;nbsp;性写在一起.&amp;nbsp;</p> <br /> <br /> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>属性列举:&amp;nbsp;<br /> 布局定位属性主要包括:&amp;nbsp;display&amp;nbsp;&amp;amp;&amp;nbsp;list-style&amp;nbsp;&amp;amp;&amp;nbsp;position(相应&amp;nbsp;的&amp;nbsp;top,right,bottom,left)&amp;nbsp;&&amp;nbsp;<br /> float&amp;nbsp;&amp;amp;&amp;nbsp;clear&amp;nbsp;&&amp;nbsp;visibility&amp;nbsp;&&amp;nbsp;overflow;&amp;nbsp;<br /> 自身属性主要包括:&amp;nbsp;width&amp;nbsp;&amp;amp;&amp;nbsp;height&amp;nbsp;&amp;amp;&amp;nbsp;margin&amp;nbsp;&amp;amp;&amp;nbsp;padding&amp;nbsp;&amp;amp;&amp;nbsp;border&amp;nbsp;&amp;amp;&amp;nbsp;background;&amp;nbsp;<br /> 文本属性主要包括:color&amp;nbsp;&amp;amp;&amp;nbsp;font&amp;nbsp;&amp;amp;&amp;nbsp;text-decoration&amp;nbsp;&amp;amp;&amp;nbsp;text-align&amp;nbsp;&amp;amp;&amp;nbsp;vertical-align&amp;nbsp;&amp;amp;&amp;nbsp;white-&amp;nbsp;space&amp;nbsp;&amp;amp;&amp;nbsp;<br /> 其他&amp;nbsp;&amp;amp;&amp;nbsp;content;&amp;nbsp;<br /> 我所列出的这些属性只是最常用到的,&amp;nbsp;并不代表全部;</div> </div> <br /> <p>  8.&amp;nbsp;书写代码前,&amp;nbsp;考虑并提高样式重复使用率;</p> <br /> <p>  9.&amp;nbsp;充分利用html自身属性及样式继承原理减少代码量,&amp;nbsp;比如:</p> <br /> <br /> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>&amp;lt;ul&amp;nbsp;class=&amp;quot;list&amp;quot;&amp;gt;&amp;lt;li&amp;gt;这儿是标题列表&amp;lt;span&amp;gt;2010-09-&amp;nbsp;15&amp;lt;/span&amp;gt;&amp;lt;/ul&amp;gt;<br /> 定义<br /> ul.list&amp;nbsp;li{position:relative}&amp;nbsp;&amp;nbsp;ul.list&amp;nbsp;li&amp;nbsp;span{position:absolute;&amp;nbsp;right:0}<br /> 即可实现日期居右显示</div> </div> <br /> <p>  10.&amp;nbsp;样式表中中文字体名,&amp;nbsp;请务必转码成unicode码,&amp;nbsp;以避免编码错误时乱码;</p> <br /> <p>  11.&amp;nbsp;背景图片请尽可能使用sprite技术,&amp;nbsp;减小http请求,&amp;nbsp;考虑到多人协作开发,&amp;nbsp;sprite按模块制作;</p> <br /> <p>  12.&amp;nbsp;使用table标签时(尽量避免使用table标签),&amp;nbsp;请不要用width/&amp;nbsp;height/cellspacing/cellpadding等table属性直接定义表现,&amp;nbsp;应尽可能的利用table自身私有属性分离结构与表现&amp;nbsp;,&amp;nbsp;如</p> <br /> <br /> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>thead,tr,th,td,tbody,tfoot,colgroup,scope;<br /> &amp;nbsp;(cellspaing及cellpadding的css控制方法:&amp;nbsp;<br /> table{border:0;margin:0;border-collapse:collapse;}&amp;nbsp;table&amp;nbsp;th,&amp;nbsp;table&amp;nbsp;td{padding:0;}&amp;nbsp;,&amp;nbsp;<br /> base.css文件中我会初始化表格样式)</div> </div> <br /> <p>  13.&amp;nbsp;杜绝使用&amp;lt;meta&amp;nbsp;http-equiv=&amp;quot;X-UA-Compatible&amp;quot;&amp;nbsp;content=&amp;quot;IE=7&amp;quot;&amp;nbsp;/&amp;gt;&amp;nbsp;兼容&amp;nbsp;ie8;</p> <br /> <p>  14.&amp;nbsp;用png图片做图片时,&amp;nbsp;要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,&amp;nbsp;请为ie6单独定义背景:</p> <br /> <br /> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader&amp;nbsp;<br /> (sizingMethod=crop,&amp;nbsp;src=&amp;rsquo;img/bg.png&amp;rsquo;);</div> </div> <br /> <p>  15.&amp;nbsp;避免兼容性属性的使用,&amp;nbsp;比如text-shadow&amp;nbsp;||&amp;nbsp;css3的相关属性;</p> <br /> <p>  16.&amp;nbsp;减少使用影响性能的属性,&amp;nbsp;比如position:absolute&amp;nbsp;||&amp;nbsp;float&amp;nbsp;;</p> <br /> <p>  17.&amp;nbsp;必须为大区块样式添加注释,&amp;nbsp;小区块适量注释;</p> <br /> <p>  18.&amp;nbsp;代码缩进与格式:&amp;nbsp;建议单行书写,&amp;nbsp;可根据自身习惯,&amp;nbsp;后期优化i会统一处理;</p> <br /> <br /> <strong>JavaScript书写规范</strong><br /> <p>  1.&amp;nbsp;文件编码统一为utf-8,&amp;nbsp;书写过程过,&amp;nbsp;每行代码结束必须有分号;&amp;nbsp;原则上所有功能均根据XXX项目需求原生开发,&amp;nbsp;以避免网上down下来的代码造&amp;nbsp;成的代码污染(沉冗代码&amp;nbsp;||&amp;nbsp;与现有代码冲突&amp;nbsp;||&amp;nbsp;...);</p> <br /> <p>  2.&amp;nbsp;库引入:&amp;nbsp;原则上仅引入jQuery库,&amp;nbsp;若需引入第三方库,&amp;nbsp;须与团队其他人员讨论决定;</p> <br /> <p>  3.&amp;nbsp;变量命名:&amp;nbsp;驼峰式命名.&amp;nbsp;原生JavaScript变量要求是纯英文字母,&amp;nbsp;首字母须小写,&amp;nbsp;如iTaoLun;</p> <br /> <br /> <div class=&#34;UBBPanel&#34;> <div class=&#34;UBBTitle&#34;><img alt=&#34;div css xhtml xml Example Source Code&#34; style=&#34;margin: 0px 2px -3px 0px;&#34; src=&#34;http://www.52css.com/images/quote.gif&#34; /> Example Source Code <span style=&#34;font-weight: 100; color: rgb(247, 247, 247);&#34;>[www.52css.com]</span></div> <div class=&#34;UBBContent&#34;>jQuery变量要求首字符为&#39;_&#39;,&amp;nbsp;其他与原生JavaScript&amp;nbsp;规则相同,&amp;nbsp;如:&amp;nbsp;_iTaoLun;<br /> 另,&amp;nbsp;要求变量集中声明,&amp;nbsp;避免全局变量.</div> </div> <br /> <p>  4.&amp;nbsp;类命名:&amp;nbsp;首字母大写,&amp;nbsp;驼峰式命名.&amp;nbsp;如&amp;nbsp;ITaoLun;</p> <br /> <p>  5.&amp;nbsp;函数命名:&amp;nbsp;首字母小写驼峰式命名.&amp;nbsp;如iTaoLun();</p> <br /> <p>  6.&amp;nbsp;命名语义化,&amp;nbsp;尽可能利用英文单词或其缩写;</p> <br /> <p>  7.&amp;nbsp;尽量避免使用存在兼容性及消耗资源的方法或属性,&amp;nbsp;比如eval()&amp;nbsp;&amp;amp;&amp;nbsp;innerText;</p> <br /> <p>  8.&amp;nbsp;后期优化中,&amp;nbsp;JavaScript非注释类中文字符须转换成unicode编码使用,&amp;nbsp;以避免编码错误时乱码显示;</p> <br /> <p>  9.&amp;nbsp;代码结构明了,&amp;nbsp;加适量注释.&amp;nbsp;提高函数重用率;</p> <br /> <p>  10.&amp;nbsp;注重与html分离,&amp;nbsp;减小reflow,&amp;nbsp;注重性能.</p> <br /> <br /> <strong>图片规范</strong><br /> <p>  1.&amp;nbsp;所有页面元素类图片均放入img文件夹,&amp;nbsp;测试用图片放于img/demoimg文件夹;</p> <br /> <p>  2.&amp;nbsp;图片格式仅限于gif&amp;nbsp;||&amp;nbsp;png&amp;nbsp;||&amp;nbsp;jpg;</p> <br /> <p>   3.&amp;nbsp;命名全部用小写英文字母&amp;nbsp;||&amp;nbsp;数字&amp;nbsp;||&amp;nbsp;_&amp;nbsp;的组合,其中不得包含汉字&amp;nbsp;||&amp;nbsp;空格&amp;nbsp;||&amp;nbsp;特殊字符;尽量用易懂的词汇,&amp;nbsp;便于团队其他成员 理&amp;nbsp;解;&amp;nbsp;另,&amp;nbsp;命名分头尾两部分,&amp;nbsp;用下划线隔开,&amp;nbsp;比如ad_left01.gif&amp;nbsp;||&amp;nbsp;btn_submit.gif;</p> <br /> <p>  4.&amp;nbsp;在保证视觉效果的情况下选择最小的图片格式与图片质量,&amp;nbsp;以减少加载时间;</p> <br /> <p>  5.&amp;nbsp;尽量避免使用半透明的png图片(若使用,&amp;nbsp;请参考css规范相关说明);</p> <br /> <p>  6.&amp;nbsp;运用css&amp;nbsp;sprite技术集中小的背景图或图标,&amp;nbsp;减小页面http请求,&amp;nbsp;但注意,&amp;nbsp;请务必在对应的sprite&amp;nbsp;psd源图中划参考线,&amp;nbsp;并保存至img目录&amp;nbsp;下.</p> <br /> <br /> <strong>注释规范</strong><br /> <p>  1.&amp;nbsp;html注释:&amp;nbsp;注释格式&amp;nbsp;&amp;lt;!--这儿是注释--&amp;gt;,&amp;nbsp;&#39;--&#39;只能在注释的始末位置,不可置入注释文字区域;</p> <br /> <p>  2.&amp;nbsp;css注释:&amp;nbsp;注释格式&amp;nbsp;/*这儿是注释*/;</p> <br /> <p>  3.&amp;nbsp;JavaScript注释,&amp;nbsp;单行注释使用&#39;//这儿是单行注释&#39;&amp;nbsp;,多行注释使用&amp;nbsp;/*&amp;nbsp;这儿有多行注释&amp;nbsp;*/;</p> <br /> <br /> <strong>开发及测试工具约定</strong><br /> <p>  建议使用Aptana&amp;nbsp;||&amp;nbsp;Dw&amp;nbsp;||&amp;nbsp;Vim&amp;nbsp;,&amp;nbsp;亦可根据自己喜好选择,&amp;nbsp;但须遵循如下原则:</p> <br /> <p>  1.&amp;nbsp;不可利用IDE的视图模式&#39;画&#39;代码;</p> <br /> <p>  2.&amp;nbsp;不可利用IDE生成相关功能代码,&amp;nbsp;比如Dw内置的一些功能js;</p> <br /> <p>  3.&amp;nbsp;编码必须格式化,&amp;nbsp;比如缩进;</p> <br /> <p>  测试工具:&amp;nbsp;前期开发仅测试FireFox&amp;nbsp;&amp;amp;&amp;nbsp;IE6&amp;nbsp;&amp;amp;&amp;nbsp;IE7&amp;nbsp;&amp;amp;&amp;nbsp;IE8&amp;nbsp;,&amp;nbsp;后期优化时加入Opera&amp;nbsp;&amp;amp;&amp;nbsp;Chrome&amp;nbsp;&amp;amp;&amp;nbsp;Safari;</p> <br /> <p>  建议测试顺序:&amp;nbsp;FireFox--&amp;gt;IE7--&amp;gt;IE8--&amp;gt;IE6--&amp;gt;Opera--&amp;gt;Chrome--&amp;gt;Safari,&amp;nbsp;建议安装firebug及IE&amp;nbsp;Tab&amp;nbsp;Plus插件.</p> <br /> <br /> <strong>其他规范</strong><br /> <p>  1.&amp;nbsp;开发过程中严格按分工完成页面,&amp;nbsp;以提高css复用率,&amp;nbsp;避免重复开发;</p> <br /> <p>  2.&amp;nbsp;减小沉冗代码,&amp;nbsp;书写所有人都可以看的懂的代码.&amp;nbsp;简洁易懂是一种美德.&amp;nbsp;为用户着想,&amp;nbsp;为服务器着想.</p> <div style=&#34;padding-left: 10px; margin-bottom: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255);&#34;><ins style=&#34;display: inline-table; border: medium none; height: 280px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 336px;&#34;><ins style=&#34;display: block; border: medium none; height: 280px; margin: 0pt; padding: 0pt; position: relative; visibility: visible; width: 336px;&#34; id=&#34;aswift_1_anchor&#34;><br /> </ins></ins></div>