2014Web前端开发规范文档-v23.doc

Web前端开发规范文档 编 写 陈 济 晗 审 核 批 准 时 间 2014 年 3 月 规范目的 为提高团队协作效率，便于研发人员添加功能及前端后期优化维护，输出高质量的符合W3C标准的页面，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后可更改。 基本准则 符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。 合作建议 在需要修改配置文件的样式修改中，研发人员要积极配合相关前端开发进行修改，页面demo分版本建立文件夹上传至vs中，便于研发人员的获取，不建议使用点对点的文件传输方式。 不建议研发人员修改或增加样式，禁止把样式写在页面head中（只有某一个页面用到的样式例外），能用class完成的样式就一定不写在行内。 如果研发人员必须要修改、增加样式，必须把样式写在现有css文件中（common.css除外）专为研发人员注释的区块中，并添加备注，标明修改人姓名、新增时间和解决的问题，并及时告知前端人员，将由前端人员定期整理。如在base.css的文件末尾增加所需代码： /* @ChenChen新增所需的弹出层部分的样式 */ .popdiv {...............} 文件规范 文件存放位置 html css?js images文件均归档至约定的目录中，参考如下： demo images 存放图片文件 media 存放多媒体文件，如swf、avi、ram等 psd 存放交互设计文件 scripts 存放脚本文件，如js、asp、php等 style 存放CSS文件 文件命名 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。 html文件命名原则 按照与交互设计稿相对应的方式为页面命名，即页面与其对应的设计稿使用同一名称。 css文件命名原则 公用组件的样式文件是common.css，因此新建的文件名不能使用common。命名尽量使用小写英文单词，推荐命名见附录1（css文件命名）。 图片命名原则 图片的名称分为头尾两部分，用下划线“_”隔开，头部分表示此图片的大类性质例如：广告、标志、菜单、按钮等等。图片格式仅限于gif、png、jpg。 放置在页面顶部的广告、装饰图案等长方形的图片 banner 如：banner_cnki.gif 标志性的图片 logo 在页面上位置不固定并且带有链接的小图片 btn 图片精灵（组合图片） sprite 在页面上某一个位置连续出现，性质相同的链接栏目的图片 menu 如：menu_aboutus.gif 装饰用的照片 pic 不带链接表示标题的图片 tit 鼠标感应效果图片（不能使用sprite的情况） 图片名_on、图片名_off 如：btn_ok_on.gif javascript的命名原则 以功能模块名字为.js文件命名，采用小写英文。一般使用短线“-”替代自然语言名称中的空格，用句点“.”分隔表示名称中的从属关系。如：“poptools-core.js”、“pop.fx.pack.js”。 html编写规范 文档类型声明 DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。我们采用最简单的html5的文档标准。 完整代码如下： !DOCTYPE html 定义语言编码 为了被浏览器正确解释和通过W3C代码校验，所有的html文档都必须声明它们所使用的编码语言，我们一般使用utf-8（若制作多国语言页面也有可能用Unicode、ISO-8859-1等）。 代码如下： meta http-equiv=Content-Type content=text/html; charset=utf-8 / css引入方式尽量采取link 一般在html的页头中用link方式引入css文件。原则上，不允许直接写在CSS中使用@import。img src=logo.gif width=100 height=100 align=middle boder=0 alt=”中国知网” / 建议为文字链接a加上title属性，尤其是文字过长采用省略号处理方式的地方，例如