好程式設計師Web前端教程分享JavaScript開發技巧

好程式設計師IT發表於2019-06-24

   好程式設計師 Web 前端 教程分享 JavaScript 開發技巧 ,相信知道 Web 前端的小夥伴都 熟悉 Javascript 的很多擴充套件的特性是的它變得更加的犀利,同時也給予程式設計師機會建立更漂亮並且更讓使用者喜歡的網站 ,那麼新手應該知道哪些必備的 JavaScript 開發技巧 呢?下面我們就一起來看一下。

 

  儘管很多的開發人員都樂於頌揚 javascript ,但是仍舊有人看到它的陰暗面。

 

  使用很多 javascript 程式碼的 Web 頁面會載入很慢,過多的使用 javascript 使得網頁醜陋和拖沓。很快如何有效地使用 javascript 成為一個非常火熱的話題。

 

  1 、儘可能的保持程式碼簡潔

 

  可能大家都聽到過了 N 遍這個程式碼簡潔問題了。作為一個開發人員你可能在你的程式碼開發過程中使用了很多次,但千萬不要在 js 開發中忘記這點。

 

  儘量在開發模式中新增註釋和空格,這樣保持程式碼的可讀性

 

  在釋出到產品環境前請將空格和註釋都刪除,並且儘量縮寫變數和方法名

 

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

 

  2 、思考後再修改 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(){ };

 

  3 DebugJavascript 程式碼

 

  即使最好的開發人員都會犯錯。為了最大化的減少類似錯誤,請在你的 debugger 中執行你的程式碼,確認你沒有遇到任何細微的錯誤。

 

  4 、避免 Eval

 

  你的 JS 在沒有 eval 方法的時候也可以很好的工作。 eval 允許訪問 javascript 編譯器。如果一個字串作為引數傳遞到 eval ,那麼它的結果可以被執行。

 

  這會很大的降低程式碼的效能。儘量避免在產品環境中使用 eval

 

  5 、最小化 DOM 訪問

 

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

 

  6 、在使用 javascript 類庫之前先學習 javascript

 

  網際網路充斥著很多的 javascript 類庫,很多程式設計師都往往使用 js 類庫而不理解負面影響。強烈建議你在使用第三方類庫之前學習基本的 JS 程式碼,否則,你就準備著倒黴吧。

 

  7 、不要用“ SetTimeOut ”和“ Setinterval ”方法來作為“ Eval ”的備選

 

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

 

  在以上程式碼中 document.getID( value ) setTimeOut 方法中被作為字串來處理。這類似於 eval 方法,在每個程式碼執行中來執行一個字串,因此會降低效能,因此,建議在這些方法中傳遞一個方法。

 

  setTimeOut(yourFunction,3000);

 

  8 [] newArray(); 更好

 

  一個常犯的錯誤在於使用當需要陣列的時候使用一個物件或者該使用物件的時候使用一個陣列。但是使用原則很簡單:

 

  “當屬性名稱是小的連續整數,你應該使用陣列。否則,使用一個物件”– DouglasCrockford,JavaScript:GoodParts 的作者 .

 

  建議:

 

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

 

  避免:

 

  vara=newArray();

 

  a[0]="1A";

 

  a[1]="2B";

 

  9 、儘量不要多次使用 var

 

  在初始每一個變數的時候,程式設計師都習慣使用 var 關鍵字。相反,建議你使用逗號來避免多餘的關鍵字,並且減少程式碼體積。如下:

 

  varvariableOne='string1',

 

  variableTwo='string2',

 

  variableThree='string3';

 

  10 、不要忽略分號“ ;

 

  這往往是大家花費數個小時進行 debug 的原因之一。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2648574/,如需轉載,請註明出處,否則將追究法律責任。

相關文章