1.優先使用===,而不是==
JavaScript使用兩種相等性運算子: ===|!==和==|!=.通常認為做比較的最佳實踐是使用前一組運算符.
"若兩個運算元的類型和值相同,那麼===比較的結果為真,!==比較的結果為假." JavaScript語言精粹
然而,如果使用==和!=,當比較不同類型的操作數時,你就會碰到問題啦.在這種情況下,這組操作符會嘗試對操作數的值做無用的強制轉換.
2.Eval就是糟糕的代名詞
#對於那些不熟悉JavaScript的人來說,函數"evel"讓我們能夠訪問JavaScript編譯器,我們可以透過傳遞一個字串參數給"eval"來得到該字串執行的結果.
這不僅會大大降低你的腳本的效能.也會造成一個巨大的安全隱患,因為這富裕傳遞進來的純文本太多的能力,要盡可能地避免eval函數的使用.
3.不要懶手
奇數上來說,你確實可能僥倖地省略多數花括號和分號.大多數瀏覽器都能夠正確的節水如下程式碼片段:
if(someVarianbleExists) x = false
然而再考慮一下這段程式碼:
if(someVariableExists) x=false anotherFunctionCall();
可能會有人認為上一段程式碼等價於:
if(someVariableExists){
x = false;
anotherFunctionCall();你應該也注意到了,代碼中縮進模仿了花括號的功能,毋庸置疑,這是非常恐怖的做法,無論如何都應該避免.唯一可以省略花括號的時候是在一行式的語句中,但即使這種情況,也是很有爭議的.
if(2 + 2 ===4) return"nicely done";
始終要想著以後
如果以後的某個時候,你需要在這種if語句中增加更多的命令,那該怎麼辦呢?沒法子,你就只能重寫這款代碼了.處理這個問題的底線是對於省略寫法保持謹慎.
#4.使用JS Lint
JSLint是Douglas Crockford 寫的一個調試器,簡單地將你的腳本拷貝進去,它就會快速地刀面你的程式碼中任何明顯的問題和錯誤.
"JSLint取得一份JavaScript源碼，然後掃描程式碼。如果發現問題，就會回傳一條訊息描述這個問題以及這個問題在源碼中的大致位置。問題雖然經常是語法錯誤，卻不一定是。JSLint也會查看一些風格習慣以及結構問題。你不會反一些愚蠢的錯誤.
5.將腳本至於頁面的底部
這條技巧在本系列前面的文章中也推薦過.因為它在此處也非常合適(As it's highly appropriate though),所以我將那段信息直接粘貼在這裡.
記住--這條最佳實踐的主要目標是近可能快速地為用戶加載頁面.當加載一個腳本時,瀏覽器直到整個腳本文件全部加載完畢才能繼續.因此,用戶必須等上更長的時間才能注意到任何的進度.
如果JS文件的目的僅僅是增加功能--例如.在點擊某個按鈕後--那麼就將那些文件放在底部,body結束標籤之前吧,這絕對是一個最佳實踐.
更好的做法
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js?1.1.11"> </script> <script type="text/javascript" src="path/to/anotherFile.js?1.1.11"></script> </body> </html>
6.在For語句之外宣告變數
當執行一個冗長的'for'語句之時,僅僅讓解釋引擎做必須幹的活吧.
例如:
糟糕的做法:
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i); }注意上面程式碼片段中的每次迭代都需要檢查數組的長度.並且每次都要遍歷DOM樹找到'container'元素--效率多低啊!! !
更好的做法
ar container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i); }7.建立字串的最快方式
當需要遍歷一個數組或物件之時,不要總是使用你信手拈來的'for'語句,創造性地找個能夠完成工作的最快速的方案.
var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
“我不會以測試基準來煩你；你只須相信我（或者自己去測試一下）—這是目前為止最快的方式！ 」
使用原生方法（例如join()），不用管抽象層面背後發生了什麼，通常會比任何非原生方法快得多。
8.減少全域變數
透過將全域的東西封裝進單一命名空間,能夠大幅降低與其他應用程式,元件,程式碼庫互動混亂的機率.
var name = 'jeffrey';
var lastname = 'way';
function doSomething(){...}
console.log()更好的做法
var DudeNameSpace = {
name:'Jeffrey';
lastname:'way',
doSometing: function(){...}
}
console.log(DudeNameSpace.name);9 .註解你的程式碼
一開始看起來似乎沒有必要,但請相信我,你將會想盡可能好地註解你的程式碼.當你幾個月後再次回到專案,會發生什麼呢?發現你根本沒法輕鬆的及其當初對每一行代碼的想法.或者,如果你的某個同事需要修改你的代碼,那又會怎麼樣呢?始終,一直記著註釋你代碼的重要部分吧.
10.擁抱漸進增強
總是考慮到如何處理JavaScript禁用的情況.也許你會想"大多數我網頁的閱讀器都是啟用JavaScript的,因此我不擔心這個問題.然而,這回事一個巨大的錯誤.
你曾花时间去看过关闭JavaScript后你的漂亮的花动态哦是什么样么?也许他会完全破坏你的站点.按照以往经验,设计你的站点是应假设将会禁用JavaScript,那么,一旦你这样做了,那么开始渐进的增强你的网页布局吧!
11.不要传递字符串给"SetInterval"或"SetTimeout"
考虑一下如下代码:
etInterval( "document.getElementById('container').innerHTML += 'my new number: ' + i", 3000 );
这段代码不仅抵消,而且其行为与"eval"函数相同.永远不要传给字符串给SetInterval和SetTimeout.相反,颍川地一个函数名.
setInterval(someFunction, 3000);
12.不要使用"with"语句
乍一看,'with'语句似乎是个聪明的想法.基本概念是他们能够为深度嵌套对象提供一种简写方式,例如...
with (being.person.man.bodyparts) { arms = true; legs = true; }取代如下写法
being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs = true;
很不幸,经过一些测试,会发现这种简写在设置新成员时表现非常糟糕.作为替代.你应该使用var.
var o = being.person.man.bodyparts; o.arms = true; o.legs = true;
13 使用{}而不是new Object()
JavaScript中有很多种穿件对象的方式.也许更传统的方式是使用''new''构造器.像这样:
var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() { console.log(this.name); }
然而,这种方式因其行为并不是我们所想的那样而被认为是"糟糕的实践".相反,我推荐你使用更健壮的对象字面方法.
更好的写法
var o = { name: 'Jeffrey', lastName: 'Way', someFunction: function() { console.log(this.name); } };注意如果你只是想简单地创建个空对象,{}就派上用场了.
var o = {};对象字面量使我们能够编写支持很多特性的代码,并对代码的实现者来说代码仍然相对直观,不需要直接调用构造器或维护传递给函数的参数的正确顺序,等等.
14.使用[]而不是New Array()
这同样适用于创建一个新数组
过去的写法
var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber';
更好的写法 var a = ['Joe', 'Plumber'];
Javascript中一个常见的错误是需要数组时使用对象或需要对象时使用数组,规则很简单:当属姓名是小的连续整数时,你应该使用数组,否则,使用对象
15.一长串变量? 省略''var''关键字,使用逗号替代
var someItem = 'some string'; var anotherItem = 'another string'; var oneMoreItem = 'one more string';
更好的写法
var someItem = 'some string', anotherItem = 'another string', oneMoreItem = 'one more string';
相当的不言自明,我不知道这里是否有任何真正的速度提升,但是它使你的代码更加简洁了.
16.始终,始终使用分号
技术上来说,大多数浏览器都允许你省略一些分号
var someItem = 'some string' function doSomething() { return 'something' }话虽如此,但这是一种非常糟糕的做法,可能导致更大的问题,问题查找起来也更困难
更好的写法
var someItem = 'some string'; function doSomething() { return 'something'; }18.For in 语句
遍历对象内的成员时,你也会得到方法函数,为了解决这个问题,应始终将你的代码包装在一个if语句中来过滤信息
for(key in object) { if(object.hasOwnProperty(key)) { ... then do something... } }19.使用firebug的''Timer''特性来优化代码
需要一种快速简单地方法来检测一个操作花费多长时间么?
使用Firebug的timer特性记录结果
function TimeTracker() { console.time("MyTimer"); for(x=5000; x > 0; x--){} console.timeEnd("MyTimer"); }20.读书 面向对象的JavaScript
JavaScript：语言精粹
学习jQuery 1.3
学习JavaScript
21.自执行函数(self-executing functions)
相比调用函数,当页面加载或调用父函数时,让函数自动执行会简单些.简单地将你的函数包装在圆括号内,并添加额外的一对圆括号,其本质上就调用了这个函数
(function doSomething() { return { name: 'jeff', lastName: 'way' }; })();22.原始(raw)javascript代码的执行速度始终快于使用代码库
Javascript代码库,如jQuery和mootools,能够为你节省大量的编码时间--特别是使用ajax操作.话虽如此,适中谨记代码库的执行速度适中是比不上原始JavaScript代码的(假设了代码的正确性)
jQuery的each方法来做遍历非常赞,但使用原生for语句适中会快一些
23.crockford的json.parse
虽然JavaScript 2 应该有一个内置的json解析器,但我们仍旧需要自己实现.Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。
简单地导入该脚本,你就能获得一个新的json全局对象,用于解析你的.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标签内最常见的language属性,现在已经不用了
以上是javascript初學者實踐使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
