前端代码开发规范标准.docVIP

. . . . 专注 专业 前端代码编写规范 规范目的 为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。 本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。 基本准则 符合WEB标准，语义化HTML，结构化表现行为分离，代码兼容性优良。 页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最优最快的解析速度。 文件规范 Html，Css，Js，Images文件均归档至约定的目录中; 目录命名尽可能使用英文，语义化，公用部分和各模块分开。比如：公用部分可放在comm目录文件夹下，各功能模 块各建一个有意义的文件夹; Html文件命名：英文命名，整个网站统一后缀，不要同时出现 shtml、shtm、html、htm;本规范采用“.html”。同时将对应界面稿放于同目录中，若界面稿命名为中文，请重命名与html文件同名，以方便后端添加功能时查找对应页面; css 文件命名：英文命名，后缀.css。共用 common.css，首页index.css，其他页面依实际模块需求 命名; Js 文件命名：英文命名，后缀.js。共用 common.js，其他依实际模块需求命名。JS 文件必须存入统一的JS目录文件夹; HTML 书写规范 文档类型声明及编码：统一为 html5 声明类型!DOCTYPE html;编码统一为meta charset=”utf-8″ /，书写时利用 IDE 实现层次分明的缩进; 非特殊情况下样式文件必须外链至head…/head之间;非特殊情况下JavaScript文件必须外链至页面底部; 引入样式文件或 JavaScript 文件时, 须略去默认类型声明, 写法如下: link　rel=”stylesheet” href=”…” / style…/style script　src=”…”/script 引入JS 库文件，文件名须包含库名称及版本号及是否为压缩版，比如 jquery-1.4.1.min.js; 引入插件，文件名格式为库名称+插件名称，比如jQuery.cookie.js; 所有编码均遵循xhtml标准，标签 属性 属性命名，必须由小写字母及下划线数字组成， 且所有标签必须闭合，包括 br (br /)，hr(hr /)等;属性值必须用双引号包括;所有标签和属 性名称都必须小写; 充分利用无兼容性问题的 html 自身标签，比如 span，em，strong，optgroup，label等等; 需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式; 语义化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 书写链接地址时，必须避免重定向，例如：href=/，即须在 URL 地址后面加上“/”; 在页面中尽量避免使用 style 属性,即 style=”…”; 必须为含有描述性表单元素(input, textarea)添加 label，如： p姓名: input type=”text” id=”name” name=”name” //p 须写成: plabel for=”name”姓名: /labelinput type=”text” id=”name” //p 能以背景形式呈现的图片，尽量写入css样式中; 重要图片必须加上alt属性;给重要的元素和截断的元素加上title; 给区块代码及重要功能(比如循环)加上注释，方便后台添加功能特殊符号使用: 尽可能使用代码替代: 比如 () (gt;) 空格( ) ?(?) 等等; 书写页面过程中,请考虑向后扩展性; classid参见CSS书写规范. CSS 书写规范 编码统一为 utf-8; 协作开发及分工：前端负责人会根据各个功能模块, 同时根据页面相似程序，事先写好大体框 架文件，分配给前端人员实现内部结构表现行为;