本規范共分為三部分，前端通用編碼規范 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
}