JavaScript大師必須掌握的12個知識點

譯者按： 前端技術涉及的愈來愈多！

• 原文: 10 things to learn on the way to becoming a JavaScript Master
• 譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。

既然你對這篇文章感興趣，我想你應該是一位前端開發，也許你有一份不錯的工做、自主創業甚至是一位自由從業者。不知你的前端技術如何，也許你是一位新手，亦或是一位資深開發。 若是你想讓本身成爲一個 JavaScript 大師，在此我列出 12 條必備知識：

1. 控制流(Control Flow)

咱們從最基礎的開講。固然，它也是最重要的一個知識點。若是你連這個都沒有整明白的話，那你的代碼生活將會很艱難。

• if else : 若是連這個都不知道，以前怎麼碼代碼的？
• switch : 當有不少的狀況要處理(>2)的時候，用它準沒錯。
• for: 不要去編寫重複的代碼，請使用 for。for of和for in都十分便利。一個很大的優點在於 for 循環是阻塞式的，能夠配合async await使用。
• 高階的條件語句: 使用三元運算符或則邏輯判斷。若是想把代碼寫得簡潔，甚至不須要存儲中間值的話，能夠這麼作。

// ternary
console.log(new Date().getHours() < 12 ? "Good Morning!" : "Time for a siesta");

// logical operators
const isJsMaster = prompt("Are you a JavaScript master?") === "true";
console.log(isJsMaster && "proficient coder");

2. 異常處理

無論前端仍是後端工程師，做爲一個新手，常常會使用console.log或則console.error來處理錯誤。爲了寫出健壯的應用，則須要改掉處處使用 console.log 的習慣，構建本身的異常處理器，而後優雅地處理異常。 你也許對如何處理異常很感興趣，能夠看看我寫的這篇文章。

3. 數據模型

須要想清楚如何組織數據(合併或則分離)，這不只僅關乎在數據庫裏如何定義其模型，同時也包含了函數參數，定義的變量、對象等等。

const calcShape = (width, height, depth, color, angle) => {...}
const calcShape = ({width, height, depth, color, angle}) => {...}

4. 異步性

這個是 JavaScript 很是重要的一個特性，要麼須要從服務器獲取數據或則在服務器端異步去處理請求。幾乎在全部的狀況下，都要面對異步。若是搞不清楚異步，可能會遇到很是奇怪的報錯，以致於要花費幾個小時去搞定它。若是你知道異步，可是沒有徹底理解，那麼可能掉入「回調地獄」。現在，最好的方法是使用 Promises 和async await。

5. 操做 DOM

對於開發者來講，一般已經學會了 jQuery，彷佛不須要再去了解如何直接操縱 DOM 的技巧。甚至直接使用前端框架，根本不須要去操縱 DOM 了。可是，我認爲對於理解前端 JavaScript，這是必不可少的一環。知道 DOM 的工做原理以及如何操縱 DOM 元素會讓你對網頁的工做機制有更加清楚的理解。並且，儘管使用了前端框架，總有些狀況下你須要直接操縱 DOM。打個比方，若是僅僅只是想訪問某個元素，你確定不想把整個 jQuery 都導入到項目中吧。

6. Node.js / Express

做爲一名前端開發，依然須要學習一點 Node.js。最好懂得如何用 Express 快速搭建一個服務器，而且使用路由功能。JavaScript 做爲一門「腳本」語言，很適合定義各類自動化任務，所以知道如何讀取文件，操縱 Buffer 能夠助你構建工做流。

7. 函數式編程

函數式編程和麪向對象編程哪一個更好的爭論由來已久。其實，你可使用任何一種編程方式達到相同的目的。在 JavaScript 中，事情變得簡單，兩種方式任你挑選。像lodash就以函數式的角度提供了很是多的工具函數。現在，甚至不少函數已經內置實現，無需導入外部庫，好比map,reduce,filter,forEach,find。

8. 面向對象編程

和函數式編程相似，你一樣須要熟悉面向對象的 JavaScript 編程。我曾經很長一段時間拒絕在 JavaScript 中使用面向對象，可是後來發現使用對象/類/實例的方式確實會更加合適。類（class)普遍使用於 React, Mobx 或則一些自定義的構造函數中。

9. 前端框架

當今最流行的三大框架：React.js，Angular 和 Vue.js。若是你在找一個前端的工做，在簡歷上面至少須要列出它們其中之一。儘管它們更新很快，你須要理解它們整體的工做原理。並且，對底層原理的理解可讓你更好地使用框架編寫應用。若是還不肯定上哪輛車，我建議學習 React.js。我已經使用了好些年，而且不後悔當初的選擇。(譯者建議 Vue.js，簡單好用上手快)

10. 編譯(transpilation)/打包

很不幸，在 Web 開發中這一工做佔了很大比重。一方面我又不能說不幸，它使得咱們能夠用最新的特性來編寫代碼。我說不幸是由於咱們須要時刻注意新的特性在某些舊版本的瀏覽器不支持，須要將其翻譯到低版本瀏覽器解釋的代碼。業界的通用標準是babel.js，你須要熟悉它。對於打包，可使用老大哥Webpack ，或則後起之秀parcel。我傾向於使用 parcel，儘管不完美，可是它性能很好，並且配置方便。

11. 正則表達式

不只僅針對 JavaScript，可是真的很是有用，也很容易讓人迷惑。掌握正則表達式會花點時間，不須要記住全部的狀況，能夠邊查邊用。

12. 測試

正如Paul Kamma指出，在軟件開發中，測試真的是一個很是重要的部分。JavaScript 也不例外，在發佈新功能前，最好是(必定要)對代碼進行充分的測試。甚至某些狀況下須要手動操做，也是值得的。固然，使用自動化測試工具才能一勞永逸，測試包括：單元測試、端到端測試、加載速度測試、安全測試或則前端測試(組件是否加載)。目前市面上已經有不少用於測試的工具，好比 enzyme, jasmine, mocha, chai 等等。我如今最喜歡的是ava.js。

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址： https://blog.fundebug.com/2019/04/03/handle-erros-in-js/