Three.js是一個偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D。但是目前這項技術還處在發(fā)展階段，資料極為匱乏，愛好者學習基本要通過Demo源碼和Three.js本身的源碼來學習。
0.簡介
嗨，這是我的第一篇關于如何寫出好的代碼的文章。和很多開發(fā)者一樣，我通過實踐學習，但同時我也向其他更有經(jīng)驗的開發(fā)者們學習。在過去的幾個月中，我在canvas標簽上花了很多時間，我想如果把這段時間學到的關于WebGL和JavaScript的小技巧都寫下來，一定很有意思。有一些很具體，有一些卻很籠統(tǒng)，希望你們喜歡！
1.盡快寫一個原型
讓我們從簡單的開始?，F(xiàn)在你有個絕妙的注意，那么你應該盡快就程序里最復雜的部分寫一個原型，看看這項技術是否可以實現(xiàn)你的想法。WebGL很強大，因為它可以直接操縱顯卡里的GPU，但是也別忘了你需要通過JavaScript才能訪問顯卡，這比顯卡內(nèi)部運算的效率可是低多了。事實上，你的天才想法很可能被這種簡單事情擊敗。
2.使用THREE.JS處理3D
就像我的朋友Hakim一樣，我也完全理解我們正使用的技術的底層細節(jié)。理解表面之下的東西是很重要的，但是如果你使用three.js，它為你免去了如此多的煩惱。你可以將它用于Canvas，WebGL還有SVG，你也應該找到哪種方式合適你的需求。
3.避免SetInterval
這對所有使用JavaScript創(chuàng)建動畫的人來說，都是很重要的一點。為什么？假定你設定每20毫秒后執(zhí)行一次某個函數(shù)，而這個函數(shù)需要執(zhí)行超過20毫秒的時間，那么20ms之后，瀏覽器不會在乎，而是直接開始下一次執(zhí)行。至少你可以使用SetTimeout來設置，在某個函數(shù)執(zhí)行完之后，再次執(zhí)行它。

事實上，有一個更加新潮卻還是半成品的函數(shù)，叫做requestAnimationFrame，它很棒。它很類似于setTimeOut函數(shù)，除了在這兩個方面：當標簽頁失去焦點時，它就不再運行了；現(xiàn)在這個函數(shù)還是依賴于瀏覽器的，標準以后還有可能變化。如果你想要更多的信息，可以訪問Paul Irish的博客。
4.使用倒序循環(huán)
這是個不錯的小技巧，可以讓你的循環(huán)更快。使用倒序，而且使用while循環(huán)。比如，這個循環(huán)：

它的執(zhí)行效率不如下面這個循環(huán)：

這可能沒幫你省多少開銷，因為執(zhí)行的效率主要還是依賴于你在循環(huán)體里面干了什么。但如果你想程序的不必要開銷減少到最后一個字節(jié)，后一個循環(huán)肯定贏。

實話說，主要影響程序執(zhí)行效率的還是數(shù)組緩存的長度。你可以（也確實應該）去看看JSPerf去了解這一點，以及其他影響JavaScript性能的因素。
5.使用紋理
在WebGL里面把物體的任意一個細節(jié)都畫出來看上去很誘人，但是，如果有可能的話，你應當注意一下你是否能夠使用紋理，因為它能夠極大地提高性能。在某些特定的情況下，比如陰影或者模糊效果，你也許不得不使用紋理，但在其他時候，你也應該時時關注你是否可以使用紋理。
6.使用緩存
這一點我在自己的試驗力試了很多，在幀循環(huán)中，你應當避免引用變量、對象或者其他任何東西。基于這點原因，很值得把你的模型、頂點全部緩存起來，這樣在渲染動畫的時候你就可以快速地訪問到它們。
7.禁用選中
我愛這一小段代碼，我把它放到任何包含Canvas或WebGL的頁面中。

你也可能只想在Canvas控件中禁用選中。這段是我在那些Canvas占據(jù)了整個屏幕的項目中使用的代碼。
8.避免在JavaScript中定義CSS
現(xiàn)在，在JavaScript中定義CSS簡直太方便了，尤其是你使用JQuery的時候

問題是這樣做之后，你的JavaScript代碼中很快就充斥著各種類型的CSS定義，而你同時又使用*.css文件來定義CSS，潛在的問題很難被發(fā)現(xiàn)。更好的方法是：使用class模塊化CSS，而且只在JavaScript中定義那些不能預知的CSS類。
9.在對象中定義回調(diào)函數(shù)
我愛下面這段代碼，這絕不是我自己想出來的，但它是如此整潔美觀。如果你有一大堆回調(diào)函數(shù)要用，你也許會這樣用的：

或者，你會回調(diào)一個在代碼其他地方定義的松散的函數(shù)，比如這樣

這樣做會有一些問題。第一段代碼中，你在某個事件上綁定了匿名函數(shù)，你很難將該函數(shù)再從事件上解除下來。你當然可以解除某個事件上的所有函數(shù)，但你可能在它上面綁定了多個函數(shù)，而你只想解除一個。在第二種情況下，你的函數(shù)名污染了全局變量空間，代碼的可維護性降低了。所以，考慮這樣做：

這樣做整潔又干凈，而且避免了上面提到的兩個問題。
10.鏈式三元運算符
我完全是從Paul Irish的《JQuery，你應該知道的11件事》中學到這個的。這非常好用，你也應該會喜歡。我們經(jīng)常這樣做：

但如果你想這樣做，比如，當值為多少時如何，當值大于多少時如何，當值更加大的時候如何，明白嗎？在這種情況下，鏈式三元運算符非常好用：

最新評論