https://www.bilibili.com/video/BV1TF411t78K?spm_id_from=333.999.0.0一、不知緣由，沒(méi)有頭緒

二、不懂概念，不會(huì)用法

積少成多

筆者計(jì)算機(jī)專業(yè)出身，但前端開(kāi)發(fā)不在課程范圍，算是自學(xué)一點(diǎn)皮毛，剛參加工作時(shí)，公司電腦還沒(méi)到位，沒(méi)法干活，確切地說(shuō)也不會(huì)，就按照主管的吩咐坐在導(dǎo)師旁邊看了兩天，提的第一個(gè)問(wèn)題就是：“這么多代碼都是你寫的？你怎么知道哪里是什么呢？”

導(dǎo)師對(duì)我說(shuō)：“這些是我一行一行寫出來(lái)的，我自己的定義和設(shè)計(jì)，當(dāng)然知道是什么了?！?/p>

所以，代碼不管是一行、一百行、還是一萬(wàn)行，都是由開(kāi)發(fā)者一個(gè)個(gè)敲出來(lái)的，都有其來(lái)由和目的，不必被代碼量嚇到，這是其一。

現(xiàn)實(shí)天然是程序

知道了代碼是積少成多的，那么代碼本身是什么？

代碼是由計(jì)算機(jī)能夠理解的語(yǔ)言寫出來(lái)的東西，跟人能夠理解自然語(yǔ)言一個(gè)道理，而且兩種語(yǔ)言之間有著對(duì)應(yīng)的關(guān)系，每一個(gè)熟練的程序員都會(huì)在編程的時(shí)候在腦海中自動(dòng)地轉(zhuǎn)換。

程序設(shè)計(jì)語(yǔ)言多種多樣，每一種都有其擅長(zhǎng)做的事情，普通的開(kāi)發(fā)崗位不會(huì)要求一個(gè)人懂多種語(yǔ)言，會(huì)有所分工，比如：前端至少要掌握HTML、JavaScript、CSS，而后端要掌握J(rèn)ava、Go、Python之類的語(yǔ)言和數(shù)據(jù)庫(kù)等。

但不論是什么語(yǔ)言，寫出的程序都在做三件事：

數(shù)據(jù)存儲(chǔ)、數(shù)據(jù)處理、數(shù)據(jù)傳輸

本系列文章就來(lái)跟大家分享一些使用JavaScript編寫程序的知識(shí)。

問(wèn)題來(lái)了，怎么寫？探索怎么寫，要先了解一件事情，什么是程序。

現(xiàn)實(shí)天然是程序，拿人一天的生活舉例：

到點(diǎn)鬧鐘響起，起床——穿衣、洗漱——出門（如果有垃圾把垃圾帶著） ——交通（有車的開(kāi)車，沒(méi)車的由路程及便利性決定是步行、單車、公交還是地鐵）——早餐——上班——開(kāi)會(huì)——搬磚/修bug——加班——下班——交通（同上班）——晚餐——娛樂(lè)/讀書/鍛煉…——玩手機(jī)——睡覺(jué)。

程序員的一天大體如此。

跟寫好的一段計(jì)算機(jī)程序一樣，一行行執(zhí)行，一件件做。

那么這段描述用編程語(yǔ)言如何表達(dá)？它們有著怎樣的對(duì)應(yīng)關(guān)系？

對(duì)象：人

屬性：性別、年齡、職業(yè)、所在公司等。

流程：起床、穿衣洗漱…

流程中的某些環(huán)節(jié)帶著條件判斷（有無(wú)垃圾、選擇哪種交通工具）

方法：吃飯、搬磚。

編程就是這么個(gè)路子。

具體到寫代碼，該如何著手和處理呢？簡(jiǎn)單概括如下：

定義變量：當(dāng)需要存儲(chǔ)一個(gè)數(shù)據(jù)，不管是什么，數(shù)字、字符串、對(duì)象等，都可以定義一個(gè)變量。

定義函數(shù)：當(dāng)需要執(zhí)行某個(gè)動(dòng)作，而且需要重復(fù)執(zhí)行，就可以封裝一個(gè)函數(shù)（或者叫方法）。

條件判斷：當(dāng)需要根據(jù)不同條件執(zhí)行不同動(dòng)作，就用到了條件判斷。

綁定事件：當(dāng)需要點(diǎn)擊、滾動(dòng)、觸摸等得到反饋，就用到了事件。

操作DOM：當(dāng)需要獲取/操作網(wǎng)頁(yè)上的元素，就用到了DOM。

…

簡(jiǎn)單嗎？簡(jiǎn)單，但也不簡(jiǎn)單，那又復(fù)雜在哪里？

豐富的工具箱

為什么要寫程序，“人的想法”加上“程序的本領(lǐng)”來(lái)滿足日常需求。

需求是多種多樣的，“巧婦難為無(wú)米之炊”，如果語(yǔ)言本身不具備那個(gè)能力，程序員又如何做到呢？

什么能力？譬如：

畫圖(CSS/SVG/Canvas)，音視頻(Audio/Video)，地理位置(Geolocation)，通知(Notification)…

先拋開(kāi)特定場(chǎng)景的需求不談，最常規(guī)的人機(jī)交互，也需要DOM/BOM這些瀏覽器提供的接口來(lái)做到。

故而，語(yǔ)言所具備的，多種類型的數(shù)據(jù)，每種類型所具備的屬性和方法，繁多的特點(diǎn)、特性、API，都是為我們編寫程序提供便利的，是豐富的工具箱。

面對(duì)這個(gè)工具箱，你可能懼怕太多東西一時(shí)無(wú)法記住，但當(dāng)你需要的時(shí)候，又會(huì)慶幸它們的存在。

優(yōu)雅的代碼

我們做每件事情，都是從不會(huì)到會(huì)，到熟練，再到強(qiáng)大（規(guī)模上）、細(xì)致（細(xì)節(jié)質(zhì)量）的。明白了怎么寫程序，有什么“工具”可用，就是個(gè)能做事的程序員了，但離優(yōu)秀的程序員還有距離。

如果你編碼經(jīng)歷尚少，或許覺(jué)得故弄玄虛，但遲早會(huì)有所體會(huì)。

優(yōu)雅的代碼是什么？筆者認(rèn)為，要綜合考慮，而不只是“代碼量少”、“實(shí)現(xiàn)巧妙”等。

組織性

說(shuō)白了，就是文件的命名及存放，業(yè)界有不少做法，占比最大的是兩種：

一、按文件類型，html、js、css，圖片，每個(gè)大類里又可按照用途劃分小類

二、按業(yè)務(wù)模塊，首頁(yè)、登錄、個(gè)人中心等

當(dāng)然，也可以將二者進(jìn)行適當(dāng)?shù)慕Y(jié)合。

合理的代碼組織，能夠使得一個(gè)大型項(xiàng)目的代碼顯得多而不亂，利于維護(hù)、查找問(wèn)題，也利于團(tuán)隊(duì)協(xié)作。

可讀性

有句話說(shuō)得好——“代碼是寫給人看的，順便給機(jī)器運(yùn)行”。

給機(jī)器運(yùn)行的代碼只要沒(méi)有語(yǔ)法錯(cuò)誤，怎樣都可以，但人不行，還有另一句自我調(diào)侃的話叫“我現(xiàn)在寫的代碼是干什么的只有上帝和我知道，再過(guò)兩個(gè)月就只有上帝知道?！?/p>

這就很不好，沒(méi)有任何一段代碼是能夠保證不再回頭看、去調(diào)整，或者某一天交到別人手里維護(hù)和加工，如果不易讀，是一件左右為難的事，繼續(xù)用，該怎么寫保持風(fēng)格不變且不出問(wèn)題，不用，代碼冗余會(huì)增多，且可能越來(lái)越亂，不可收拾。

健壯性

也可理解為“適應(yīng)性”，越健壯的代碼，越能適應(yīng)更多場(chǎng)景甚至狀況，越少出問(wèn)題，兩個(gè)簡(jiǎn)單的例子，你的網(wǎng)頁(yè)是否能夠在iphone5和iphone12上都能良好展現(xiàn)，或者當(dāng)頁(yè)面圖片加載失敗/文件找不到，是否有備用措施來(lái)彌補(bǔ)，以使用戶體驗(yàn)不會(huì)大打折扣。做好了這些，代碼靠譜，人也靠譜~

擴(kuò)展性

也可理解為代碼的通用性、復(fù)用性，比如，網(wǎng)頁(yè)換膚、根據(jù)用戶的不同身份展示不同內(nèi)容，在現(xiàn)有的模塊當(dāng)中持續(xù)地添加新的模塊等。擴(kuò)展性越好，迭代過(guò)程的成本就越低。

性能

編程領(lǐng)域的性能問(wèn)題百說(shuō)不厭，具體說(shuō)就是代碼的執(zhí)行時(shí)間，體驗(yàn)是否流暢。

同一件事情用代碼可以多種寫法，除了“寫對(duì)”之外，還要考慮是否夠快，能否給用戶的操作提供符合預(yù)期的反饋，多是細(xì)節(jié)，這里不贅述。

以上幾點(diǎn)，如果做不到，程序也能正常運(yùn)行，但做得到，對(duì)自己持續(xù)的編碼，對(duì)用戶體驗(yàn)，對(duì)團(tuán)隊(duì)協(xié)作，都是很有利的，也會(huì)給他人留下好的印象。

代碼之外的工具

如果只寫頁(yè)面，三駕馬車足夠，但隨著技術(shù)迭代，需求變更，項(xiàng)目規(guī)模等變化的發(fā)生，有追求的程序員們動(dòng)用自己的聰慧和技術(shù)做出很多更利于現(xiàn)代開(kāi)發(fā)的工具，比如：npm（包管理器）、gulp（任務(wù)處理工具）、webpack（模塊打包工具）等，當(dāng)然，還有豐富的組件庫(kù)和流行框架，起初這并不是一名開(kāi)發(fā)者的必備技能，但它們的確因?yàn)樘峁┝吮憷粡V泛使用，久而久之成為標(biāo)配，你可以不全學(xué)，但不能都不會(huì)，這就成了編程語(yǔ)言之外我們需要學(xué)習(xí)的東西。

上述的內(nèi)容，構(gòu)成了一名前端開(kāi)發(fā)者在當(dāng)下需要掌握的技能的主要部分。

總結(jié)

到這里，你應(yīng)該大體看到了編程是什么樣子，它不難，但對(duì)于初學(xué)者足夠復(fù)雜，需要，也僅僅需要投入足夠多的時(shí)間就能征服。

后面我們一起征服~