譯者按： 前端技術涉及的越來越多！
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。
既然你對這篇文章感興趣，我想你應該是一位前端開發，也許你有一份不錯的工作、自主創業甚至是一位自由從業者。不知你的前端技術如何，也許你是一位新手，亦或是一位資深開發。 如果你想讓自己成為一個 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以及本文地址： blog.fundebug.com/2019/04/03/…