1. 程式人生 > >JS開發中的幾個彰顯水準的技巧

JS開發中的幾個彰顯水準的技巧

1.使用requestAnimationFrame

JavaScript建立動畫時使用requestAnimationFrame幀動畫,它很類似於setTimeOut函式,並且當標籤頁失去焦點時,它就不再執行

 一般用法:

function render(){
	//TODO
	requestAnimationFrame(render);
}
render();

 啟動/停止的用法之一:

//啟動/停止的方法:
var requestId;

function loop() {
	...
	// do stuff
	...
	requestId = window.requestAnimationFrame(loop, canvas);
}

function start() {
	if (!requestId) {
		loop();
	}
}

function stop() {
	if (requestId) {
		window.cancelRequestAnimationFrame(requestId);
		requestId = undefined;
	}
}

2.使用while迴圈

我們經常使用倒序迴圈:

for(var i=0; i< array.length; i++){
	//Do Something
}

使用while迴圈效率更高:

var i = array.length;
while(i--) {
  //Do Something
}

3.禁用選中

當canvas佔據了整個螢幕,我們想在Canvas控制元件中禁用選中,可是有如下程式碼:

// 禁用滑鼠選中DOM元素
document.onselectstart = function() {
  return false;
};

4.定義回撥

我們經常這樣設定回撥函式:

$("#id").click(function() {
  // 回撥函式
  // 返回false在JQuery中會阻止訊息的傳遞和預設行為的放生
  return false;
});

    或者:

$("#id").click(myFunction);
function myFunction(event) {
  //Do Something
  return false;
}

 我們應儘量像如下方式設定回撥函式,這樣不僅可以輕易將函式從事件上解除,而且可以避免汙染全域性變數空間,同時增加程式碼的可維護性:

$("#id").click(callbacks.myFunction);
//所有的回撥函式都在callbacks物件中
var callbacks = {
	myFunction:function(event) {
		//Do Something
		return false;
	}
}
// 解除某個函式的繫結
$("#someid").unbind('click', callbacks.myFunction);

5.鏈式三元運算

我們經常這樣做:

var number = a > 5 ? 200 : 38;

 其實我們還可以這樣做:

var number =
	a < 5 ? 200 :
	a < 7 ? 38 :
	a < 11 ? 15 :
	a < 15 ? 49 :
	64;
//比使用when效率更高
//when a >=15