JS开发中的几个彰显水准的技巧

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #ViewUI

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了五种提高Web动画及JavaScript性能的方法：利用requestAnimationFrame优化动画，通过while循环代替for循环提高遍历效率，禁用Canvas上的文本选择，合理定义回调函数以增强代码可维护性，以及使用链式三元运算简化条件判断。

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