天天看點

js代碼編寫規範

1.避免隐式的全局變量

function foo() {
	var a = b = 0; //=> var a = (b = 0)
}
           

上面的例子中a為foo内的局部變量,b因為未在foo内聲明,成為隐式的全局變量。

使用var建立的全局變量可以删除,隐式的全局變量不可以删除。

var a = 1;
b = 2;//隐式
function foo() {
	c = 3;//隐式
}
delete a;
delete b;
delete c;

typeof a;//"number"
typeof b;//"undefined"
typeof c;//"undefined"
           

2. 單一var模式

隻使用一個var在函數頂部聲明所需變量

3. for循環

先計算出數組(或容器)長度緩存起來,避免每次循環都計算一次長度

4. for-in循環

推薦使用正常的for循環來周遊數組,使用for-in循環處理對象。

例:過濾對象中Clone的方法

for(var i in obj){
	if(Object.prototype.hasOmnProperty.call(obj,i){//練習一下call
		console.log(i,":",man[i]);
	}
}
           

5. 不要增加内置的原型

原因:影響可維護性(添加屬性與原生屬性沖突),給原型添加的屬性在沒有使用

hasOwnProperty()

時可能在循環中出現。

例外情況:

if(typeof Object.prototype.myMethod !== "function") {//自定義的屬性或方法并未存在
	Object.prototype.myMethod = function() {
	}
}
           

6. 避免使用隐式類型轉化

即在資料比較時使用

===

取代

==

fault == 0;//true
 == 0; //true
           

7. 避免使用

eval()

eval()

存在安全隐患,可能執行一些惡意代碼

8. 使用

parseInt()

的數值約定

如果不進行數值約定,當字元串(year)的第一個值為0時,字元串會被當做一個八進制數來處理,等同于

year = parseInt(year, 8);

9. 大括号和return

//警告:未預期的傳回值
function foo() {
	return
	{
		name: 'xiaowang"
	};
}
           

等價于

function foo() {
	return undefined;//隐式添加了一個分号,未通路到下面的代碼
//	{
//		name: 'xiaowang"
//	};
}
           

10. 命名模式

構造函數使用大駝峰,函數和方法名使用小駝峰。使用下劃線結尾表明私有變量,使用一個下劃線字首辨別受保護屬性。

11. 編寫API文檔

YUIDoc

12. 初始化時分支

var utils = {
	addListener: function (el, type, fn) {
		if (typeof window.addEventListener === 'function'){
			el.addEventListener(type, fn, false);
		}else if(typeof document.attachEvent === 'function') {	//IE浏覽器
			el.attachEvent('on' + type, fn);
		}else {	//更早版本的浏覽器
			el['on' + type] = fn;
		}
	}
	removeListener: function (el, type, fn) {
		//.......
	}
}
           

此段代碼效率低下,每次調用

utils.addListener()

removeListener()

時都要進行重複的條件判斷,優化方法如下:

var utils = {
	addListener: null,
	removeListener: null
}
if (typeof window.addEventListener === 'function'){
	utils.addListener = function (el, type, fn) {
		el.addEventListener(type, fn, false);
	}
	utils.removeListener = function (el, type, fn) {
		el.removeEventListener(type, fn, false);
	}
}else if(typeof document.attachEvent === 'function') {	//IE浏覽器
	utils.addListener = function (el, type, fn) {
		el.attachEvent('on' + type, fn);
	}
	utils.removeListener = function (el, type, fn) {
		el.detachEvent(type, fn);
	}
}else {	//更早版本的浏覽器
	utils.addListener = function (el, type, fn) {
		el['on' + type] = fn;
	}
	utils.removeListener = function (el, type, fn) {
		el['on' + type] = null;
	}
}