好程序員Web前端教程分享JavaScript開發技巧

好程序員Web前端教程分享JavaScript開發技巧，相信知道Web前端的小夥伴都熟悉，Javascript的不少擴展的特性是的它變得更加的犀利，同時也給予程序員機會建立更漂亮而且更讓用戶喜歡的網站，那麼新手應該知道哪些必備的JavaScript開發技巧呢？下面咱們就一塊兒來看一下。

 

　　儘管不少的開發人員都樂於頌揚javascript，可是仍舊有人看到它的陰暗面。

 

　　使用不少javascript代碼的Web頁面會加載很慢，過多的使用javascript使得網頁醜陋和拖沓。很快如何有效地使用javascript成爲一個很是火熱的話題。

 

一、儘量的保持代碼簡潔

 

　　可能你們都聽到過了N遍這個代碼簡潔問題了。做爲一個開發人員你可能在你的代碼開發過程當中使用了不少次，但千萬不要在js開發中忘記這點。

 

　　儘可能在開發模式中添加註釋和空格，這樣保持代碼的可讀性

 

　　在發佈到產品環境前請將空格和註釋都刪除，而且儘可能縮寫變量和方法名

 

　　使用第三方工具幫助你實現壓縮javascript。

 

二、思考後再修改prototypes

 

　　添加新的屬性到對象prototype中是致使腳本出錯的常見緣由。

 

yourObject.prototype.anotherFunction='Hello';

 

yourObject.prototype.anotherMethod=function(){...}

 

　　在上面代碼中，全部的變量都會被影響，由於他們都繼承於yourObject。這樣的使用會致使意想不到的行爲。因此建議在使用完後刪除相似的修改。

 

yourObject.prototype.anotherFunction='Hello';

 

yourObject.prototype.anotherMethod=function(){…};

 

test.anotherMethod();

 

deleteyourObject.prototype.anotherFunction='Hello';

 

deleteyourObject.prototype.anotherMethod=function(){…};

 

三、DebugJavascript代碼

 

　　即便最好的開發人員都會犯錯。爲了最大化的減小相似錯誤，請在你的debugger中運行你的代碼，確認你沒有遇到任何細微的錯誤。

 

四、避免Eval

 

　　你的JS在沒有eval方法的時候也能夠很好的工做。eval容許訪問javascript編譯器。若是一個字符串做爲參數傳遞到eval，那麼它的結果能夠被執行。

 

　　這會很大的下降代碼的性能。儘可能避免在產品環境中使用eval。

 

五、最小化DOM訪問

 

DOM是最複雜的API，會使得代碼執行過程變慢。有時候Web頁面可能沒有加載或者加載不完整。最好避免DOM。

 

六、在使用javascript類庫以前先學習javascript

 

　　互聯網充斥着不少的javascript類庫，不少程序員都每每使用js類庫而不理解負面影響。強烈建議你在使用第三方類庫以前學習基本的JS代碼，不然，你就準備着倒黴吧。

 

七、不要用「SetTimeOut」和「Setinterval」方法來做爲「Eval」的備選

 

setTimeOut("document.getID('value')",3000);

 

　　在以上代碼中document.getID(‘value’)在setTimeOut方法中被做爲字符串來處理。這相似於eval方法，在每一個代碼執行中來執行一個字符串，所以會下降性能，所以，建議在這些方法中傳遞一個方法。

 

setTimeOut(yourFunction,3000);

 

八、[]比newArray();更好

 

　　一個常犯的錯誤在於使用當須要數組的時候使用一個對象或者該使用對象的時候使用一個數組。可是使用原則很簡單：

 

「當屬性名稱是小的連續整數，你應該使用數組。不然，使用一個對象」–DouglasCrockford,JavaScript:GoodParts的做者.

 

　　建議：

 

vara=['1A','2B'];

 

　　避免：

 

vara=newArray();

 

a[0]="1A";

 

a[1]="2B";

 

九、儘可能不要屢次使用var

 

　　在初始每個變量的時候，程序員都習慣使用var關鍵字。相反，建議你使用逗號來避免多餘的關鍵字，而且減小代碼體積。以下：

 

varvariableOne='string1',

 

variableTwo='string2',

 

variableThree='string3';

 

十、不要忽略分號「;」

 

　　這每每是你們花費數個小時進行debug的緣由之一。