通用规范
- TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键占八个空格）。
- CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。
- 文件内容编码均统一为UTF-8。
- CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示。
文件规范
- 多个单词用驼峰命名法
- 避免拼音命名
文档类型声明
-
<!DOCTYPE html>统一声明为html5类型 -
<meta charset="utf-8">编码统一为UTF-8 -
<meta http-equiv="X-UA-Compatible" content="IE=Edge">通知IE使用最新的内核渲染
css和js文件的引用
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 逻辑代码 -->
<!-- 逻辑代码底部 -->
<script src="lib/jquery/jquery-2.1.1.min.js"></script>
</body>
</html>
html属性的排列
- class
- id、name
- data-*
- src、for、type、href
- title、alt
- role
- CLASS --> nHeadTitle --> CLASS遵循小驼峰命名法（little camel-case）
- ID --> n_head_title --> ID遵循名称+_
- NAME --> N_Head_Title --> NAME属性命名遵循首个字母大写+_
表单元素input添加label
<p>
<label for="test">测试</label>
<input type="text" id="test" />
</p>
HTML中对于属性的定义全部使用双引号
CSS书写顺序。
.header {
/* 显示属性 */
display || visibility
list-style
position top || right || bottom || left
z-index
clear
float
/* 自身属性 */
width max-width || min-width
height max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本属性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
};
- 兼容多个浏览器时，将标准属性写在底部。
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性
- 多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。
button.btn,
input.btn,
input[type="button"] {
};
JavaScript规范
- 常量名
MY_NAME - 对象的属性或者方法名
- 类名
Current - 函数名
defaultFun() - 变量名
currentValue - 私有变量名
_private
- 类名
- 下面类型的对象不建议用new构造
new Number
new String
new Boolean
new Object //用{}代替
new Array //用[]代替
- 从
number到string的转换
var a = 1;
var aa = a+'';
- 从
string到number的转换
var a ='1';
var aa = parseInt(a,10); - 从
float到integer的转换
Math.floor(x)//返回一个小于参数x的最大整数，即对浮点数向下取整2.2返回12
Math.round(x)//对x进行四舍五入,12.2返回12
Math.ceil(x)//对浮点数进行向上取整，12.2返回13
- 推荐的拼接方式，避免使用+=
var str = [];
for(var i=0; i<3; i++){
str.push('<div>'+i+'</div>');
}
str.join('');
图片规范
- 命名使用小写英文，数字，_组合
- header_btn.png
- 使用CSS Sprite技术，点我了解更多
注释规范
/*
@author 函数/类作者的姓名
@link 类似于@link标签，用于连接许多其它页面
@param 用大括号中的参数类型描述一个参数
@version 函数/类的版本号
*/
