今天，小芯給大家分享一些提高JavaScript編碼能力的應(yīng)用方法，學(xué)習(xí)并運用到實踐中，你也可以成為編碼熟練工喲~

編輯器

目前，編輯器種類繁多，人們不知道選擇哪種編輯器來提高工作效率。

于我而言，除了使用Android Studio或使用Xcode的iOS所需的Android代碼外，我大多只使用Visual Studio Code。

這是由Microsoft開發(fā)的編輯器。這是Microsoft開發(fā)的，聽起來不錯!!!幾乎支持所有語言，無數(shù)附加插件，AI代碼建議，漂亮的界面和淺色調(diào)(不是Sublime Text，但…仍然是淺色)

過去，我只使用Sublime Text(當(dāng)時不流行VSCode)。大量的插件(將在下文討論)為我節(jié)省了很多時間，例如自動檢測并修復(fù)錯誤，格式代碼，git鏡頭，終端等……，因為不再需要解決編碼時常見的小錯誤。

如果編寫PHP，一定會喜歡PHPStorm。如果編寫Python，則一定會喜歡PyCharm。毋庸置疑，這些編輯器功能強大，但是，只支持一種語言。本人是一個全棧開發(fā)人員，具有JavaScript、HTML、PHP、NodeJS和React Docker的經(jīng)驗...我使用的是VSCode，因為它功能非常強大，支持很多插件，尤其是自動完成功能非常不錯。

對ESLint一見鐘情

在語法錯誤上，我花費了最多時間，同時也最讓我沮喪，諸如未聲明變量/函數(shù)，空指針，缺少重音符號之類的錯誤……隨著代碼越來越多，一次必須讀取數(shù)十個文件，這很容易讓眼睛疲倦，頭腦一團亂，手也開始顫抖地鍵入每一行代碼，從而容易粗心大意并犯錯。

在使用 ESLint時，這個插件可以幫助找出錯誤，檢查語法和格式代碼，因此能夠降低編碼時出現(xiàn)的漏洞，以及根據(jù)現(xiàn)行標(biāo)準(zhǔn)格式化時，能讓代碼看上去更好看。ESLint還支持其他許多老大哥：JavaScript，React，Vue等

尤其是結(jié)合使用ESLint和VSCode，這搭配簡直完美?？梢粤⒖虣z查代碼鍵入，查看是否存在錯誤或語法問題，并提供有關(guān)如何使用函數(shù)和變量以實現(xiàn)優(yōu)質(zhì)效果的建議。還有自動格式的代碼，你一定會喜歡上它。

除了ESLint，還可以使用Prettier來格式化代碼，但是本人更喜歡ESLint，因為可支持錯誤檢測和提供優(yōu)秀代碼建議。

優(yōu)秀目錄結(jié)構(gòu)

我最近開始“接受”并告訴自己一件事：

不要從一開始就嘗試優(yōu)化項目結(jié)構(gòu)

過去，開始著手一個項目時，不論項目或大或小，我總是會花很多時間選擇優(yōu)秀的項目結(jié)構(gòu)。我在谷歌上看了各種“ NodeJS文件夾結(jié)構(gòu)的優(yōu)秀實踐”，“ ReactJS代碼結(jié)構(gòu)……”，但仍然想知道這個結(jié)構(gòu)是否是很優(yōu)秀的，我應(yīng)該選擇這個編碼框架嗎?這非常耗時。

而且我還意識到，盡管起初我嘗試使用一種本來很好的結(jié)構(gòu)，但是幾天后，代碼卻變得一團糟。因為我的系統(tǒng)思維不好，所以起初代碼寫得有多么漂亮并不重要，最后還是出問題了。

不要過多地考慮選擇哪種架構(gòu)，以及從一開始要如何去組織。選擇一個方向或一個庫、一個框架，并開始進行研究，一邊進行一邊改進，這樣更好也更實用。

如果對結(jié)構(gòu)良好的項目感興趣，我會分享一個名為NestJS的NodeJS框架，我閱讀了許多相關(guān)文檔，發(fā)現(xiàn)它們的體系結(jié)構(gòu)非常好(非常類似于AngularJS，盡管我不太喜歡Angular)

覺得代碼“壞掉”時，使用Console.log

我很確定，console.log是我在編寫JavaScript時使用最多的。這一主要目的是查看感興趣的數(shù)據(jù)是否真實。

我個人認為，無論使用哪種語言，編程都離不開數(shù)據(jù)，因此如果看到任何令人不安的代碼，該代碼也許不正確，就應(yīng)使用console.log進行確認。

也有很多人認為調(diào)試器應(yīng)該看起來更專業(yè)。谷歌還支持將Debug放在代碼行中，以獲得更好的了解。實際上，這對我個人而言不是必需的，console.log還會注意到代碼中的哪一行，使用console.log越快，就會更加方便。我還發(fā)現(xiàn)在臉書上的一些世界著名編碼專家，他們?nèi)匀皇褂胏onsole .log

還應(yīng)該注意到，console.log完成后，請檢查所有內(nèi)容，然后再將其刪除，不要放在git上。這會讓人沮喪，看了眼睛疼(像我一樣)

點評

在編碼過程中，很多時候都需要冗長而復(fù)雜的代碼。人們擔(dān)心，經(jīng)過很長一段時間再次閱讀這些代碼時，就可能不知道這段代碼是做什么的?；蛘邞阎说乐髁x的心，希望以后閱讀這個代碼的人，可以明白代碼的作用。

就個人而言，我發(fā)現(xiàn)寫評論真的很有用，尤其是該項目有很多人參與的時候。而且，我們不想每次不懂時，都跑去問寫這個代碼的朋友，而這個朋友也忙于修復(fù)測試人員布置的大量錯誤。而如果代碼本身可以解釋，那么之后看到該代碼的人就可以馬上就搞清楚，還能節(jié)省時間。

但是評論也必須看起來合理舒適。不必評論所有內(nèi)容。這有時會讓代碼難以閱讀，還讓人的眼睛很不舒服。

在編寫代碼時，我會選擇變量/函數(shù)的名稱，便于理解，不要讓長的類/函數(shù)處理過多內(nèi)容。相反，我會拆分成較小的類/函數(shù)(但不要拆分太多，拆分必須合理，不要再次讓人看著眼睛痛)。在需要時發(fā)表評論，練習(xí)編寫代碼，以便進行“自我解釋”。只需讀一讀，知道其中的作用即可。

使用ES6、7、8、9標(biāo)準(zhǔn)

JavaScript是一門快速發(fā)展的語言，另外還添加了許多強大的功能/庫。據(jù)我所知，每年人們都會發(fā)布名為ECMAScript或ES的JavaScript標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)中的每一個都包含著JavaScript內(nèi)置的新功能。

• 2015 ECMAScript 6(ES6)
• 2016 ECMAScript 7(ES7)
• 2015 ECMAScript 8(ES8)
• 2015 ECMAScript 9(ES9)
• 2015 ECMAScript 10(ES10)
• ….

因此，如果利用ECMA的強大功能，代碼將比僅使用傳統(tǒng)的for和if，while循環(huán)看起來更好，更加優(yōu)化并且看上去更酷(就像本文的作者這般可愛)

以下是我在編碼時最常用的一些函數(shù)/運算符：

跳過 Promise / Callback，直接了解Async / Await

Promise / CallbackWhile

編碼的缺點是，我們必須大量使用API。從后端或第三方調(diào)用API以獲取數(shù)據(jù)和顯示時，需要執(zhí)行以下操作：

如果只想在成功檢索用戶列表之后才調(diào)用另一個API，那么通常需要執(zhí)行以下操作：

想按順序調(diào)用一系列API時，壞事就來了。當(dāng)項目規(guī)模擴大，處理的請求越來越復(fù)雜時，這就是所看到的：

Async / await 是救星

自ES6(2015)起，async/await作為Promise/callbacks替代方法引入，用于處理異步操作。async / await的好處就在于有助于編寫看起來像同步的異步代碼，這些代碼逐行運行，看起來非常整潔。

可以使用async / await重寫上面的代碼：

有一些注意事項：

• await總出現(xiàn)在async之后
• 使用try / catch來捕獲異步函數(shù)中的錯誤處理操作
• await的本質(zhì)是等待Promise返回值，因此使用太多await有時會使應(yīng)用變慢。

使用async / await而不使用常規(guī)Promise / Callback的另一個好處是，使用try / catch可以發(fā)現(xiàn)async / await錯誤。還會發(fā)現(xiàn)try / catchblock中的所有其他錯誤，而不僅僅是async/await

使用Typescript提高代碼質(zhì)量

故事開始了……

我第一次進行編程用的是C語言，然后是Java。這些語言功能強大，需要極其嚴(yán)格的代碼，需要對數(shù)據(jù)類型(字符串，布爾值，…)或訪問規(guī)范(公共，私有，受保護的…)進行清晰完整的定義。那天我非常厭倦運行代碼，因為我不知道它是公共的還是私有的，數(shù)據(jù)類型是什么，于是就一直運行到報告錯誤為止。

之后，開始使用JavaScript(或PHP，Python)，無論數(shù)據(jù)類型如何，它都被大大簡化。只需聲明變量就可以使用：

令x = 
 
1const test ='This is a test' 
 
const arr = [1,2,3,4,5] 

這也是我從一開始就喜歡JS的一個原因，因為語法非常“自由”，不那么混亂，代碼看起來干凈漂亮。但是生活并不像夢想。漸漸地，我意識到，當(dāng)項目有很多人編寫代碼之后，就會重新閱讀代碼。真的很糾結(jié)。因為我不知道這個變量是什么，該函數(shù)將返回什么類型的數(shù)據(jù)? …

const var1 = db.column1 
const var2 = db.column2 
const var3 = db.column3 
const var4 = db.column4 

那現(xiàn)在怎么辦??當(dāng)然是使用 console.log

const var1 = db.column1 
console.log（var1）//->string 
const var2 = db.column2 
console.log（var2）//->boolean（true / false） 
const var3 = db.column3 
console.log（var3）//- > number 
const var4 = db.column4 
console.log（var4）//->array 

這只會浪費時間，未來我不太可能再來閱讀代碼，而且新的代碼讀者也不會理解。然后，我或是其他讀者必須做幾十個console.log語句才能理解，該代碼是用來做什么的?

Typescript解決了這個問題

在我看來，TypeScript是JavaScript的“升級版本”?，F(xiàn)在，JavaScript代碼將具有明確定義的類型(字符串，布爾值，數(shù)字等)，可訪問的訪問函數(shù)(公共，私有)，……以及許多其他東西。Typescript編寫的代碼將被編譯成普通的JavaScript，因此可以照常運行，不需要專門的Typescript腳本或其他的東西?？匆恍├樱?/p>

兩年前我聽說過TypeScript，但仍然不喜歡它，也不想使用，因為我只喜歡JavaScript的自由性。有時我想嘗試一下，但是我的眼睛很敏感，每次看到凌亂的東西時，眼睛就會更加敏感

但是不久前，我決定改用TypeScript，因為我在閱讀舊代碼或其他人的代碼時，會遇到我提到的這一頭痛問題。而且，開發(fā)人員社區(qū)傾向于使用TypeScript，并進行很好地審查。

當(dāng)前，TypeScript在JavaScript開發(fā)人員中流行起來。庫或者框架(Angular，React或Vue)注重對TypeScript的支持。對于不知道的人：Vue 3絕對百分百是Typescript的重寫。同時，對于Microsoft開發(fā)的TypeScript，可以不用擔(dān)心質(zhì)量和支持問題。

CI / CD-代碼->測試->部署

自動化測試

請聽我說，您正在從事的項目遲早會崩潰的。最好的處理方法就是一邊做一邊改進，始終花20%的時間用于改進。并且唯一可以確保的方法就是在進行改進時，不會產(chǎn)生錯誤(或產(chǎn)生最少的錯誤)，或編寫測試。

要知道，甚至可以在編碼之前就編寫測試(Head First Java建議采用這種方式)

CI / CD —持續(xù)測試和部署

CI / CD(持續(xù)集成/持續(xù)集成)，這是現(xiàn)在的趨勢，這種方法有助于自動連續(xù)地編寫代碼，進行測試和部署。

實際上，幾乎所有CI / CD工具都已集成到Github，GitLab，BitBucket中。因此無需擔(dān)心，需要做的是設(shè)置然后推送代碼。DevOps平臺(Github，gitlab，存儲桶)會負責(zé)其余的工作。

希望大家閱讀完本文后可以學(xué)習(xí)并找到方法提高JavaScript編碼能力。