編寫更魯棒的JavaScript代碼:7個最佳實踐

全文共2976字,預計學習時長6分鐘

來源:Pexels

 

1. 編寫構造函數時,在 .prototype上添加方法

 

根據我頭兩年接觸JavaScript的經歷,如果你是一名JavaScript新手,可能會對這部分有些陌生。

 

(請記住,這並不適用於類,因爲類已經將方法附加到它們的prototype上。)

 

以下是構造函數的一個示例:

 

functionFrog(name, gender)  {
  this.name= name
  this.gender= gender
}
Frog.prototype.leap=function(feet) {
  console.log(`Leaping ${feet}ft into the  air`)
}

 

爲什麼不像以下示例一樣,直接附加leap方法呢?

 

functionFrog(name, gender)  {
  this.name= name
  this.gender= gender
  this.leap=function(feet) {
    console.log(`Leaping ${feet}ft into the  air`)
  }
}

 

當把方法直接添加到prototype時,它們將在構造函數創建的所有實例之間共享。

 

換句話說,使用上個例子,如果創建三個獨立的 Frog (從 this.leap = function() {...}),然後以創建三個獨立的副本結束。這是一個問題,因爲leap方法總是保持不變,不需要在實例上建立自己的副本。

 

最終導致本可以避免的性能下降。this.name 和this.gender屬性需要在實例上定義,因爲現實生活中,frog可能有自己的名字和性別,所以纔在實例級別上創建它們。

 

這裏是流行的request 包使用這種方法的一個示例(在GitHub上)。

 

2. 使用TypeScript

 

TypeScript不僅能爲類型安全提供強大防禦,還能幫助預防錯誤,已經在JavaScript社區中得到了廣泛應用。

 

使用TypeScript能使編譯器在代碼運行之前對潛在的錯誤進行監測並顯示警告。

 

但這還遠不能解釋爲什麼TypeScript可以適用於任何情況。TypeScript最好的一點是允許在主流瀏覽器支持之前使用JavaScript中的新特徵,因爲這些特徵被編譯成更早期的JavaScript版本,因此能在舊版本的瀏覽器中運行。

 

3. 編寫測試

 

如果要認真處理一個項目,必須使用測試,這樣應用程序才更能夠更加可預測、少出錯、並靈活應對未來的變化。換句話說,如果打算做一個經得起時間考驗的項目,沒有比在整個代碼中建立測試更好的方法。在代碼中投入的測試越多,將其應用於生產環境後,對它的信心也會越多。

 

測試最好的部分是什麼?是能捕捉錯誤,使其無從出現——有人不想要那種能力嗎?我確定我想要。這就是我在項目中寫單元測試的原因。

 

來源:Pexels

 

4. 使用JSON.parse或JSON.stringify時,務必考慮使用 try/catch

 

JavaScript中,當把JSON作爲輸入傳遞給JSON.parse時,需要一個正確格式的JSON作爲第一個參數。如果格式不正確,會提示JSON解析錯誤。

 

來自JSON解析錯誤的危險是接受無效的JSON會導致應用程序崩潰。最近我們的一個web項目失敗了,因爲另一個內置程序包沒有在try/catch裏安裝JSON.parse 。最終導致了web頁面失效,而且由於JavaScript運行時被破壞,除非內置程序包修復它,否則無法修正錯誤。

 

SyntaxError: Unexpected token }in JSON at position 107

不應總是期望有效的JSON輸入,因爲它會收到如“>”的奇怪字符,這在今天是很常見的。

 

5. 使用常規的.type屬性進行區分

 

這個方法很棒,得到了廣泛使用。React開發人員可能每天都能看到這種做法,特別是使用Redux工作時。

 

使用類似方法也能使開發流程變得無比簡單,因爲它甚至可以很好的記錄自己。

 

functioncreateSpecies(type, name,  gender) {
  if (type ==='frog') {
    returncreateFrog(name, gender)
  } elseif (type ==='human') {
    returncreateHuman(name, gender)
  } elseif (type == undefined) {
    thrownewError('Cannot create  a species with an unknown type')
  }
}
const myNewFrog =createSpecies('frog', 'sally', 'female')

6. 使用工廠函數(factory function)

 

如果你不知道什麼是工廠函數,那麼它就是一個返回對象的函數(它既不是類,也不是構造函數)。通過這個簡單概念,就可以利用JavaScript及其特徵來創建強大健壯的應用程序。

 

必須知道,當函數被new關鍵字調用時,該函數就不再是工廠函數了。

 

爲什麼要用工廠函數?

 

使用工廠函數可以輕鬆的生成對象實例,且無需涉及類或new關鍵字。

 

其本質上意味着,它們最終會被當做函數來對待,即可用於組合對象、函數,甚至Promise函數。這表明可以將工廠函數混合搭配,以創建一個升級版工廠函數,然後繼續和別的函數或對象組合創建成更強的工廠函數。其可能性是無窮無盡的。

 

考慮到這一點,將其與好的代碼實踐相結合,它便開始大放光彩了。

 

以下是工廠函數的一個簡單示例:

 

functioncreateFrog(name) {
  const children = []
  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}
const mikeTheFrog =createFrog('mike')

 

當使用足夠多的工廠函數後,會意識到工廠函數比類構造函數有更強的可重用性。這減少了代碼量,縮短了代碼重構時間(因爲工廠函數最終會返回任意對象),縮短了從一個代碼到另一個代碼的管理時間。

來源:Pexels

 

7. 使函數儘可能的簡單

 

衆所周知,在JavaScript中很可能有同時做很多事情的大型函數。

 

編程新手可能覺得這是一件好事——之前當我寫了很大篇幅可以工作的代碼後,我的自我感覺非常好。這對我來說很重要,並給予我很大信心。畢竟它能正常運行,我就把自己的代碼有多麼冗長這件事拋之腦後了。天哪,當時太幼稚了。

 

如果想寫更易維護的、簡單的、少出錯的代碼,最好使它儘量簡潔短小。代碼越簡潔,單獨測試也會越容易。

 

如果你更喜歡函數式編程範式,這一點尤其重要。函數執行一件事就應該把它做好,這是常識。

 

希望對你有用,獲得更完美的JavaScript的最佳實踐。

留言 點贊 關注

我們一起分享AI學習與發展的乾貨
歡迎關注全平臺AI垂類自媒體 “讀芯術”

(添加小編微信:dxsxbb,加入讀者圈,一起討論最新鮮的人工智能科技哦~)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章