實踐中悟出的最佳JavaScript開發
JavaScript的很多擴充套件的特性使得它變得更加的犀利,同時也給予程式設計師機會建立更漂亮並且更讓使用者喜歡的網站。儘管很多的開發人員都熱衷於稱讚JavaScript,但仍然不乏有很多人看到它的陰暗面。
使用很多JavaScript程式碼的Web頁面會載入很慢,過多地使用JavaScript使得網頁醜陋和拖沓。很快,如何有效地使用JavaScript成為一個非常火熱的話題。
這裡讓我們列出10個最佳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();
delete yourObject.prototype.anotherFunction = ‘Hello’;
delete yourObject.prototype.anotherMethod = function () { … };
在使用JavaScript類庫之前先學習JavaScript
網際網路充斥著很多的JavaScript 類庫,很多程式設計師都往往使用JS類庫而不理解負面影響。強烈建議你在使用第三方類庫之前學習基本的JS程式碼。
Debug JavaScript程式碼
即使最好的開發人員都會犯錯。為了最大化地減少類似錯誤,請在你的 debugger 中執行你的程式碼,確認你沒有遇到任何細微的錯誤。
最小化DOM訪問
DOM是最複雜的 API,會使得程式碼執行過程變慢。有時候Web頁面可能沒有載入或者載入不完整。最好避免 DOM。
不要用 "SetTimeOut" 和 "Setinterval" 方法來作為 "Eval" 的備選
setTimeOut( "document.getID('value')", 3000);
在以上程式碼中 document.getID('value') 在 setTimeOut 方法中被作為字串來處理。 這類似於 eval 方法,在每個程式碼執行中來執行一個字串,因此會降低效能,因此,建議在這些方法中傳遞一個方法。
setTimeOut(yourFunction, 3000);
[] 比 new Array(); 更好
一個常犯的錯誤在於使用當需要陣列的時候使用一個物件或者該使用物件的時候使用一個陣列。但是使用原則很簡單:
“當屬性名稱是小的連續整數,你應該使用陣列。否則,使用一個物件” - Douglas Crockford, JavaScript: Good Parts的作者。
建議:
var a = ['1A','2B'];
避免:
var a = new Array();
a[0] = "1A";
a[1] = "2B";
避免 Eval
你的 JS 在沒有 eval 方法的時候也可以很好地工作。eval 允許訪問JavaScript 編譯器。如果一個字串作為引數傳遞到 eval,那麼它的結果可以被執行,會很大地降低程式碼的效能。儘量避免在產品環境中使用 eval。
儘量不要多次使用 var
在初始每一個變數的時候,程式設計師都習慣使用 var 關鍵字。相反,建議你使用逗號來避免多餘的關鍵字,並且減少程式碼體積。 如下:
var variableOne = ‘string 1’,
variableTwo = ‘string 2’,
variableThree = ‘string 3’;
不要忽略分號 ";"
這往往是大家花費數個小時進行 debug 的原因之一。
本文為Anyforweb技術分享部落格,需要了解網站建設及更多Web應用相關資訊,請訪問anyforweb.com。
相關文章
- JavaScript 開發最佳實踐JavaScript
- Android開發中API層的最佳實踐AndroidAPI
- 10 個你需要了解的最佳 javascript 開發實踐JavaScript
- JavaScript 最佳實踐JavaScript
- Laravel 開發最佳實踐Laravel
- REST開發最佳實踐REST
- 軟體開發中的最佳實踐是什麼?
- JavaScript最佳實踐:效能JavaScript
- 最佳實踐(1):安卓開發安卓
- 軟體開發最佳實踐
- 大型開發專案中 git 工作流的最佳實踐Git
- 谷歌 Web 開發最佳實踐手冊(2.1.2):CSS中的影象谷歌WebCSS
- 24個javascript最佳實踐JavaScript
- 最佳實踐(2):iOS開發篇iOS
- CSS最佳實踐團隊開發CSS
- 物聯網開發最佳實踐
- 谷歌 Web 開發最佳實踐手冊(2.1.1):標籤中的影象谷歌Web
- JavaScript 專案最佳實踐指南JavaScript
- JavaScript 錯誤處理的最佳實踐JavaScript
- SpringCloud 微服務最佳開發實踐SpringGCCloud微服務
- iOS原生混合RN開發最佳實踐iOS
- 最佳實踐(3):Windows應用開發Windows
- 快速軟體開發最佳實踐(2)
- 快速軟體開發最佳實踐(1)
- 寫給自己的git多人開發最佳實踐Git
- Android開發:Translucent System Bar 的最佳實踐Android
- 使用 Mpvue 開發微信小程式的最佳實踐Vue微信小程式
- 【CURL】PHP的CURL開發專案最佳實踐PHP
- 彼之蜜糖,吾之砒霜——聊聊軟體開發中的最佳實踐
- 彼之蜜糖,吾之砒霜 —— 聊聊軟體開發中的最佳實踐
- 超實用的JavaScript技巧及最佳實踐(上)JavaScript
- 最佳實踐丨雲開發CloudBase多環境管理實踐Cloud
- JavaScript 建立物件模式與最佳實踐JavaScript物件模式
- JavaScript Web 應用最佳實踐分析JavaScriptWeb
- 給JavaScript初學者的24條最佳實踐JavaScript
- Go單體服務開發最佳實踐Go
- Laravel 5.7 最佳實踐和開發技巧分享Laravel
- Go 單體服務開發最佳實踐Go