前端代码开发规范.docxVIP

前端代码编写规范规范目的为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。基本准则符合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…/stylescript　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;协作开发及分工：前端负责人会根据各个功能模块, 同时根据页面相似程序，事先写好大体框 架文件，分配给前端人员实现内部结构表现行为; 共用 css 文件 Common.css 由前端负责 人编写，协作开发过程中，每个页面请务必都要引入，此文件包含【CSS Reset(重设)】,如：*｛padding:0;margin:0;｝及【头部底部样式】，此文件不可随意修改;class 与 id 的使用：id 是唯一的并是父级的，c