好程式設計師Web前端教程分享JavaScript開發技巧
好程式設計師 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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師web前端教程分享javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享JavaScript簡寫方法程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享HTML5面試技巧程式設計師Web前端HTML面試
- 好程式設計師分享Web前端開發工具程式設計師Web前端
- 好程式設計師web前端教程分享前端javascript練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端 javascript 練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享JavaScript Math(算數)物件程式設計師Web前端JavaScript物件
- 好程式設計師web前端培訓分享九個JavaScript小技巧程式設計師Web前端JavaScript
- 好程式設計師Web前端分享無法忽視的JavaScript技巧程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題之promise程式設計師Web前端JavaScriptPromise
- 好程式設計師web前端教程分享JavaScript的執行機制!程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題Ajax封裝程式設計師Web前端JavaScript封裝
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- 好程式設計師web前端教程分享js閉包程式設計師Web前端JS
- 好程式設計師web前端教程分享js模板模式程式設計師Web前端JS模式
- 好程式設計師web前端教程JavaScript系列之HTTP程式設計師Web前端JavaScriptHTTP
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題之閉包案例程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享js reduce方法使用教程程式設計師Web前端JS
- 好程式設計師web前端教程之前端模組化開發程式設計師Web前端
- 好程式設計師web前端分享移動前端開發和web前端開發的區別程式設計師Web前端
- 好程式設計師分享Web前端開發就業前景如何?程式設計師Web前端就業
- 好程式設計師web前端培訓分享JavaScript框架J程式設計師Web前端JavaScript框架
- 好程式設計師web前端培訓分享學習JavaScript程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享Vue學習心得程式設計師Web前端Vue
- 好程式設計師web前端教程:字串程式設計師Web前端字串
- 好程式設計師web前端教程分享web中CSS絕對定位程式設計師Web前端CSS
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端教程分享web前端入門基礎知識程式設計師Web前端
- 好程式設計師web前端培訓分享JavaScript學習指南程式設計師Web前端JavaScript
- 好程式設計師web前端分享JavaScript中常見的反模式程式設計師Web前端JavaScript模式
- 好程式設計師web前端分享javascript列舉演算法程式設計師Web前端JavaScript演算法
- 好程式設計師web前端教程分享JavaScript學習筆記之Event事件二程式設計師Web前端JavaScript筆記事件