建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
今天，小芯給大家分享一些提高JavaScript編碼能力的應(yīng)用方法，學(xué)習(xí)并運(yùn)用到實(shí)踐中，你也可以成為編碼熟練工喲~
10年積累的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有東興免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
編輯器
目前，編輯器種類(lèi)繁多，人們不知道選擇哪種編輯器來(lái)提高工作效率。
于我而言，除了使用Android Studio或使用Xcode的iOS所需的Android代碼外，我大多只使用Visual Studio Code。
這是由Microsoft開(kāi)發(fā)的編輯器。這是Microsoft開(kāi)發(fā)的，聽(tīng)起來(lái)不錯(cuò)!!!幾乎支持所有語(yǔ)言，無(wú)數(shù)附加插件，AI代碼建議，漂亮的界面和淺色調(diào)(不是Sublime Text，但…仍然是淺色)
過(guò)去，我只使用Sublime Text(當(dāng)時(shí)不流行VSCode)。大量的插件(將在下文討論)為我節(jié)省了很多時(shí)間，例如自動(dòng)檢測(cè)并修復(fù)錯(cuò)誤，格式代碼，git鏡頭，終端等……，因?yàn)椴辉傩枰鉀Q編碼時(shí)常見(jiàn)的小錯(cuò)誤。
如果編寫(xiě)PHP，一定會(huì)喜歡PHPStorm。如果編寫(xiě)Python，則一定會(huì)喜歡PyCharm。毋庸置疑，這些編輯器功能強(qiáng)大，但是，只支持一種語(yǔ)言。本人是一個(gè)全棧開(kāi)發(fā)人員，具有JavaScript、HTML、PHP、NodeJS和React Docker的經(jīng)驗(yàn)...我使用的是VSCode，因?yàn)樗δ芊浅?qiáng)大，支持很多插件，尤其是自動(dòng)完成功能非常不錯(cuò)。
對(duì)ESLint一見(jiàn)鐘情
在語(yǔ)法錯(cuò)誤上，我花費(fèi)了最多時(shí)間，同時(shí)也最讓我沮喪，諸如未聲明變量/函數(shù)，空指針，缺少重音符號(hào)之類(lèi)的錯(cuò)誤……隨著代碼越來(lái)越多，一次必須讀取數(shù)十個(gè)文件，這很容易讓眼睛疲倦，頭腦一團(tuán)亂，手也開(kāi)始顫抖地鍵入每一行代碼，從而容易粗心大意并犯錯(cuò)。
在使用 ESLint時(shí)，這個(gè)插件可以幫助找出錯(cuò)誤，檢查語(yǔ)法和格式代碼，因此能夠降低編碼時(shí)出現(xiàn)的漏洞，以及根據(jù)現(xiàn)行標(biāo)準(zhǔn)格式化時(shí)，能讓代碼看上去更好看。ESLint還支持其他許多老大哥：JavaScript，React，Vue等
尤其是結(jié)合使用ESLint和VSCode，這搭配簡(jiǎn)直完美?？梢粤⒖虣z查代碼鍵入，查看是否存在錯(cuò)誤或語(yǔ)法問(wèn)題，并提供有關(guān)如何使用函數(shù)和變量以實(shí)現(xiàn)優(yōu)質(zhì)效果的建議。還有自動(dòng)格式的代碼，你一定會(huì)喜歡上它。
除了ESLint，還可以使用Prettier來(lái)格式化代碼，但是本人更喜歡ESLint，因?yàn)榭芍С皱e(cuò)誤檢測(cè)和提供優(yōu)秀代碼建議。
優(yōu)秀目錄結(jié)構(gòu)
我最近開(kāi)始“接受”并告訴自己一件事：
不要從一開(kāi)始就嘗試優(yōu)化項(xiàng)目結(jié)構(gòu)
過(guò)去，開(kāi)始著手一個(gè)項(xiàng)目時(shí)，不論項(xiàng)目或大或小，我總是會(huì)花很多時(shí)間選擇優(yōu)秀的項(xiàng)目結(jié)構(gòu)。我在谷歌上看了各種“ NodeJS文件夾結(jié)構(gòu)的優(yōu)秀實(shí)踐”，“ ReactJS代碼結(jié)構(gòu)……”，但仍然想知道這個(gè)結(jié)構(gòu)是否是很優(yōu)秀的，我應(yīng)該選擇這個(gè)編碼框架嗎?這非常耗時(shí)。
而且我還意識(shí)到，盡管起初我嘗試使用一種本來(lái)很好的結(jié)構(gòu)，但是幾天后，代碼卻變得一團(tuán)糟。因?yàn)槲业南到y(tǒng)思維不好，所以起初代碼寫(xiě)得有多么漂亮并不重要，最后還是出問(wèn)題了。
不要過(guò)多地考慮選擇哪種架構(gòu)，以及從一開(kāi)始要如何去組織。選擇一個(gè)方向或一個(gè)庫(kù)、一個(gè)框架，并開(kāi)始進(jìn)行研究，一邊進(jìn)行一邊改進(jìn)，這樣更好也更實(shí)用。
如果對(duì)結(jié)構(gòu)良好的項(xiàng)目感興趣，我會(huì)分享一個(gè)名為NestJS的NodeJS框架，我閱讀了許多相關(guān)文檔，發(fā)現(xiàn)它們的體系結(jié)構(gòu)非常好(非常類(lèi)似于AngularJS，盡管我不太喜歡Angular)
覺(jué)得代碼“壞掉”時(shí)，使用Console.log
我很確定，console.log是我在編寫(xiě)JavaScript時(shí)使用最多的。這一主要目的是查看感興趣的數(shù)據(jù)是否真實(shí)。
我個(gè)人認(rèn)為，無(wú)論使用哪種語(yǔ)言，編程都離不開(kāi)數(shù)據(jù)，因此如果看到任何令人不安的代碼，該代碼也許不正確，就應(yīng)使用console.log進(jìn)行確認(rèn)。
也有很多人認(rèn)為調(diào)試器應(yīng)該看起來(lái)更專(zhuān)業(yè)。谷歌還支持將Debug放在代碼行中，以獲得更好的了解。實(shí)際上，這對(duì)我個(gè)人而言不是必需的，console.log還會(huì)注意到代碼中的哪一行，使用console.log越快，就會(huì)更加方便。我還發(fā)現(xiàn)在臉書(shū)上的一些世界著名編碼專(zhuān)家，他們?nèi)匀皇褂胏onsole .log
還應(yīng)該注意到，console.log完成后，請(qǐng)檢查所有內(nèi)容，然后再將其刪除，不要放在git上。這會(huì)讓人沮喪，看了眼睛疼(像我一樣)
點(diǎn)評(píng)
在編碼過(guò)程中，很多時(shí)候都需要冗長(zhǎng)而復(fù)雜的代碼。人們擔(dān)心，經(jīng)過(guò)很長(zhǎng)一段時(shí)間再次閱讀這些代碼時(shí)，就可能不知道這段代碼是做什么的?；蛘邞阎说乐髁x的心，希望以后閱讀這個(gè)代碼的人，可以明白代碼的作用。
就個(gè)人而言，我發(fā)現(xiàn)寫(xiě)評(píng)論真的很有用，尤其是該項(xiàng)目有很多人參與的時(shí)候。而且，我們不想每次不懂時(shí)，都跑去問(wèn)寫(xiě)這個(gè)代碼的朋友，而這個(gè)朋友也忙于修復(fù)測(cè)試人員布置的大量錯(cuò)誤。而如果代碼本身可以解釋?zhuān)敲粗罂吹皆摯a的人就可以馬上就搞清楚，還能節(jié)省時(shí)間。
但是評(píng)論也必須看起來(lái)合理舒適。不必評(píng)論所有內(nèi)容。這有時(shí)會(huì)讓代碼難以閱讀，還讓人的眼睛很不舒服。
在編寫(xiě)代碼時(shí)，我會(huì)選擇變量/函數(shù)的名稱(chēng)，便于理解，不要讓長(zhǎng)的類(lèi)/函數(shù)處理過(guò)多內(nèi)容。相反，我會(huì)拆分成較小的類(lèi)/函數(shù)(但不要拆分太多，拆分必須合理，不要再次讓人看著眼睛痛)。在需要時(shí)發(fā)表評(píng)論，練習(xí)編寫(xiě)代碼，以便進(jìn)行“自我解釋”。只需讀一讀，知道其中的作用即可。
使用ES6、7、8、9標(biāo)準(zhǔn)
JavaScript是一門(mén)快速發(fā)展的語(yǔ)言，另外還添加了許多強(qiáng)大的功能/庫(kù)。據(jù)我所知，每年人們都會(huì)發(fā)布名為ECMAScript或ES的JavaScript標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)中的每一個(gè)都包含著JavaScript內(nèi)置的新功能。
- 2015 ECMAScript 6(ES6)
- 2016 ECMAScript 7(ES7)
- 2015 ECMAScript 8(ES8)
- 2015 ECMAScript 9(ES9)
- 2015 ECMAScript 10(ES10)
- ….
因此，如果利用ECMA的強(qiáng)大功能，代碼將比僅使用傳統(tǒng)的for和if，while循環(huán)看起來(lái)更好，更加優(yōu)化并且看上去更酷(就像本文的作者這般可愛(ài))
以下是我在編碼時(shí)最常用的一些函數(shù)/運(yùn)算符：
跳過(guò) Promise / Callback，直接了解Async / Await
Promise / CallbackWhile
編碼的缺點(diǎn)是，我們必須大量使用API。從后端或第三方調(diào)用API以獲取數(shù)據(jù)和顯示時(shí)，需要執(zhí)行以下操作：
如果只想在成功檢索用戶(hù)列表之后才調(diào)用另一個(gè)API，那么通常需要執(zhí)行以下操作：
想按順序調(diào)用一系列API時(shí)，壞事就來(lái)了。當(dāng)項(xiàng)目規(guī)模擴(kuò)大，處理的請(qǐng)求越來(lái)越復(fù)雜時(shí)，這就是所看到的：
Async / await 是救星
自ES6(2015)起，async/await作為Promise/callbacks替代方法引入，用于處理異步操作。async / await的好處就在于有助于編寫(xiě)看起來(lái)像同步的異步代碼，這些代碼逐行運(yùn)行，看起來(lái)非常整潔。
可以使用async / await重寫(xiě)上面的代碼：
有一些注意事項(xiàng)：
- await總出現(xiàn)在async之后
- 使用try / catch來(lái)捕獲異步函數(shù)中的錯(cuò)誤處理操作
- await的本質(zhì)是等待Promise返回值，因此使用太多await有時(shí)會(huì)使應(yīng)用變慢。
使用async / await而不使用常規(guī)Promise / Callback的另一個(gè)好處是，使用try / catch可以發(fā)現(xiàn)async / await錯(cuò)誤。還會(huì)發(fā)現(xiàn)try / catchblock中的所有其他錯(cuò)誤，而不僅僅是async/await
使用Typescript提高代碼質(zhì)量
故事開(kāi)始了……
我第一次進(jìn)行編程用的是C語(yǔ)言，然后是Java。這些語(yǔ)言功能強(qiáng)大，需要極其嚴(yán)格的代碼，需要對(duì)數(shù)據(jù)類(lèi)型(字符串，布爾值，…)或訪(fǎng)問(wèn)規(guī)范(公共，私有，受保護(hù)的…)進(jìn)行清晰完整的定義。那天我非常厭倦運(yùn)行代碼，因?yàn)槲也恢浪枪驳倪€是私有的，數(shù)據(jù)類(lèi)型是什么，于是就一直運(yùn)行到報(bào)告錯(cuò)誤為止。
之后，開(kāi)始使用JavaScript(或PHP，Python)，無(wú)論數(shù)據(jù)類(lèi)型如何，它都被大大簡(jiǎn)化。只需聲明變量就可以使用：
- 令x =
- 1const test ='This is a test'
- const arr = [1,2,3,4,5]
這也是我從一開(kāi)始就喜歡JS的一個(gè)原因，因?yàn)檎Z(yǔ)法非?！白杂伞?，不那么混亂，代碼看起來(lái)干凈漂亮。但是生活并不像夢(mèng)想。漸漸地，我意識(shí)到，當(dāng)項(xiàng)目有很多人編寫(xiě)代碼之后，就會(huì)重新閱讀代碼。真的很糾結(jié)。因?yàn)槲也恢肋@個(gè)變量是什么，該函數(shù)將返回什么類(lèi)型的數(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
這只會(huì)浪費(fèi)時(shí)間，未來(lái)我不太可能再來(lái)閱讀代碼，而且新的代碼讀者也不會(huì)理解。然后，我或是其他讀者必須做幾十個(gè)console.log語(yǔ)句才能理解，該代碼是用來(lái)做什么的?
Typescript解決了這個(gè)問(wèn)題
在我看來(lái)，TypeScript是JavaScript的“升級(jí)版本”?，F(xiàn)在，JavaScript代碼將具有明確定義的類(lèi)型(字符串，布爾值，數(shù)字等)，可訪(fǎng)問(wèn)的訪(fǎng)問(wèn)函數(shù)(公共，私有)，……以及許多其他東西。Typescript編寫(xiě)的代碼將被編譯成普通的JavaScript，因此可以照常運(yùn)行，不需要專(zhuān)門(mén)的Typescript腳本或其他的東西?？匆恍├樱?/p>
兩年前我聽(tīng)說(shuō)過(guò)TypeScript，但仍然不喜歡它，也不想使用，因?yàn)槲抑幌矚gJavaScript的自由性。有時(shí)我想嘗試一下，但是我的眼睛很敏感，每次看到凌亂的東西時(shí)，眼睛就會(huì)更加敏感
但是不久前，我決定改用TypeScript，因?yàn)槲以陂喿x舊代碼或其他人的代碼時(shí)，會(huì)遇到我提到的這一頭痛問(wèn)題。而且，開(kāi)發(fā)人員社區(qū)傾向于使用TypeScript，并進(jìn)行很好地審查。
當(dāng)前，TypeScript在JavaScript開(kāi)發(fā)人員中流行起來(lái)。庫(kù)或者框架(Angular，React或Vue)注重對(duì)TypeScript的支持。對(duì)于不知道的人：Vue 3絕對(duì)百分百是Typescript的重寫(xiě)。同時(shí)，對(duì)于Microsoft開(kāi)發(fā)的TypeScript，可以不用擔(dān)心質(zhì)量和支持問(wèn)題。
CI / CD-代碼->測(cè)試->部署
自動(dòng)化測(cè)試
請(qǐng)聽(tīng)我說(shuō)，您正在從事的項(xiàng)目遲早會(huì)崩潰的。最好的處理方法就是一邊做一邊改進(jìn)，始終花20%的時(shí)間用于改進(jìn)。并且唯一可以確保的方法就是在進(jìn)行改進(jìn)時(shí)，不會(huì)產(chǎn)生錯(cuò)誤(或產(chǎn)生最少的錯(cuò)誤)，或編寫(xiě)測(cè)試。
要知道，甚至可以在編碼之前就編寫(xiě)測(cè)試(Head First Java建議采用這種方式)
CI / CD —持續(xù)測(cè)試和部署
CI / CD(持續(xù)集成/持續(xù)集成)，這是現(xiàn)在的趨勢(shì)，這種方法有助于自動(dòng)連續(xù)地編寫(xiě)代碼，進(jìn)行測(cè)試和部署。
實(shí)際上，幾乎所有CI / CD工具都已集成到Github，GitLab，BitBucket中。因此無(wú)需擔(dān)心，需要做的是設(shè)置然后推送代碼。DevOps平臺(tái)(Github，gitlab，存儲(chǔ)桶)會(huì)負(fù)責(zé)其余的工作。
希望大家閱讀完本文后可以學(xué)習(xí)并找到方法提高JavaScript編碼能力。
網(wǎng)頁(yè)標(biāo)題：手把手，教你如何逐步提高JavaScript的編碼能力？
網(wǎng)頁(yè)鏈接：http://m.5511xx.com/article/cdipses.html
