- 命名規(guī)范:
常量名 全部大寫并單詞間用下劃線分隔 如:CSS_BTN_CLOSE、TXT_LOADING 對象的屬性或方法名
小駝峰式(little camel-case) 如:init滴铅、bindEvent、updatePosition 示例:Dialog.prototype = {
init: function () {},
bindEvent: function () {},
updatePosition: function () {}
…
};
類名(構造器) -->小駝峰式但首字母大寫 -->如:Current、DefaultConfig 函數(shù)名 -->小駝峰式 -->如:current()、defaultConfig() 變量名 -->小駝峰式 -->如:current畦攘、defaultConfig 私有變量名 -->小駝峰式但需要用_開頭 -->如:_current集绰、_defaultConfig 變量名的前綴 -->續(xù)
- 代碼格式:
"()"前后需要跟空格
"="前后需要跟空格
","后面需要跟空格
JSON對象需格式化對象參數(shù)
if、while绿鸣、for疚沐、do語句的執(zhí)行體用"{}"括起來
- "{}"格式如下:
if (a==1) {
//代碼
};
- 避免額外的逗號:
var arr = [1,2,3,];
for-in
循環(huán)體中必須用hasOwnProperty
方法檢查成員是否為自身成員,避免來自原型鏈上的污染潮模。
- 長語句可考慮斷行:
TEMPL_SONGLIST.replace('{TABLE}', da['results'])
.replace('{PREV_NUM}', prev)
.replace('{NEXT_NUM}', next)
.replace('{CURRENT_NUM}', current)
.replace('{TOTAL_NUM}', da.page_total);
為了避免和JSLint
的檢驗機制沖突亮蛔,“.”或“+”這類操作符放在行尾。
/*global alert: true, console: true, top: true, setTimeout: true */
- 使用嚴格的條件判斷符擎厢。用===代替==究流,用!==代替!=辣吃,避免掉入==造成的陷阱在條件判斷時,這樣的一些值表示
false
芬探。
null
undefined與null相等
字符串''
數(shù)字0
NaN
在==時齿尽,則會有一些讓人難以理解的陷阱。
undefined與null相等
一個是number一個是string時灯节,會嘗試將string轉(zhuǎn)換為number
嘗試將boolean轉(zhuǎn)換為number
0或1
嘗試將Object轉(zhuǎn)換成number或string
而這些取決于另外一個對比量循头,即值的類型,所以對于0炎疆、空字符串的判斷卡骂,建議使用===
。===會先判斷兩邊的值類型形入,類型不匹配時為false
全跨。
- 下面類型的對象不建議用new構造:
new Number
new String
new Boolean
new Object //用{}代替
new Array //用[]代替
引用對象成員用obj.prop代替obj["prop"],除非屬性名是變量亿遂。
- 從number到string的轉(zhuǎn)換:
/** 推薦寫法*/
var a = 1;
typeof(a); //"number"
console.log(a); //1
var aa=a+'';
typeof(aa); //"string"
console.log(aa); //'1'
/** 不推薦寫法*/
new String(a)或a.toString()
從string到number的轉(zhuǎn)換浓若,使用parseInt,必須顯式指定第二個參數(shù)的進制蛇数。
/** 推薦寫法*/
var a = '1';
var aa = parseInt(a,10);
typeof(a); //"string"
console.log(a); //'1'
typeof(aa); //"number"
console.log(aa); //1
從float到integer的轉(zhuǎn)換挪钓。
/** 推薦寫法*/
Math.floor/Math.round/Math.ceil
/** 不推薦寫法*/
parseInt
字符串拼接應使用數(shù)組保存字符串片段,使用時調(diào)用join方法耳舅。避免使用+或+=的方式拼接較長的字符串碌上,每個字符串都會使用一個小的內(nèi)存片段,過多的內(nèi)存片段會影響性能浦徊。
/**推薦的拼接方式array的push馏予、join*/
var str=[],
list=['測試A','測試B'];
for (var i=0 , len=list.length; i < len; i++) {
str.push( '<div>'+ list[i] + '</div>');
};
console.log(str.join('')); //<div>測試A</div><div>測試B</div>
/** 不推薦的拼接方式+=*/
var str = '',
list=['測試A','測試B'];
for (var i = 0, len = list.length; i< len; i++) {
str+='<div>' + list[i] + '</div>';
};
console.log(str); //<div>測試A</div><div>測試B</div>
- 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?/li>
不要使用with,void盔性,evil霞丧,eval_r,innerText
- 注重
HTML
分離, 減小reflow
, 注重性能冕香。
圖片規(guī)范:
- 命名應用小寫英文蛹尝、數(shù)字、_組合暂筝,便于團隊其他成員理解箩言。
header_btn.gif
header_btn2.gif
- 頁面元素類圖片均放入
img
文件夾,- 測試用圖片放于
img/testimg
文件夾,psd
源圖放入img/psdimg
文件夾焕襟。- 圖片格式僅限于
gif
、png
饭豹、jpg
等鸵赖。- 用
png
圖片做圖片時,要求圖片格式為png-8
格式,若png-8
實在影響圖片質(zhì)量或其中有半透明效果,請為ie-6
單獨定義背景务漩,并盡量避免使用半透明的png
圖片。- 背景圖片請盡可能使用
sprite
技術, 減小http
請求它褪。
注釋規(guī)范:
JAVASCRIPT饵骨、CSS
文件注釋需要標明作者、文件版本茫打、創(chuàng)建/修改時間居触、重大版本修改記錄、函數(shù)描述老赤、文件版本轮洋、創(chuàng)建或者修改時間、功能抬旺、作者等信息弊予。
/* * 注釋塊 */
- 中間可添加如下信息
@file 文件名
@addon 把一個函數(shù)標記為另一個函數(shù)的擴張,另一個函數(shù)的定義不在源文件中
@argument 用大括號中的自變量類型描述一個自變量
@author 函數(shù)/類作者的姓名
@base 如果類是繼承得來开财,定義提供的類名稱
@class 用來給一個類提供描述汉柒,不能用于構造器的文檔中
@constructor 描述一個類的構造器
@deprecated 表示函數(shù)/類已被忽略
@exception 描述函數(shù)/類產(chǎn)生的一個錯誤
@exec @extends 表示派生出當前類的另一個類
@fileoverview 表示文檔塊將用于描述當前文件,這個標簽應該放在其它任何標簽之前
@final 指出函數(shù)/類
@ignore 讓jsdoc忽視隨后的代碼
@link 類似于@link標簽责鳍,用于連接許多其它頁面
@member 定義隨后的函數(shù)為提供的類名稱的一個成員
@param 用大括號中的參數(shù)類型描述一個參數(shù)
@private 表示函數(shù)/類為私有碾褂,不應包含在生成的文檔中
@requires 表示需要另一個函數(shù)/類
@return 描述一個函數(shù)的返回值
@see 連接到另一個函數(shù)/類
@throws 描述函數(shù)/類可能產(chǎn)生的錯誤
@type 指定函數(shù)/成員的返回類型
@version 函數(shù)/類的版本號
開發(fā)及測試工具約定:
- 編碼格式化,三碼統(tǒng)一历葛。
- 測試工具: 前期開發(fā)僅測試
FireFox & IE6 & IE7 & IE8 & IE9 & Opera & Chrome & Safari