本规范共分为三部分，前端通用编码规范 css编码规范 html编码规范 javascript编码规范
前端开发涉及的所文件统一使用utf-8编码
文件头部必须加上文件申明信息，必须包括文件描述、作者、最后更新(更新人+时间)
/* *@Description: 头部公用样式 *@Author: Aseoe *@Update: Aseoe(2015-03-01 17:22) */
通用 Hack
.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }
//显示属性 * display * list-style * position * float * clear //自身属性 * width * height * margin * padding * border * background //文本属性 * color * font * text-decoration * text-align * vertical-align * white-space * other text * content display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index float clear width max-width || min-width height max-height || min-height overflow || clip margin : margin-top || margin-right || margin-bottom || margin-left padding : padding-top || padding-right || padding-bottom || padding-left outline : outline-color || outline-style || outline-width border background : background-color || background-image || background-repeat || background-attachment || background-position color font : font-style || font-variant || font-weight || font-size || line-height || font-family font : caption | icon | menu | message-box | small-caption | status-bar text-decoration text-align vertical-align white-space text-indent text-overflow line-height content cursor zoom
页面文档类型统一使用HTML5 DOCTYPE. 代码如下：
<!doctype html>
声明方法遵循HTML5的规范. 代码如下：
<meta charset="utf-8" />
使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义
元素的标签和属性名必须小写, 属性值必须加双引号
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>csc example page</title>
<link rel="stylesheet" href="css_example_url" />
<script src="js_example_url"></script>
</head>
<body>
<div class="header">
页头
</div>
<div class="content">
主体
</div>
<div class="footer">
页尾
</div>
<script>
// 你的代码
</script>
</body>
</html>
JavaScript程序应独立保存在后缀名为.js的文件中。
js代码不应该被包含在HTML文件中,除非这是段特定只属于此部分的代码。在HTML中的js代码会明显增加文件大小,而且也不能对其进行缓存和压缩。
filename.js应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。也没有必要使用 language或者type属性。MIME类型是由服务器而非scripttag来决定的。每个js文件的文件头都必须包含@author, 建议加上@version
/** * jQuery JavaScript version 1.0 * author Aseoe * Date: 2015.03.01 10:34 */
私有函数，建议添加 @ignore 让文档输出时可以忽略这段注释
函数内部调用其他的函数，建议加上@see Function 来对上下文做索引
每个带参数的函数必须包含 @param
/**
*基类 Shape
* @constructor
* @base Shape
* @param args
* @return returnValue
*/
function Circle(args){
// do some thing
return returnValue
}
构造函数 必须加上 @constructor（同上）
每个有返回值的函数必须包含 @return（同上）
在js中，标识符的命名规则是：由包含字母、数字和下划线组成，且第一个字符必须是字母开头或下划线或＄（一般不要用＄）符。不能与 JavaScript 保留字（Key Words，凡是可以用来做 JavaScript 命令的字都是保留字）重复；在js中变量是区分大小写的；命名规则参考下表：
| 结构 | 规则 | 样例 |
|---|---|---|
| 构造函数 | 驼峰式 | ModuleClass() |
| 公有方法 | 混合式 | getPosition() |
| 公有变量 | 混合式 | frameStyle |
| 常量 | 大写式 | DEFAULT_FRAME_LAYOUT |
| 私有方法 | 混合 | _mixedCase（） |
| 私有变量 | 混合 | _mixedCase |
| 方法（method）参数 | 混合 | _mixedCase, mixedCase |
| 本地（local）变量 | 混合 | _mixedCase, mixedCase |
爱思资源网提倡4 个空格。这是因为直到现在还没有统一的标准来定义 TAB 键所代替的空白大小，有些编辑器解析为 4 个空格大小，有些则解析为 8 个。因而用不同的编辑器查看代码，可能造成格式混乱。当然 TAB 简单易用，为解决这问题，建议在设置开发环境时，将编辑器里的 TAB 快捷键重新设置为 4 个空格。据了解 Eclipse, Vi, Nodepad++，Editplus, UltraEdit 等流行的编辑器，均提供了此功能。
for(var i = 0 ; i < 9 ; i++){
statements;
}
var str = "value1"; //声明变量并赋值
var obj = new Object(); //创建一个对象的实例
var fn=function fname(){statements;} //命名表达式
var person={name:"admin",age:26}; //字面量声明方式
if (condition) {
statements;
}
if (condition) {
statements;
} else {
statements;
}
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
switch (condition) {
case ABC:
statements;
/* falls through */
case DEF:
statements;
break;
case XYZ:
statements;
break;
default:
statements;
break;
}
while (condition) {
statements;
update; // 更新循环变量
}
for(var i = 0 ; i < 9 ; i++){
statements;
}
do {
statements;
update; // 更新循环变量
} while (condition);
注：只少执行一次循环 for(var i in Object){
console.log("i" + " : " + Object[i]); //输出对象的所有属性值
}
while (condition) {
if(condition){
break; //跳出循环体，程序往下执行
}
statements;
update; // 更新循环变量
}
while (condition) {
if(condition){
continue; //终止本次循环，执行下一次循环
}
statements;
update; // 更新循环变量
}
with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
try {
statements;
} catch (ExceptionClass ec) {
statements;
} finally {
statements;
}
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
解决方法：var event = event || window.event;
example:
function test(event) {
var event = event || window.event;
//do Something
}