你需要知道的10個(gè)最佳javascript開發(fā)實(shí)踐小結(jié)
更新時(shí)間:2012年04月15日 22:37:51 作者:
Javascript的很多擴(kuò)展的特性是的它變得更加的犀利, 同時(shí)也給予程序員機(jī)會創(chuàng)建更漂亮并且更讓用戶喜歡的網(wǎng)站
盡管很多的開發(fā)人員都樂于頌揚(yáng)javascript,但是仍舊有人看到它的陰暗面。
使用很多javascript代碼的web頁面會加載很慢,過多的使用javascript使得網(wǎng)頁丑陋和拖沓。很快如何有效地使用javascript成為一個(gè)非?;馃岬脑掝}。
這里讓我們列出10個(gè)最佳javascript實(shí)踐,幫助你有效地使用javascript。
1. 盡可能的保持代碼簡潔
可能大家都聽到過了N遍這個(gè)代碼簡潔問題了。作為一個(gè)開發(fā)人員你可能在你的代碼開發(fā)過程中使用了很多次,但千萬不要在js開發(fā)中忘記這點(diǎn)。
盡量在開發(fā)模式中添加注釋和空格,這樣保持代碼的可讀性
在發(fā)布到產(chǎn)品環(huán)境前請將空格和注釋都刪除,并且盡量縮寫變量和方法名
使用第三方工具幫助你實(shí)現(xiàn)壓縮javascript。
2. 思考后再修改prototypes
添加新的屬性到對象prototype中是導(dǎo)致腳本出錯(cuò)的常見原因。
yourObject.prototype.anotherFunction = ‘Hello';
yourObject.prototype.anotherMethod = function () { … };
在上面代碼中,所有的變量都會被影響,因?yàn)樗麄兌祭^承于"yourObject"。這樣的使用會導(dǎo)致意想不到的行為。所以建議在使用完后刪除類似的修改。
yourObject.prototype.anotherFunction = ‘Hello';
yourObject.prototype.anotherMethod = function () { … };
test.anotherMethod();
delete yourObject.prototype.anotherFunction = ‘Hello';
delete yourObject.prototype.anotherMethod = function () { … };
3. Debug Javascript代碼
即使最好的開發(fā)人員都會犯錯(cuò)。為了最大化的減少類似錯(cuò)誤,請?jiān)谀愕膁ebugger中運(yùn)行你的代碼,確認(rèn)你沒有遇到任何細(xì)微的錯(cuò)誤
4. 避免Eval
你的JS在沒有"eval"方法的時(shí)候也可以很好的工作?!癳val”允許訪問javascript編譯器。如果一個(gè)字符串作為參數(shù)傳遞到"eval",那么它的結(jié)果可以被執(zhí)行。
這會很大的降低代碼的性能。盡量避免在產(chǎn)品環(huán)境中使用"eval"。
5. 最小化DOM訪問
DOM是最復(fù)雜的API,會使得代碼執(zhí)行過程變慢。有時(shí)候web頁面可能沒有加載或者加載不完整。最好避免DOM。
6. 在使用javascript類庫之前先學(xué)習(xí)javascript
互聯(lián)網(wǎng)充斥著很多的javascript類庫,很多程序員都往往使用js類庫而不理解負(fù)面影響。強(qiáng)烈建議你在使用第三方類庫之前學(xué)習(xí)基本的JS代碼,否則,你就準(zhǔn)備著倒霉吧。
7. 不要用"SetTimeOut"和"Setinterval"方法來作為"Eval"的備選
setTimeOut( "document.getID('value')", 3000);
在以上代碼中 document.getID('value') 在"setTimeOut"方法中被作為字符串來處理。這類似于'eval'方法,在每個(gè)代碼執(zhí)行中來執(zhí)行一個(gè)字符串,因此會降低性能,因此,建議在這些方法中傳遞一個(gè)方法。
setTimeOut(yourFunction, 3000);
8. []比"new Array();"更好
一個(gè)常犯的錯(cuò)誤在于使用當(dāng)需要數(shù)組的時(shí)候使用一個(gè)對象或者該使用對象的時(shí)候使用一個(gè)數(shù)組。但是使用原則很簡單:
“當(dāng)屬性名稱是小的連續(xù)整數(shù),你應(yīng)該使用數(shù)組。否則,使用一個(gè)對象” - Douglas Crockford, JavaScript: Good Parts的作者.
建議:
var a = ['1A','2B'];
避免:
var a = new Array();
a[0] = "1A";
a[1] = "2B";
9. 盡量不要多次使用var
在初始每一個(gè)變量的時(shí)候,程序員都習(xí)慣使用"var"關(guān)鍵字。相反,建議你使用逗號來避免多余的關(guān)鍵字,并且減少代碼體積。 如下:
var variableOne = ‘string 1',
variableTwo = ‘string 2',
variableThree = ‘string 3';
10. 不要忽略分號 ";"
這往往是大家花費(fèi)數(shù)個(gè)小時(shí)進(jìn)行debug的原因之一。
我很確信你肯定也在其它的文章中閱讀過以上相關(guān)的內(nèi)容,但是大家可能往往都忽略了很多基本的規(guī)則。你是不是也曾經(jīng)忽略過分號。是不是也遇到過eval關(guān)鍵字問題導(dǎo)致性能問題?希望大家能夠喜歡,謝謝!
使用很多javascript代碼的web頁面會加載很慢,過多的使用javascript使得網(wǎng)頁丑陋和拖沓。很快如何有效地使用javascript成為一個(gè)非?;馃岬脑掝}。
這里讓我們列出10個(gè)最佳javascript實(shí)踐,幫助你有效地使用javascript。
1. 盡可能的保持代碼簡潔
可能大家都聽到過了N遍這個(gè)代碼簡潔問題了。作為一個(gè)開發(fā)人員你可能在你的代碼開發(fā)過程中使用了很多次,但千萬不要在js開發(fā)中忘記這點(diǎn)。
盡量在開發(fā)模式中添加注釋和空格,這樣保持代碼的可讀性
在發(fā)布到產(chǎn)品環(huán)境前請將空格和注釋都刪除,并且盡量縮寫變量和方法名
使用第三方工具幫助你實(shí)現(xiàn)壓縮javascript。
2. 思考后再修改prototypes
添加新的屬性到對象prototype中是導(dǎo)致腳本出錯(cuò)的常見原因。
復(fù)制代碼 代碼如下:
yourObject.prototype.anotherFunction = ‘Hello';
yourObject.prototype.anotherMethod = function () { … };
在上面代碼中,所有的變量都會被影響,因?yàn)樗麄兌祭^承于"yourObject"。這樣的使用會導(dǎo)致意想不到的行為。所以建議在使用完后刪除類似的修改。
復(fù)制代碼 代碼如下:
yourObject.prototype.anotherFunction = ‘Hello';
yourObject.prototype.anotherMethod = function () { … };
test.anotherMethod();
delete yourObject.prototype.anotherFunction = ‘Hello';
delete yourObject.prototype.anotherMethod = function () { … };
3. Debug Javascript代碼
即使最好的開發(fā)人員都會犯錯(cuò)。為了最大化的減少類似錯(cuò)誤,請?jiān)谀愕膁ebugger中運(yùn)行你的代碼,確認(rèn)你沒有遇到任何細(xì)微的錯(cuò)誤
4. 避免Eval
你的JS在沒有"eval"方法的時(shí)候也可以很好的工作?!癳val”允許訪問javascript編譯器。如果一個(gè)字符串作為參數(shù)傳遞到"eval",那么它的結(jié)果可以被執(zhí)行。
這會很大的降低代碼的性能。盡量避免在產(chǎn)品環(huán)境中使用"eval"。
5. 最小化DOM訪問
DOM是最復(fù)雜的API,會使得代碼執(zhí)行過程變慢。有時(shí)候web頁面可能沒有加載或者加載不完整。最好避免DOM。
6. 在使用javascript類庫之前先學(xué)習(xí)javascript
互聯(lián)網(wǎng)充斥著很多的javascript類庫,很多程序員都往往使用js類庫而不理解負(fù)面影響。強(qiáng)烈建議你在使用第三方類庫之前學(xué)習(xí)基本的JS代碼,否則,你就準(zhǔn)備著倒霉吧。
7. 不要用"SetTimeOut"和"Setinterval"方法來作為"Eval"的備選
setTimeOut( "document.getID('value')", 3000);
在以上代碼中 document.getID('value') 在"setTimeOut"方法中被作為字符串來處理。這類似于'eval'方法,在每個(gè)代碼執(zhí)行中來執(zhí)行一個(gè)字符串,因此會降低性能,因此,建議在這些方法中傳遞一個(gè)方法。
setTimeOut(yourFunction, 3000);
8. []比"new Array();"更好
一個(gè)常犯的錯(cuò)誤在于使用當(dāng)需要數(shù)組的時(shí)候使用一個(gè)對象或者該使用對象的時(shí)候使用一個(gè)數(shù)組。但是使用原則很簡單:
“當(dāng)屬性名稱是小的連續(xù)整數(shù),你應(yīng)該使用數(shù)組。否則,使用一個(gè)對象” - Douglas Crockford, JavaScript: Good Parts的作者.
建議:
var a = ['1A','2B'];
避免:
var a = new Array();
a[0] = "1A";
a[1] = "2B";
9. 盡量不要多次使用var
在初始每一個(gè)變量的時(shí)候,程序員都習(xí)慣使用"var"關(guān)鍵字。相反,建議你使用逗號來避免多余的關(guān)鍵字,并且減少代碼體積。 如下:
var variableOne = ‘string 1',
variableTwo = ‘string 2',
variableThree = ‘string 3';
10. 不要忽略分號 ";"
這往往是大家花費(fèi)數(shù)個(gè)小時(shí)進(jìn)行debug的原因之一。
我很確信你肯定也在其它的文章中閱讀過以上相關(guān)的內(nèi)容,但是大家可能往往都忽略了很多基本的規(guī)則。你是不是也曾經(jīng)忽略過分號。是不是也遇到過eval關(guān)鍵字問題導(dǎo)致性能問題?希望大家能夠喜歡,謝謝!
相關(guān)文章
javascript學(xué)習(xí)筆記(五) Array 數(shù)組類型介紹
javascript學(xué)習(xí)筆記之Array 數(shù)組類型介紹,需要的朋友可以參考下2012-06-06
讓ie運(yùn)行js時(shí)提示允許阻止內(nèi)容運(yùn)行的解決方法
這個(gè)問題一般是因?yàn)榫W(wǎng)頁中使用了一些js代碼,而ie的默認(rèn)安全級別過高導(dǎo)致運(yùn)行js時(shí)需要經(jīng)過準(zhǔn)許才可以。下面是IE的設(shè)置方法。2010-10-10
使用JavaScript 實(shí)現(xiàn)對象 勻速/變速運(yùn)動的方法
本篇文章是對JavaScript中實(shí)現(xiàn)對象勻速/變速運(yùn)動的方法進(jìn)行了詳細(xì)的介紹。需要的朋友參考下2013-05-05
Javascript學(xué)習(xí)筆記4 Eval函數(shù)
在初學(xué)JS的時(shí)候就知道這個(gè)函數(shù),卻一直沒有了解過他的用途,也一直都是睜一只眼閉一只眼,這次來深入地了解一下這個(gè)函數(shù)的作用。2010-01-01
Javascript基礎(chǔ)知識(一)核心基礎(chǔ)語法與事件模型
這篇文章主要介紹了Javascript用途及語法,傳統(tǒng)事件及現(xiàn)代事件,是最近這段時(shí)間個(gè)人學(xué)習(xí)javascript的一些心得,分享給大家,有需要的朋友可以參考下2014-09-09

