`
18211103738
  • 浏览: 83004 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

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

 

分享到:
评论

相关推荐

    js技巧 javaScript编码技巧

    JavaScript,简称JS,是网页开发中的重要脚本语言,它为网页添加动态功能,使得用户交互更为丰富。本文将深入探讨一些JS编码技巧,帮助开发者提升网站特效的实现能力。 一、变量与数据类型 在JavaScript中,变量...

    JS常见错误及开发技巧

    JavaScript,简称JS,是网页开发中的重要脚本语言,它允许开发者实现动态效果和交互功能。在实际开发中,常见的错误和编码规范是确保代码质量和兼容性的重要因素。以下是一些关于JS开发的关键知识点和技巧: 1. **...

    Node.js硬实战 115个核心技巧.pdf

    以上只是《Node.js硬实战 115个核心技巧》中部分知识点的概述,全书内容更为详实,覆盖了Node.js开发的各个方面,无论你是初学者还是有经验的开发者,都能从中受益匪浅,提升自己的Node.js实战技能。

    JavaScript设计模式与开发实践.pdf

    本书《JavaScript设计模式与开发实践》是JavaScript语言的设计模式和开发实践的指南,旨在帮助初、中、高级Web前端开发人员和想往架构师晋级的中高级程序员,掌握JavaScript设计模式和开发实践的知识。本书共分为三...

    Three.js开发指南pdf 最新版

    《Three.js开发指南》是针对WebGL库Three.js的一本详尽教程,旨在帮助开发者深入理解和运用这个强大的3D图形库。Three.js是JavaScript的一个开源项目,它为Web浏览器提供了简单易用的接口,用于创建复杂的3D场景、...

    three.js开发指南 pdf

    1. **three.js简介**:three.js是一个开源的JavaScript库,基于WebGL,用于在浏览器中呈现3D图形。它为开发者提供了丰富的API和工具,以实现交互式的3D内容。 2. **基本概念**:书中会讲解3D坐标系、摄像机、场景、...

    pdf版,Node.js开发实战详解

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它让JavaScript开发者可以在服务器端执行代码,打破了传统的JavaScript只能在浏览器端运行的限制。这本《Node.js开发实战详解》电子书,显然是为了帮助那些...

    基于avalon225js封装了几个常用组件

    本文将深入探讨基于Avalon.js 2.2.5版本封装的几个常用组件,以及如何在实际开发中应用这些组件。 标题中的"基于avalon2.2.5js封装了几个常用组件"意味着开发者已经对Avalon.js进行了二次开发,创建了一些便于日常...

    Three.js开发指南电子版

    Three.js开发指南电子版,让你更好的学习理解threejs,Three.js开发指南电子版,让你更好的学习理解threejs

    Vue.js前端开发 PDF

    Vue.js是目前非常流行的前端开发框架之一,被誉为前端三大框架之一,另外两个是React和Angular。Vue.js的设计理念是简洁、易用且高效,它旨在通过最小的学习曲线提供强大的功能,使得开发者能够快速构建交互式的用户...

    基于pdf.js在android内部显示pdf文件

    要在Android应用中使用`pdf.js`,我们需要以下几个步骤: 1. **获取`pdf.js`库**:从GitHub上下载`pdf.js`的最新版本,或者通过npm命令`npm install pdfjs-dist`安装。在本例中,我们已经有一个名为`PDFWebView-...

    Three.js引擎开发:Three.js动画系统实现-(10).Three.js动画的高级技巧:自定义插值器.docxThree.js引擎开发:Three.js动画系统实现-(11).Three

    Three.js引擎开发:Three.js动画系统实现_(10).Three.js动画的高级技巧:自定义插值器.docx Three.js引擎开发:Three.js动画系统实现_(11).Three.js动画系统的调试与测试.docx Three.js引擎开发:Three.js动画...

    three.js开发指南pdf

    three.js开发指南源码: 首部全面讲解Three.js开发的实用指南,循序渐进讲解Three.js的各种功能,通过大量交互示例,深入探索使用开源的Three.js库创建绚丽三维图形的实用方法和技巧。 在过去的两年里,浏览器变得...

    两个比较好用的Eclipse中javascript插件jsEditor jsEclipse

    总的来说,jsEditor和jsEclipse都是Eclipse中不可或缺的JavaScript开发工具,它们通过丰富的特性和服务,帮助开发者提高生产力,降低出错概率,使JavaScript编程更加轻松愉快。无论你是新手还是经验丰富的开发者,都...

    这个项目收集移动端开发所需要的一些资源与小技巧

    在移动端开发领域,JavaScript开发和混合移动开发是两个至关重要的概念。这个名为"mobileTech-master"的项目显然是一个专注于提供移动端开发资源和技巧的集合,旨在帮助开发者提升他们的技能和效率。下面,我们将...

    Cocos2d-JS开发之旅

    6. **脚本编程**:深入讲解JavaScript在Cocos2d-JS中的应用,包括对象模型、类继承和模块化开发。 7. **性能优化**:提供性能调优的技巧和最佳实践,确保游戏在各种设备上流畅运行。 8. **发布与打包**:指导如何将...

    Node.js开发实战详解.pdf

    《Node.js开发实战详解》是一本深度探讨Node.js开发技术的专业书籍,旨在为读者提供一个全面、详实的学习路径,引领他们深入理解并熟练运用Node.js进行web开发。本书不仅适合初学者,也对有一定经验的开发者有很高的...

    js开发象棋游戏脚本源码文件

    这款"js开发象棋游戏脚本源码文件"提供了完整的实现,让你能够直接运行游戏,同时也为学习和研究JavaScript编程技巧提供了宝贵的资源。 首先,让我们关注一下这个项目的组成部分。在压缩包中,有四个主要文件夹或...

    ReactNative用javascript开发移动应用.中文完整版.pdf

    React Native将React.js的组件化开发方式引入到移动应用开发中,使得Web开发者可以运用他们熟悉的JavaScript和React技能,同时享受到接近原生应用的性能。它的核心是基于React组件库,开发者可以通过定义可重用的...

Global site tag (gtag.js) - Google Analytics