1.優(yōu)先使用===,而不是==
JavaScript使用兩種相等性操作符:===|!==和==|!=。通常認(rèn)為做比較的最佳實(shí)踐是使用前一組操作符。
"若兩個(gè)操作數(shù)的類型和值相同,那么===比較的結(jié)果為真,!==比較的結(jié)果為假。" --- JavaScript語言精粹(JavaScript: The Good Parts)
然而,如果使用==和!=,當(dāng)比較不同類型的操作數(shù)時(shí),你就會(huì)碰到問題啦。在這種情況下,這組操作符會(huì)嘗試對(duì)操作數(shù)的值做無用的強(qiáng)制轉(zhuǎn)換。
2.Eval就是糟糕的代名詞
對(duì)于那些不熟悉JavaScript的人來說,函數(shù)"evel"讓我們能夠訪問JavaScript編譯器。我們可以通過給"eval"傳遞一個(gè)字符串參數(shù)來得到該字符串執(zhí)行的結(jié)果。
這不僅會(huì)極大地降低你的腳本的性能,也會(huì)造成一個(gè)巨大的安全隱患,因?yàn)檫@賦予傳遞進(jìn)來的純文本太多的能力。要盡可能地避免eval函數(shù)的使用。
3.不要懶手
技術(shù)上來說,你確實(shí)可能僥幸地省略多數(shù)花括號(hào)和分號(hào)。大多數(shù)瀏覽器都能夠正確地解釋如下代碼片段:
if(someVariableExists) x = false
然而,再考慮一下這段代碼:
if(someVariableExists) x = false anotherFunctionCall();
可能會(huì)有人認(rèn)為上一段代碼等價(jià)于:
if(someVariableExists) { x = false; anotherFunctionCall(); }
很不幸,他錯(cuò)了。事實(shí)上,它的本意是:
if(someVariableExists) x = false; anotherFunctionCall();
你應(yīng)該也注意到了,代碼中縮進(jìn)模仿了花括號(hào)的功能。毋庸置疑,這是非?植赖淖龇,無論如何都應(yīng)該避免。唯一可以省略花括號(hào)的時(shí)候是在一行式的語句中,但即使這種情況,也是很有爭(zhēng)議的。
if(2 + 2 === 4) return 'nicely done';
始終要想著以后
如果以后的某個(gè)時(shí)候,你需要在這種if語句中增加更多的命令,那該怎么辦呢?沒法子,你就只能重寫這塊代碼了。處理這個(gè)問題的底線是對(duì)于省略寫法保持謹(jǐn)慎。
4.使用JS Lint
JSLint是Douglas Crockford編寫的一個(gè)調(diào)試器。簡(jiǎn)單地將你的腳本拷貝進(jìn)去,它就會(huì)快速地掃描你的代碼中任何明顯的問題和錯(cuò)誤。
"JSLint獲取一份JavaScript源碼,然后掃描代碼。如果發(fā)現(xiàn)問題,就會(huì)返回一條信息描述這個(gè)問題以及這個(gè)問題在源碼中的大致位置。問題雖然經(jīng)常是語法錯(cuò)誤,卻不一定是。JSLint也會(huì)查看一些風(fēng)格習(xí)慣以及結(jié)構(gòu)問題。它并不證明你的代碼是否正確,只是提供另外的一雙眼睛來幫助發(fā)現(xiàn)問題。"---JSLint文檔
在結(jié)束腳本代碼的編寫之前,對(duì)其執(zhí)行一次JSLint,能夠保證你不會(huì)犯一些愚蠢的錯(cuò)誤。
5.將腳本置于頁面的底部
這條技巧在本系列前面的文章中也推薦過。因?yàn)樗诖颂幰卜浅:线m(As it's highly appropriate though),所有我將那段信息直接粘貼在這里。
記住---這條最佳實(shí)踐的主要目標(biāo)是盡可能快速地為用戶加載頁面。當(dāng)加載一個(gè)腳本時(shí),瀏覽器直到整個(gè)腳本文件全部加載完畢才能繼續(xù)。因此,用戶必須等上更長的時(shí)間才能注意到任何的進(jìn)度。
如果JS文件的目的僅僅是增加功能---例如,在點(diǎn)擊某個(gè)按鈕后---那么就將那些文件放在底部,body結(jié)束標(biāo)簽之前吧。這絕對(duì)是一個(gè)最佳實(shí)踐。
更好的做法
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
6.在For語句之外聲明變量
當(dāng)執(zhí)行一個(gè)冗長的"for"語句之時(shí),僅僅讓解釋引擎做必須干的活吧。例如:
糟糕的做法
for(var i = 0; i < someArray.length; i++) { var container = document.getElementById('container'); container.innerHtml += 'my number: ' + i; console.log(i); }
注意上面代碼片段中的每次迭代都需要檢查數(shù)組的長度,并且每次都要遍歷DOM樹找到"container"元素---效率多低。
更好的做法
var container = document.getElementById('container'); for(var i = 0, len = someArray.length; i < len; i++) { container.innerHtml += 'my number: ' + i; console.log(i); }
感謝有位朋友留下評(píng)論展示如何進(jìn)一步優(yōu)化上面的代碼塊。
7.構(gòu)建字符串的最快方式
當(dāng)需要遍歷一個(gè)數(shù)組或者對(duì)象之時(shí),不要總是使用你能信手粘來的"for"語句。創(chuàng)造性地找個(gè)能夠完成工作的最快速的方案。
var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
"我不會(huì)以測(cè)試基準(zhǔn)來煩你;你只須相信我(或者自己去測(cè)試一下)---這是目前為止最快的方式!"
使用原生方法(比如join()),不用管抽象層面背后發(fā)生了什么,通常會(huì)比任何非原生方法快得多。 --- James Padolsey, james.padolsey.com"
8.減少全局變量
"通過將全局的東西封裝進(jìn)單個(gè)命名空間,能夠大大降低與其他應(yīng)用、部件、代碼庫交互混亂的概率。"--- Douglas Crockford
var name = 'jeffrey'; var lastname = 'Way'; function doSomething() {...} console.log(name); // Jeffrey -- or window.name
更好的做法
var DudeNameSpace = { name: 'Jeffrey', lastname: 'Way', doSometing: function() {...} } console.log(DudeNameSpace.name); // Jeffrey
注意我們是怎樣將全局性的“足跡”減少為一個(gè)命名可笑的"DudeNameSpace"對(duì)象的。
9.注釋你的代碼
一開始看起來似乎沒有必要,但請(qǐng)相信我,你將會(huì)想盡可能好地注釋你的代碼。當(dāng)你幾個(gè)月后再次回到項(xiàng)目,會(huì)發(fā)生什么呢?發(fā)現(xiàn)你根本沒法輕松地記起當(dāng)初對(duì)每一行代碼的想法;蛘,如果你的某個(gè)同事需要修改你的代碼,那又會(huì)怎么樣呢?始終,一直記著注釋你代碼的重要部分吧。
// Cycle through array and echo out each name for(var i = 0, len = array.length; i < len; i++) { console.log(array[i]); }
10.擁抱漸進(jìn)增強(qiáng)
始終考慮到如何處理JavaScript禁用的情況。也許你會(huì)想“大多數(shù)我網(wǎng)頁的閱讀器都是啟用JavaScript的,因此我不擔(dān)心這個(gè)問題。”然而,這會(huì)是一個(gè)巨大的錯(cuò)誤。
你曾花時(shí)間去看過關(guān)閉JavaScript后你的漂亮的滑動(dòng)條是什么樣么?(下載Web開發(fā)者工具欄以方便干這事。)也許它會(huì)完全破壞你的站點(diǎn)。按照以往經(jīng)驗(yàn),設(shè)計(jì)你的站點(diǎn)時(shí)應(yīng)假設(shè)將會(huì)禁用JavaScript。那么,一旦你這樣做了,那么開始漸進(jìn)地增強(qiáng)你的網(wǎng)頁布局吧!
11.不要傳遞字符串給"SetInterval"或"SetTimeOut"
考慮一下如下代碼:
setInterval( "document.getElementById('container').innerHTML += 'my new number: ' + i", 3000 );
這段代碼不僅低效,而且其行為與"eval"函數(shù)相同。永遠(yuǎn)不要傳給字符串給SetInterval和SetTimeOut。相反,應(yīng)傳遞一個(gè)函數(shù)名。
setInterval(someFunction, 3000);
12.不要使用"With"語句
乍一看,"With"語句似乎是個(gè)聰明的想法;靖拍钍撬鼈兡軌?yàn)樵L問深度嵌套對(duì)象提供一種簡(jiǎn)寫方式。例如...
with (being.person.man.bodyparts) { arms = true; legs = true; }
取代如下寫法
being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs = true;
很不幸,經(jīng)過一些測(cè)試,會(huì)發(fā)現(xiàn)這種簡(jiǎn)寫在設(shè)置新成員時(shí)表現(xiàn)非常糟糕。作為替代,你應(yīng)該使用var。
var o = being.person.man.bodyparts; o.arms = true; o.legs = true;
13.使用{}而不是New Object()
JavaScript中有多種創(chuàng)建對(duì)象的方式。也許更傳統(tǒng)的方式是使用"new"構(gòu)造器,像這樣:
var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() { console.log(this.name); }
然而,這種方式因其行為并不是我們所想的那樣而被認(rèn)為是“糟糕的實(shí)踐。相反,我推薦你使用更健壯的對(duì)象字面方法。
更好的寫法
var o = { name: 'Jeffrey', lastName: 'Way', someFunction: function() { console.log(this.name); } };
注意如果你只是想簡(jiǎn)單地創(chuàng)建個(gè)空對(duì)象,{}就派上用場(chǎng)了。
var o = {};
"對(duì)象字面量使我們能夠編寫支持很多特性的代碼,并對(duì)代碼的實(shí)現(xiàn)者來說代碼仍然相對(duì)直觀。不需要直接調(diào)用構(gòu)造器或維護(hù)傳遞給函數(shù)的參數(shù)的正確順序,等等。" --- dyn-web.com
14.使用[]而不是New Array()
這同樣適用于創(chuàng)建一個(gè)新數(shù)組。
過得去的寫法
var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber';
更好的寫法
var a = ['Joe', 'Plumber'];
"JavaScript中一個(gè)常見的錯(cuò)誤是需要數(shù)組時(shí)使用對(duì)象或需要對(duì)象時(shí)使用數(shù)組。規(guī)則很簡(jiǎn)單:當(dāng)屬性名是小的連續(xù)整數(shù)時(shí),你應(yīng)該使用數(shù)組。否則,使用對(duì)象"---Douglas Crockford
15.一長串變量?省略"var"關(guān)鍵字,使用逗號(hào)替代
var someItem = 'some string'; var anotherItem = 'another string'; var oneMoreItem = 'one more string';
更好的寫法
var someItem = 'some string', anotherItem = 'another string', oneMoreItem = 'one more string';
相當(dāng)?shù)牟谎宰悦。我不知道這里是否有任何真正的速度提升,但是它使你的代碼更加簡(jiǎn)潔了。
16.始終,始終使用分號(hào)
技術(shù)上來說,大多數(shù)瀏覽器都允許你的省略一些分號(hào)。
var someItem = 'some string' function doSomething() { return 'something' }
話雖如此,但這是一種非常糟糕的做法,可能導(dǎo)致更大的問題,問題查找起來也更困難。
更好的寫法
var someItem = 'some string'; function doSomething() { return 'something'; }
18."For in"語句
遍歷對(duì)象內(nèi)的成員時(shí),你也會(huì)得到方法函數(shù)。為了解決這個(gè)問題,應(yīng)始終將你的代碼包裝在一個(gè)if語句中來過濾信息。
for(key in object) { if(object.hasOwnProperty(key)) { ... then do something... } }
引自JavaScript: 語言精粹, Douglas Crockford著
19.使用Firebug的"Timer"特性來優(yōu)化代碼
需要一種快速簡(jiǎn)單的方法來檢測(cè)一個(gè)操作花費(fèi)多長時(shí)間么?使用Firebug的"timer"特性記錄結(jié)果。
function TimeTracker() { console.time("MyTimer"); for(x=5000; x > 0; x--){} console.timeEnd("MyTimer"); }
20.閱讀,閱讀,再閱讀
我是一個(gè)Web開發(fā)博客的超級(jí)粉絲(比如這個(gè)博客。,但吃午餐或者睡前,博客確實(shí)不是書籍的替代品。始終在你的床前桌上放一本wen開發(fā)書籍吧。如下是一些我最喜歡的JavaScript書籍。
多閱讀幾遍。我仍舊在讀!
21.自執(zhí)行函數(shù)(Self-Executing Functions)
相比調(diào)用函數(shù),當(dāng)頁面加載或調(diào)用父函數(shù)時(shí),讓函數(shù)自動(dòng)執(zhí)行會(huì)簡(jiǎn)單些。簡(jiǎn)單地將你的函數(shù)包裝在圓括號(hào)內(nèi),并添加額外的一對(duì)圓括號(hào),其本質(zhì)上就調(diào)用了這個(gè)函數(shù)。
(function doSomething() { return { name: 'jeff', lastName: 'way' }; })();
22.原始(raw)JavaScript代碼的執(zhí)行速度始終快于使用代碼庫
JavaScript代碼庫,如jQuery和Mootools,能夠?yàn)槟愎?jié)省大量的編碼時(shí)間---特別是使用AJAX操作。話雖如此,始終謹(jǐn)記代碼庫的執(zhí)行速度始終是比不上原始JavaScript代碼的(假設(shè)了代碼的正確性)。
jQuery的"each"方法用來做遍歷非常贊,但使用原生"for"語句始終會(huì)快一些。
23.Crockford的JSON.Parse
雖然JavaScript 2應(yīng)該有一個(gè)內(nèi)置的JSON解析器,但寫本文之時(shí),我們?nèi)耘f需要自己實(shí)現(xiàn)。Douglas Crockford,JSON的創(chuàng)造者,已經(jīng)實(shí)現(xiàn)了一個(gè)解析器供你使用?梢詮倪@里下載。
簡(jiǎn)單地導(dǎo)入該腳本,你就能獲得一個(gè)新的JSON全局對(duì)象,用于解析你的.json文件。
var response = JSON.parse(xhr.responseText); var container = document.getElementById('container'); for(var i = 0, len = response.length; i < len; i++) { container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>'; }
24.刪除"Language"
幾年前,在script標(biāo)簽內(nèi)常見有"language"屬性。
<script type="text/javascript" language="javascript"> ... </script>
然而,這個(gè)屬性很早就被棄用了,所以就不要再使用了。
就這些了,同志們
現(xiàn)在你知道這JavaScript初學(xué)者應(yīng)該知道的24條基本技巧。有機(jī)會(huì)也讓我知道一下你的小貼士吧。感謝閱讀。