JavaScript,HTML,CSS 规范小结

1. 综合

Ø 使用 UTF-8 编码。注: UTF-8 + BOM 不可


Ø 注释需有意义且描述清晰无二义


Ø 代码提交需填写提交原由


Ø JavaScriptJavaCSS 文件头部需进行版权声明


Ø 使用中文进行注释


Ø 更改代码后,需保证正常运行,否则严禁进行提交


Ø 对无用代码应进行删除;提交 SVN 时,需进行特殊标识


删除原因:


系统版本:


其它:


Ø 遵循静态资源分离注意事项


Ø 严禁随意添加第三方代码


Ø 不建议随意修改组件代码


2.  JavaScript


Ø 注释遵循 jsdoc-toolkithttp://code.google.com/p/jsdoc-toolkit/w/list


Ø 对外部只放出需要的变量和方法,其余变量、参数、方法应设为私有成员,不可通过外部对象对其进行访问及修改


Ø 对象上应避免对方法及属性的增加或修改


Ø 除静态类外,应使用 prototype  Function 添加方法


Ø 代码排版规范


² 长度不超过80个字符


² 换行时,符号需留在行末


² 关键字后如有括号,需空格


² 二元运算符(除括号、方括号、点)的两个操作数之间需进行空格


² 逗号后需空格


² 分号后需换行(for 语句中的分号需空格)


² 左大括号左边需空格,右边需进行换行;右大括号新启一行,与当前复合语句首字母对齐


Ø 使用全等进行比较 “===”,“!==


Ø 使用命名空间,如: hetong.changeTaboaweb.getList


Ø 私有函数和变量需以下划线开头进行标识


Ø 所有变量需在使用前用 var 进行声明,避免使用全局变量


Ø jQuery 对象以 进行开头进行标识,如: var $tabs = $(“#hetongTabs”)


Ø 简单语句结束时切记不要遗漏分号


Ø 声明时,请用 {} 代替 new Object()[] 代替 new Array()”” 代替 new String()


Ø 块语句即使只有一行,也需使用大括号


Ø 命名规则:functionNames、variableNames、ClassNames、EnumNames、methodNames、SYMBOLIC_CONSTANTS


Ø 版权信息后空行,对文件进行描述。格式如下:


/
@fileoverview Description.
@author <a href=”mailto:LLY219@gmail.com”>Liyuan Li</a> @version 1.0.0.1, May 7, 2012
/

3.  HTML


Ø 所有标签及标签属性名称使用小写


Ø 在使用标签时,需根据语义进行正确的使用


Ø 每一个块元素、列表和表元素之间需新启一行,其子元素需使用缩进


Ø 所有需闭合的标签需进行闭合


Ø 避免使用内联样式和元素内样式


Ø 禁止重复引用 js 和 css 文件


4.  CSS


Ø 注释: / comments */


Ø 当同一属性出现两次及以上,请使用缩写


Ø 当属性值为 时,可省略其后单位


Ø 类命名使用“–”进行分隔。如:ico-word


Ø 尽量避免使用 hack


Ø CSS 引用请使用 link 避免使用 @import


Ø 版权信息后空行,对文件进行描述。格式如下:


/
admin style.
@author <a href=”mailto:LLY219@gmail.com”>Liyuan Li</a> @version 1.0.3.5, May 4, 2012
/

Ø 样式前缀


² ico- 图标


² i- 输入框


² tb- 表格


² fm- 表单


² ft- 文本


² fn- 通用样式


² bt- 按钮


² ui- 组件


Ø 样式后缀


² -focus 当前焦点


² -s 小号样式


² -m 中号样式


² -b 大号样式


² -error 错误样式


² -success 成功样式


² -warn 警告样式


Ø 样式附加项,禁止单独进行定义


² first 标签集合第一个


² last 标签集合最后一个


² selected 标签集合中选中的项


² hover 标签集合中悬停的项


² current 标签集合中的当前选项


Ø z-index


² 普通应用:1 - 999


² 悬浮菜单:1000 - 4999


² 模态窗口:5000 - 9999


Ø 书写规范如下:


² 每块规则之间需进行空行


² 每块规则的元素之间需进行一个空格


² 左大括号之前需有一个空格,其后进行换行;右大括号需重启一行并与当然块的首字母对齐


² 每条样式需新启一行,结束使用分号


² 冒号之前无空格,其后需一个空格


html {
background: #fff;
}

body {
margin: auto;
width: 50%;
}

 


5.  Java


Ø 类前需注明类描述、作者、日期、版本。格式如下:


/**
  Description.
@author <a href=”mailto:LLy219@gmail.com”>LiYuan Li</a>
@version 1.0.0.1, May 10, 2012 @since 0.3.4
*/

Ø 仅引入需要的库且相同功能的库不可引入多个,如:json-2010-06-24.jarjackson-module-json-org-0.9.1.jarjson-lib-2.4-jdk15.jar


Ø Session 严禁随意添加


6.  后续补充


改用 HTML5,CSS3,JavaScript 采用模块化管理,有一些小工具后


Ø html 头部采用 <!DOCTYPE html>


Ø head 标签内首行采用 <meta charset=”utf-8” />


Ø 避免使用内部 JavaScript


Ø 动画、圆角、阴影尽量使用 CSS3,避免使用 JavaScript


Ø 避免使用 iframe


Ø 提交代码前可对所提交代码进行代码规范检查,通过方可提交