JavaScript 使用2種不同的等值運算符:===|!== 和 ==|!=,在比較操作中使用前者是最佳實踐。“如果兩邊的操作數具有相同的類型和值,===返回true,!==返回false。”——《JavaScript:語言精粹》然而,當使用==和!=時,你可能會遇到類型不同的情況,這種情況下,操作數的類型會被強制轉換成一樣的再做比較,這可能不是你想要的結果。[在不用對比數據類型時== 代替===]
2.Eval=邪惡
起初不太熟悉時,“eval”讓我們能夠訪問JavaScript的編譯器(譯註:這看起來很強大)。從本質上講,我們可以將字符串傳遞給eval作爲參數,而執行它。這不僅大幅降低腳本的性能(譯註:JIT編譯器無法預知字符串內容,而無法預編譯和優化),而且這也會帶來巨大的安全風險,因爲這樣付給要執行的文本太高的權限,避而遠之。
3.省略未必省事
從技術上講,你可以省略大多數花括號和分號。大多數瀏覽器都能正確理解下面的代碼: 然後,如果像下面這樣: 有人可能會認爲上面的代碼等價於下面這樣: 不幸的是,這種理解是錯誤的。實際上的意思如下: 你可能注意到了,上面的縮進容易給人花括號的假象。無可非議,這是一種可怕的實踐,應不惜一切代價避免。僅有一種情況下,即只有一行的時候,花括號是可以省略的,但這點是飽受爭議的。 未雨綢繆
很可能,有一天你需要在if語句塊中添加更多的語句。這樣的話,你必須重寫這段代碼。底線——省略是雷區。
4.使用JSLint
JSLint是由大名鼎鼎的道格拉斯(Douglas Crockford)編寫的調試器。簡單的將你的代碼粘貼進JSLint中,它會迅速找出代碼中明顯的問題和錯誤。“JSLint掃面輸入的源代碼。如果發現一個問題,它返回一條描述問題和一個代碼中的所在位置的消息。問題並不一定是語法錯誤,儘管通常是這樣。JSLint還會查看一些編碼風格和程序結構問題。這並不能保證你的程序是正確的。它只是提供了另一雙幫助發現問題的眼睛。”——JSLing 文檔部署腳本之前,運行JSLint,只是爲了確保你沒有做出任何愚蠢的錯誤。
5.將腳本放在頁面的底部
在本系列前面的文章裏已經提到過這個技巧,我粘貼信息在這裏。
記住——首要目標是讓頁面儘可能快的呈獻給用戶,腳本的夾在是阻塞的,腳本加載並執行完之前,瀏覽器不能繼續渲染下面的內容。因此,用戶將被迫等待更長時間。如果你的js只是用來增強效果——例如,按鈕的單擊事件——馬上將腳本放在body結束之前。這絕對是最佳實踐。
建議
6.避免在For語句內聲明變量
當執行冗長的for語句時,要保持語句塊的儘量簡潔,例如:
糟糕 注意每次循環都要計算數組的長度,並且每次都要遍歷dom查詢“container”元素——效率嚴重地下!
建議 感興趣可以思考如何繼續優化上面的代碼,歡迎留下評論大家分享。
7.構建字符串的最優方法
當你需要遍歷數組或對象的時候,不要總想着“for”語句,要有創造性,總能找到更好的辦法,例如,像下面這樣。 我不是你心中的神,但請你相信我(不信你自己測試)——這是迄今爲止最快的方法!使用原生代碼(如 join()),不管系統內部做了什麼,通常比非原生快很多。——James Padolsey, james.padolsey.com
8.減少全局變量
只要把多個全局變量都整理在一個名稱空間下,擬將顯著降低與其他應用程序、組件或類庫之間產生糟糕的相互影響的可能性。——Douglas Crockford
更好的做法 注:這裏只是簡單命名爲 “DudeNameSpace”,實際當中要取更合理的名字。
9.給代碼添加註釋
似乎沒有必要,當請相信我,儘量給你的代碼添加更合理的註釋。當幾個月後,重看你的項目,你可能記不清當初你的思路。或者,假如你的一位同事需要修改你的代碼呢?總而言之,給代碼添加註釋是重要的部分。
10.擁抱漸進增強
確保javascript被禁用的情況下能平穩退化。我們總是被這樣的想法吸引,“大多數我的訪客已經啓用JavaScript,所以我不必擔心。”然而,這是個很大的誤區。你可曾花費片刻查看下你漂亮的頁面在javascript被關閉時是什麼樣的嗎?(下載 Web Developer 工具就能很容易做到(譯者注:chrome用戶在應用商店裏自行下載,ie用戶在Internet選項中設置)),這有可能讓你的網站支離破碎。作爲一個經驗法則,設計你的網站時假設JavaScript是被禁用的,然後,在此基礎上,逐步增強你的網站。
11.不要給”setInterval”或”setTimeout”傳遞字符串參數
考慮下面的代碼: 不僅效率低下,而且這種做法和”eval”如出一轍。從不給setInterval和setTimeout傳遞字符串作爲參數,而是像下面這樣傳遞函數名。
12.不要使用”with”語句
乍一看,”with”語句看起來像一個聰明的主意。基本理念是,它可以爲訪問深度嵌套對象提供縮寫,例如…… 而不是像下面這樣: 不幸的是,經過測試後,發現這時“設置新成員時表現得非常糟糕。作爲代替,您應該使用變量,像下面這樣。
13.使用{}代替 new Ojbect()
在JavaScript中創建對象的方法有多種。可能是傳統的方法是使用”new”加構造函數,像下面這樣: 然而,這種方法的受到的詬病不及實際上多。作爲代替,我建議你使用更健壯的對象字面量方法。
更好的做法 注意,果你只是想創建一個空對象,{}更好。 “對象字面量使我們能夠編寫更具特色的代碼,而且相對簡單的多。不需要直接調用構造函數或維持傳遞給函數的參數的正確順序,等”——dyn-web.com
14.使用[]代替 new Array()
這同樣適用於創建一個新的數組。例如: 更好的做法: “javascript程序中常見的錯誤是在需要對象的時候使用數組,而需要數組的時候卻使用對象。規則很簡單:當屬性名是連續的整數時,你應該使用數組。否則,請使用對象”——Douglas Crockford
15.定義多個變量時,省略var關鍵字,用逗號代替 更好的做法 …應而不言自明。我懷疑這裏真的有所提速,但它能是你的代碼更清晰。
(不好意思,第16 條被作者喫掉了)
17.謹記,不要省略分號
從技術上講,大多數瀏覽器允許你省略分號。 已經說過,這是一個非常糟糕的做法可能會導致更大的,難以發現的問題。
更好的做法
18.”For in”語句
當遍歷對象的屬性時,你可能會發現還會檢索方法函數。爲了解決這個問題,總在你的代碼裏包裹在一個if語句來過濾信息。 參考 JavaScript:語言精粹,道格拉斯(Douglas Crockford)。
19.使用Firebug的”timer”功能優化你的代碼
在尋找一個快速、簡單的方法來確定操作需要多長時間嗎?使用Firebug的“timer”功能來記錄結果。
20.閱讀,閱讀,反覆閱讀
雖然我是一個巨大的web開發博客的粉絲(像這樣!),午餐之餘或上牀睡覺之前,實在沒有什麼比一本書更合適了,堅持放一本web開發方面書在你的牀頭櫃。下面是一些我最喜愛的JavaScript書籍。
- 《Object-Oriented JavaScript | JavaScript面向對象編程指南》
- 《JavaScript:The Good Parts | JavaScript語言精粹 修訂版》站內下載
- 《Learning jQuery 1.3 |jQuery基礎教程 第4版》
-
《Learning JavaScript |JavaScript學習指南》站內下載
21.自執行函數
和調用一個函數類似,它很簡單的使一個函數在頁面加載或父函數被調用時自動運行。簡單的將你的函數用圓括號包裹起來,然後添加一個額外的設置,這本質上就是調用函數。
22.原生代碼永遠比庫快
JavaScript庫,例如jQuery和Mootools等可以節省大量的編碼時間,特別是AJAX操作。已經說過,總是記住,庫永遠不可能比原生JavaScript代碼更快(假設你的代碼正確)。jQuery的“each”方法是偉大的循環,但使用原生”for”語句總是更快。
23.道格拉斯的 JSON.Parse
儘管JavaScript 2(ES5)已經內置了JSON 解析器。但在撰寫本文時,我們仍然需要自己實現(兼容性)。道格拉斯(Douglas Crockford),JSON之父,已經創建了一個你可以直接使用的解析器。這裏可以下載(鏈接已壞,可以在這裏查看相關信息http://www.json.org/)。只需簡單導入腳本,您將獲得一個新的全局JSON對象,然後可以用來解析您的json文件。
24.移除”language”屬性
曾經腳本標籤中的“language”屬性非常常見。
然而,這個屬性早已被棄用,所以請移除(譯者注:html5 中已廢棄,但如果你喜歡,你仍然可以添加)。
就這樣吧,夥計
現在你已經學到了,24條JavaScript初學者的必備技巧。讓我知道你高效技巧吧!