小編推薦： Fundebug提供JS、微信小程序、微信小游戲而昨，Node.js和Java錯(cuò)誤監(jiān)控。真的是一個(gè)很好用的錯(cuò)誤監(jiān)控服務(wù)找田，眾多大佬公司都在使用歌憨。
為了保證可讀性，本文采用意譯而非直譯墩衙。另外务嫡，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)漆改。
既然你對(duì)這篇文章感興趣心铃，我想你應(yīng)該是一位前端開(kāi)發(fā)，也許你有一份不錯(cuò)的工作挫剑、自主創(chuàng)業(yè)甚至是一位自由從業(yè)者去扣。不知你的前端技術(shù)如何，也許你是一位新手樊破，亦或是一位資深開(kāi)發(fā)愉棱。
如果你想讓自己成為一個(gè) JavaScript 大師，在此我列出 12 條必備知識(shí)：
1. 控制流(Control Flow)
我們從最基礎(chǔ)的開(kāi)講哲戚。當(dāng)然奔滑，它也是最重要的一個(gè)知識(shí)點(diǎn)。如果你連這個(gè)都沒(méi)有整明白的話(huà)顺少，那你的代碼生活將會(huì)很艱難朋其。
-
if else: 如果連這個(gè)都不知道王浴，之前怎么碼代碼的？ -
switch: 當(dāng)有很多的情況要處理(>2)的時(shí)候梅猿，用它準(zhǔn)沒(méi)錯(cuò)氓辣。 -
for: 不要去編寫(xiě)重復(fù)的代碼，請(qǐng)使用 for袱蚓。for of和for in都十分便利筛婉。一個(gè)很大的優(yōu)勢(shì)在于 for 循環(huán)是阻塞式的，可以配合async await使用癞松。 - 高階的條件語(yǔ)句: 使用三元運(yùn)算符或則邏輯判斷爽撒。如果想把代碼寫(xiě)得簡(jiǎn)潔，甚至不需要存儲(chǔ)中間值的話(huà)响蓉，可以這么做硕勿。
// 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. 異常處理
不管前端還是后端工程師，作為一個(gè)新手枫甲，經(jīng)常會(huì)使用console.log或則console.error來(lái)處理錯(cuò)誤源武。為了寫(xiě)出健壯的應(yīng)用，則需要改掉到處使用 console.log 的習(xí)慣想幻，構(gòu)建自己的異常處理器粱栖，然后優(yōu)雅地處理異常。
你也許對(duì)如何處理異常很感興趣脏毯，可以看看我寫(xiě)的這篇文章闹究。
3. 數(shù)據(jù)模型
需要想清楚如何組織數(shù)據(jù)(合并或則分離)，這不僅僅關(guān)乎在數(shù)據(jù)庫(kù)里如何定義其模型食店，同時(shí)也包含了函數(shù)參數(shù)渣淤，定義的變量、對(duì)象等等吉嫩。
const calcShape = (width, height, depth, color, angle) => {...}
const calcShape = ({width, height, depth, color, angle}) => {...}
4. 異步性
這個(gè)是 JavaScript 非常重要的一個(gè)特性价认，要么需要從服務(wù)器獲取數(shù)據(jù)或則在服務(wù)器端異步去處理請(qǐng)求。幾乎在所有的情況下自娩，都要面對(duì)異步用踩。如果搞不清楚異步，可能會(huì)遇到非常奇怪的報(bào)錯(cuò)忙迁，以至于要花費(fèi)幾個(gè)小時(shí)去搞定它脐彩。如果你知道異步，但是沒(méi)有完全理解动漾，那么可能掉入“回調(diào)地獄”丁屎。如今荠锭，最好的方法是使用 Promises 和async await旱眯。
5. 操作 DOM
對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，通常已經(jīng)學(xué)會(huì)了 jQuery，似乎不需要再去了解如何直接操縱 DOM 的技巧删豺。甚至直接使用前端框架共虑，根本不需要去操縱 DOM 了。但是呀页，我認(rèn)為對(duì)于理解前端 JavaScript妈拌，這是必不可少的一環(huán)。知道 DOM 的工作原理以及如何操縱 DOM 元素會(huì)讓你對(duì)網(wǎng)頁(yè)的工作機(jī)制有更加清楚的理解蓬蝶。而且尘分，盡管使用了前端框架，總有些情況下你需要直接操縱 DOM丸氛。打個(gè)比方培愁，如果僅僅只是想訪(fǎng)問(wèn)某個(gè)元素，你肯定不想把整個(gè) jQuery 都導(dǎo)入到項(xiàng)目中吧缓窜。
6. Node.js / Express
作為一名前端開(kāi)發(fā)定续，依然需要學(xué)習(xí)一點(diǎn) Node.js。最好懂得如何用 Express 快速搭建一個(gè)服務(wù)器禾锤，并且使用路由功能私股。JavaScript 作為一門(mén)“腳本”語(yǔ)言，很適合定義各種自動(dòng)化任務(wù)恩掷，因此知道如何讀取文件倡鲸，操縱 Buffer 可以助你構(gòu)建工作流。
7. 函數(shù)式編程
函數(shù)式編程和面向?qū)ο缶幊棠膫€(gè)更好的爭(zhēng)論由來(lái)已久黄娘。其實(shí)旦签，你可以使用任何一種編程方式達(dá)到相同的目的。在 JavaScript 中寸宏，事情變得簡(jiǎn)單宁炫，兩種方式任你挑選。像lodash就以函數(shù)式的角度提供了非常多的工具函數(shù)氮凝。如今羔巢，甚至很多函數(shù)已經(jīng)內(nèi)置實(shí)現(xiàn)，無(wú)需導(dǎo)入外部庫(kù)罩阵，比如map,reduce,filter,forEach,find竿秆。
8. 面向?qū)ο缶幊?/h4>
和函數(shù)式編程類(lèi)似，你同樣需要熟悉面向?qū)ο蟮?JavaScript 編程稿壁。我曾經(jīng)很長(zhǎng)一段時(shí)間拒絕在 JavaScript 中使用面向?qū)ο笥母郑呛髞?lái)發(fā)現(xiàn)使用對(duì)象/類(lèi)/實(shí)例的方式確實(shí)會(huì)更加合適。類(lèi)（class)廣泛使用于 React, Mobx 或則一些自定義的構(gòu)造函數(shù)中傅是。
9. 前端框架
當(dāng)今最流行的三大框架：React.js匪燕，Angular 和 Vue.js蕾羊。如果你在找一個(gè)前端的工作，在簡(jiǎn)歷上面至少需要列出它們其中之一帽驯。盡管它們更新很快龟再，你需要理解它們總體的工作原理。而且尼变，對(duì)底層原理的理解可以讓你更好地使用框架編寫(xiě)應(yīng)用利凑。如果還不確定上哪輛車(chē)，我建議學(xué)習(xí) React.js嫌术。我已經(jīng)使用了好些年哀澈，并且不后悔當(dāng)初的選擇。(譯者建議 Vue.js度气，簡(jiǎn)單好用上手快)
10. 編譯(transpilation)/打包
很不幸日丹，在 Web 開(kāi)發(fā)中這一工作占了很大比重。一方面我又不能說(shuō)不幸蚯嫌，它使得我們可以用最新的特性來(lái)編寫(xiě)代碼哲虾。我說(shuō)不幸是因?yàn)槲覀冃枰獣r(shí)刻注意新的特性在某些舊版本的瀏覽器不支持，需要將其翻譯到低版本瀏覽器解釋的代碼择示。業(yè)界的通用標(biāo)準(zhǔn)是babel.js束凑，你需要熟悉它。對(duì)于打包栅盲，可以使用老大哥Webpack 汪诉，或則后起之秀parcel。我傾向于使用 parcel谈秫，盡管不完美扒寄，但是它性能很好，而且配置方便拟烫。
11. 正則表達(dá)式
不僅僅針對(duì) JavaScript该编，但是真的非常有用，也很容易讓人迷惑硕淑。掌握正則表達(dá)式會(huì)花點(diǎn)時(shí)間课竣，不需要記住所有的情況，可以邊查邊用置媳。
12. 測(cè)試
正如Paul Kamma指出于樟，在軟件開(kāi)發(fā)中，測(cè)試真的是一個(gè)非常重要的部分拇囊。JavaScript 也不例外迂曲，在發(fā)布新功能前，最好是(一定要)對(duì)代碼進(jìn)行充分的測(cè)試寥袭。甚至某些情況下需要手動(dòng)操作路捧，也是值得的关霸。當(dāng)然，使用自動(dòng)化測(cè)試工具才能一勞永逸鬓长，測(cè)試包括：?jiǎn)卧獪y(cè)試谒拴、端到端測(cè)試尝江、加載速度測(cè)試涉波、安全測(cè)試或則前端測(cè)試(組件是否加載)。目前市面上已經(jīng)有很多用于測(cè)試的工具炭序，比如 enzyme, jasmine, mocha, chai 等等啤覆。我現(xiàn)在最喜歡的是ava.js。
關(guān)于Fundebug
Fundebug專(zhuān)注于JavaScript惭聂、微信小程序窗声、微信小游戲、支付寶小程序辜纲、React Native笨觅、Node.js和Java線(xiàn)上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線(xiàn)耕腾，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件见剩，付費(fèi)客戶(hù)有Google、360扫俺、金山軟件苍苞、百姓網(wǎng)等眾多品牌企業(yè)。歡迎大家免費(fèi)試用狼纬！
版權(quán)聲明
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2019/04/03/handle-erros-in-js/
您可能感興趣的
- 10個(gè)JavaScript難點(diǎn)
- 10個(gè)最佳ES6特性
- 重新思考單元測(cè)試
- 前端錯(cuò)誤收集（Vue.js羹呵、微信小程序）
- 不要爭(zhēng)了！技術(shù)選擇沒(méi)那么重要
- 用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常
- 沒(méi)有Fundebug不能復(fù)現(xiàn)的BUG
- 黑科技疗琉！Fundebug支持網(wǎng)頁(yè)錄屏!
- 你還在等著用戶(hù)反饋BUG?
- Fundebug抓到了這個(gè)Bug
- Fundebug支持Source Map
- Fundebug上線(xiàn)2周年冈欢！陪你一起Debug！
- Fundebug三周年盈简！生日快樂(lè)涛癌！
