THREE.JS入门教程(5)你应当知道的十件事
更新时间：2013年01月24日 11:06:33 作者：
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D，本文会让你了解一下使用THREE.JS处理3D/避免SetInterval/使用倒序循环等等，感兴趣的朋友可以了解下哦
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。
0.简介
嗨，这是我的第一篇关于如何写出好的代码的文章。和很多开发者一样，我通过实践学习，但同时我也向其他更有经验的开发者们学习。在过去的几个月中，我在canvas标签上花了很多时间，我想如果把这段时间学到的关于WebGL和JavaScript的小技巧都写下来，一定很有意思。有一些很具体，有一些却很笼统，希望你们喜欢！
1.尽快写一个原型
让我们从简单的开始。现在你有个绝妙的注意，那么你应该尽快就程序里最复杂的部分写一个原型，看看这项技术是否可以实现你的想法。WebGL很强大，因为它可以直接操纵显卡里的GPU，但是也别忘了你需要通过JavaScript才能访问显卡，这比显卡内部运算的效率可是低多了。事实上，你的天才想法很可能被这种简单事情击败。
2.使用THREE.JS处理3D
就像我的朋友Hakim一样，我也完全理解我们正使用的技术的底层细节。理解表面之下的东西是很重要的，但是如果你使用three.js，它为你免去了如此多的烦恼。你可以将它用于Canvas，WebGL还有SVG，你也应该找到哪种方式合适你的需求。
3.避免SetInterval
这对所有使用JavaScript创建动画的人来说，都是很重要的一点。为什么？假定你设定每20毫秒后执行一次某个函数，而这个函数需要执行超过20毫秒的时间，那么20ms之后，浏览器不会在乎，而是直接开始下一次执行。至少你可以使用SetTimeout来设置，在某个函数执行完之后，再次执行它。
事实上，有一个更加新潮却还是半成品的函数，叫做requestAnimationFrame，它很棒。它很类似于setTimeOut函数，除了在这两个方面：当标签页失去焦点时，它就不再运行了；现在这个函数还是依赖于浏览器的，标准以后还有可能变化。如果你想要更多的信息，可以访问Paul Irish的博客。
4.使用倒序循环
这是个不错的小技巧，可以让你的循环更快。使用倒序，而且使用while循环。比如，这个循环：
for(var a = 0; a < arr.length; a++) {
// 做一些什么
}
它的执行效率不如下面这个循环：
// 假设数组arr存在
var aLength = arr.length;
while(aLength--) {
// 做一些什么
}
这可能没帮你省多少开销，因为执行的效率主要还是依赖于你在循环体里面干了什么。但如果你想程序的不必要开销减少到最后一个字节，后一个循环肯定赢。
实话说，主要影响程序执行效率的还是数组缓存的长度。你可以（也确实应该）去看看JSPerf去了解这一点，以及其他影响JavaScript性能的因素。
5.使用纹理
在WebGL里面把物体的任意一个细节都画出来看上去很诱人，但是，如果有可能的话，你应当注意一下你是否能够使用纹理，因为它能够极大地提高性能。在某些特定的情况下，比如阴影或者模糊效果，你也许不得不使用纹理，但在其他时候，你也应该时时关注你是否可以使用纹理。
6.使用缓存
这一点我在自己的试验力试了很多，在帧循环中，你应当避免引用变量、对象或者其他任何东西。基于这点原因，很值得把你的模型、顶点全部缓存起来，这样在渲染动画的时候你就可以快速地访问到它们。
7.禁用选中
我爱这一小段代码，我把它放到任何包含Canvas或WebGL的页面中。
// 禁用鼠标选中DOM元素
document.onselectstart = function() {
return false;
};
你也可能只想在Canvas控件中禁用选中。这段是我在那些Canvas占据了整个屏幕的项目中使用的代码。
8.避免在JavaScript中定义CSS
现在，在JavaScript中定义CSS简直太方便了，尤其是你使用JQuery的时候
// 尽量不要这样做
$("#someid").css({
position: 'relative',
height: '30px',
width: '300px',
backgroundColor: '#A020F0'
});
问题是这样做之后，你的JavaScript代码中很快就充斥着各种类型的CSS定义，而你同时又使用*.css文件来定义CSS，潜在的问题很难被发现。更好的方法是：使用class模块化CSS，而且只在JavaScript中定义那些不能预知的CSS类。
9.在对象中定义回调函数
我爱下面这段代码，这绝不是我自己想出来的，但它是如此整洁美观。如果你有一大堆回调函数要用，你也许会这样用的：
$("#someid").click(function() {
// 回调函数
// 返回false在JQuery中会阻止消息的传递和默认行为的放生
return false;
});
或者，你会回调一个在代码其他地方定义的松散的函数，比如这样
$("#someid").click(mySuperFunction);
function mySuperFunction(event) {
// 在这里做很多事情
return false;
}
这样做会有一些问题。第一段代码中，你在某个事件上绑定了匿名函数，你很难将该函数再从事件上解除下来。你当然可以解除某个事件上的所有函数，但你可能在它上面绑定了多个函数，而你只想解除一个。在第二种情况下，你的函数名污染了全局变量空间，代码的可维护性降低了。所以，考虑这样做：
$("#someid").click(callbacks.mySuperFunction);
// 所有的回调函数都在callbacks对象中
var callbacks = {
mySuperFunction:function(event) {
// 更多地工作
return false;
}
}
// 解除某个函数的绑定
$("#someid").unbind('click', callbacks.mySuperFunction);
这样做整洁又干净，而且避免了上面提到的两个问题。
10.链式三元运算符
我完全是从Paul Irish的《JQuery，你应该知道的11件事》中学到这个的。这非常好用，你也应该会喜欢。我们经常这样做：
// 根据a的值为numberBasedOnA赋值
// 如果a大于5，则赋值200，否则赋值38
var numberBasedOnA = a > 5 ? 200 : 38;
但如果你想这样做，比如，当值为多少时如何，当值大于多少时如何，当值更加大的时候如何，明白吗？在这种情况下，链式三元运算符非常好用：
var numberBasedOnA =
a < 5 ? 200 :
a < 7 ? 38 :
a < 11 ? 15 :
a < 15 ? 49 :
64;
// 比这样做更有效率
// when a >=15
0.简介
嗨，这是我的第一篇关于如何写出好的代码的文章。和很多开发者一样，我通过实践学习，但同时我也向其他更有经验的开发者们学习。在过去的几个月中，我在canvas标签上花了很多时间，我想如果把这段时间学到的关于WebGL和JavaScript的小技巧都写下来，一定很有意思。有一些很具体，有一些却很笼统，希望你们喜欢！
1.尽快写一个原型
让我们从简单的开始。现在你有个绝妙的注意，那么你应该尽快就程序里最复杂的部分写一个原型，看看这项技术是否可以实现你的想法。WebGL很强大，因为它可以直接操纵显卡里的GPU，但是也别忘了你需要通过JavaScript才能访问显卡，这比显卡内部运算的效率可是低多了。事实上，你的天才想法很可能被这种简单事情击败。
2.使用THREE.JS处理3D
就像我的朋友Hakim一样，我也完全理解我们正使用的技术的底层细节。理解表面之下的东西是很重要的，但是如果你使用three.js，它为你免去了如此多的烦恼。你可以将它用于Canvas，WebGL还有SVG，你也应该找到哪种方式合适你的需求。
3.避免SetInterval
这对所有使用JavaScript创建动画的人来说，都是很重要的一点。为什么？假定你设定每20毫秒后执行一次某个函数，而这个函数需要执行超过20毫秒的时间，那么20ms之后，浏览器不会在乎，而是直接开始下一次执行。至少你可以使用SetTimeout来设置，在某个函数执行完之后，再次执行它。
事实上，有一个更加新潮却还是半成品的函数，叫做requestAnimationFrame，它很棒。它很类似于setTimeOut函数，除了在这两个方面：当标签页失去焦点时，它就不再运行了；现在这个函数还是依赖于浏览器的，标准以后还有可能变化。如果你想要更多的信息，可以访问Paul Irish的博客。
4.使用倒序循环
这是个不错的小技巧，可以让你的循环更快。使用倒序，而且使用while循环。比如，这个循环：
复制代码 代码如下:
for(var a = 0; a < arr.length; a++) {
// 做一些什么
}
它的执行效率不如下面这个循环：
复制代码 代码如下:
// 假设数组arr存在
var aLength = arr.length;
while(aLength--) {
// 做一些什么
}
这可能没帮你省多少开销，因为执行的效率主要还是依赖于你在循环体里面干了什么。但如果你想程序的不必要开销减少到最后一个字节，后一个循环肯定赢。
实话说，主要影响程序执行效率的还是数组缓存的长度。你可以（也确实应该）去看看JSPerf去了解这一点，以及其他影响JavaScript性能的因素。
5.使用纹理
在WebGL里面把物体的任意一个细节都画出来看上去很诱人，但是，如果有可能的话，你应当注意一下你是否能够使用纹理，因为它能够极大地提高性能。在某些特定的情况下，比如阴影或者模糊效果，你也许不得不使用纹理，但在其他时候，你也应该时时关注你是否可以使用纹理。
6.使用缓存
这一点我在自己的试验力试了很多，在帧循环中，你应当避免引用变量、对象或者其他任何东西。基于这点原因，很值得把你的模型、顶点全部缓存起来，这样在渲染动画的时候你就可以快速地访问到它们。
7.禁用选中
我爱这一小段代码，我把它放到任何包含Canvas或WebGL的页面中。
复制代码 代码如下:
// 禁用鼠标选中DOM元素
document.onselectstart = function() {
return false;
};
你也可能只想在Canvas控件中禁用选中。这段是我在那些Canvas占据了整个屏幕的项目中使用的代码。
8.避免在JavaScript中定义CSS
现在，在JavaScript中定义CSS简直太方便了，尤其是你使用JQuery的时候
复制代码 代码如下:
// 尽量不要这样做
$("#someid").css({
position: 'relative',
height: '30px',
width: '300px',
backgroundColor: '#A020F0'
});
问题是这样做之后，你的JavaScript代码中很快就充斥着各种类型的CSS定义，而你同时又使用*.css文件来定义CSS，潜在的问题很难被发现。更好的方法是：使用class模块化CSS，而且只在JavaScript中定义那些不能预知的CSS类。
9.在对象中定义回调函数
我爱下面这段代码，这绝不是我自己想出来的，但它是如此整洁美观。如果你有一大堆回调函数要用，你也许会这样用的：
复制代码 代码如下:
$("#someid").click(function() {
// 回调函数
// 返回false在JQuery中会阻止消息的传递和默认行为的放生
return false;
});
或者，你会回调一个在代码其他地方定义的松散的函数，比如这样
复制代码 代码如下:
$("#someid").click(mySuperFunction);
function mySuperFunction(event) {
// 在这里做很多事情
return false;
}
这样做会有一些问题。第一段代码中，你在某个事件上绑定了匿名函数，你很难将该函数再从事件上解除下来。你当然可以解除某个事件上的所有函数，但你可能在它上面绑定了多个函数，而你只想解除一个。在第二种情况下，你的函数名污染了全局变量空间，代码的可维护性降低了。所以，考虑这样做：
复制代码 代码如下:
$("#someid").click(callbacks.mySuperFunction);
// 所有的回调函数都在callbacks对象中
var callbacks = {
mySuperFunction:function(event) {
// 更多地工作
return false;
}
}
// 解除某个函数的绑定
$("#someid").unbind('click', callbacks.mySuperFunction);
这样做整洁又干净，而且避免了上面提到的两个问题。
10.链式三元运算符
我完全是从Paul Irish的《JQuery，你应该知道的11件事》中学到这个的。这非常好用，你也应该会喜欢。我们经常这样做：
复制代码 代码如下:
// 根据a的值为numberBasedOnA赋值
// 如果a大于5，则赋值200，否则赋值38
var numberBasedOnA = a > 5 ? 200 : 38;
但如果你想这样做，比如，当值为多少时如何，当值大于多少时如何，当值更加大的时候如何，明白吗？在这种情况下，链式三元运算符非常好用：
复制代码 代码如下:
var numberBasedOnA =
a < 5 ? 200 :
a < 7 ? 38 :
a < 11 ? 15 :
a < 15 ? 49 :
64;
// 比这样做更有效率
// when a >=15
相关文章
JavaScript变量有2中类型：原始类型和引用值类型。2010-09-09
这篇文章主要介绍了用JavaScript显示浏览器客户端信息的超相近教程,包含了从返回桌面浏览器客户端内核信息到移动端浏览器以及其使用的系统版本信息等内容,倾力推荐!需要的朋友可以参考下2015-06-06
这篇文章主要介绍了js检测浏览器版本、核心、是否移动端示例,需要的朋友可以参考下2014-04-04
下面小编就为大家带来一篇浅谈String.valueOf()方法的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
对象是一种复合值，它将很多值（原始值或其他对象）聚合在一起，可通过属性名访问这些值。而属性名可以是包含空字符串在内的任意字符串。JavaScript对象也可以称作一种数据结构2016-07-07
这篇文章主要介绍了JavaScript中日期的相关操作方法总结,是JS入门学习中的基础知识,需要的朋友可以参考下2015-10-10
JavaScript高级程序设计（第3版）学习笔记3 js简单数据类型
数据类型是编程语言的砖瓦，是所有你能想象到的复杂抽象的基础，在现代编程语言中，除了语言本身内置的一些简单数据类型外，基本上都提供了用于自定义数据类型的语言机制（在C中也可以利用结构体来实现），这些机制在一定程度上也决定了该语言的流行度和生命力2012-10-10
商城网站包括APP端中把鼠标光标移动到预览图上就会看到这部分商品图片放大了，这就是JavaScript实现的放大镜特效，今天我们也来实现一波2021-11-11
这篇文章主要介绍了重写window对象的方法,需要的朋友可以参考下2014-12-12
本文给大家介绍的是Array.prototype.forEach()的使用方法示例，希望对大家学习javascript能够有所帮助。2016-03-03
最新评论