MDN 的人們正在討論將他們的程式碼範例現代化到現代 JavaScript 標準。

Home Javascript MDN 的人們正在討論將他們的程式碼範例現代化到現代 JavaScript 標準。
MDN 的人們正在討論將他們的程式碼範例現代化到現代 JavaScript 標準。
Javascript

MDN Web Docs 是一個開源的協作專案,它記錄了 Web 平台技術,包括 CSS、HTML、JavaScript 和 Web API,還為初級開發人員和學生提供廣泛的 🧑‍🎓 學習資源。

🙌 MDN 的使命
MDN 的使命是為更好的網際網路提供藍圖,並授權新一代開發人員和內容創造者來建構它。

MDN Web Docs 的強大之處在於其龐大的活躍讀者和貢獻者社區。 自 2005 年以來,大約有 45,000 名貢獻者創建了我們熟悉和喜愛的文件。 貢獻者共同創建了超過 45,000 個文件,這些文件構成了供全球 Web 開發人員使用的最新、全面且免費的資源。 除了英文文章,超過 35 名志願者負責中文、法文、日文、韓文、葡萄牙文、俄文和西班牙文的翻譯和本地化工作。

在他們的編號第 143 “Modernization of (static) code examples” 的討論中,提及到:

  1. 使用 const 與 let 而非 var [ES6/2015]
    進展中: No more vars in JavaScript docs content#16614 and No more vars in Web/API content#16662 thanks to @wbamberg and numerous contributors (👏 )
  2. 當利用類似陣列的結構時,使用 for...of 而非傳統的 for(;;) 
    進展中: Modernize JS in Web/API: Use for…of when possible content#18103 (Help welcome! 🧑‍🤝‍🧑 )
  3. 盡量使用 arrow functions [ES6/2015]
    We could look at the function keyword in samples, and check.<
    Note that we want to keep the parentheses around the parameters, even when there is only one.
  4. 盡量使用 implicit return (a.k.a. concise body) 隨著 arrow functions [ES6/2015]
    (e) => { return e.id } 可以寫成 (e) => e.id. (blog)
  5. 盡量使用 template literals  [ES6/2015]
    我們可以在範例中找出絕大多數的 'text' + ... + 'text'

額外的討論包括:

Additions from the discussion here:

  1. 使用 Object.hasOwn() 而非 Object.hasOwnProperties() [ES2022]
  2. == -> === [pre-ES6]
    這是目前的標準。
  3. 將 forEach 替換為 for...of [ES6/2015]
    盡量使用 for...of ,接著是 forEach(),最後如真需要才是 for(;;) 。
  4. 修復那些可以使用 method definition 語法的函式定義 [ES6/2015]
    Example of such change.
    進展中: Added shorter method definitions in objects for code examples content#18370
  5. Replace a || b and a ? a : b by the nullish coalescing operator (??), and the optional chaining operator (.?) when pertinent. link to a concrete example [both ES2020]
  6. Promise.finally() [ES2018]
  7. Use async functions (await) (they already are ubiquitous on MDN for good reasons…) [ES2017]
  8. Boolean 測試時使用捷徑 — 使用 x 和 !x,而非 x === true 、 x === false
  9. 禁止變數名稱使用 Hungarian notation
  10. 當建立陣列時,使用 literals ,而非 constructors — (const x = ['bli', 'bla', 'blo'] ,而非 const x = new Array('bli', 'bla', 'blo'))
  11. 對於元件的成員,盡量使用 dot notation (objName.objMember) 而非 bracket notation (objName['objMember'])
  12. ESLint rule to avoid it.

討論持續進行中,有興趣的人也可以前往加入哦