我要成爲前端工程師！給 JavaScript 新手的建議與學習資源整理

時間  2019-11-06
標籤 成爲 前端 工程師 javascript 新手 建議 學習 資源 整理 欄目 JavaScript 简体版
原文   原文鏈接

來源於：http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspxjavascript

 

今年有越來越多企業開始跟我們接洽企業內訓的事，想請我幫他們培訓前端工程師，但你知道一個好的前端工程師絕對不是兩三個月能夠養成的，須要多年的努力與磨練才會有點成績。而這幾年可謂前端正夯，有為數很多的人開始大規模的往前端開發移動，而我被問到最多的問題就是「請問 JavaScript 要怎麼學？」或「請問 JavaScript 該怎樣入門？」諸如此類的問題。你們都知道，對於一門程式技術來說，「會寫」與「會教」是兩個大相徑庭的領域，會寫 JavaScript 的人到處都是，可是會教的人就相對少不少了。我這幾年教授 JavaScript 開發實戰課程已經超過 15 梯次，在將近 500 位學員裡面，我所看到的大部分學員都是對 JavaScript 不勝理解，廣泛處於一種只知其一;不知其二、模糊不清的狀態。另外一方面，我在公司內部也帶過很多工程師，總是有人會想學習 JavaScript 但不知道如何入門的情況，這讓我陷入深思，該如何幫助一個人學習 JavaScript 從入門到精通呢？本篇文章將說說我個人的一些想法與建議。html

渴望學習

先別說 JavaScript 如何從入門到精通，我們就先來談談我所看到的實務情況，我看到許多正積極前往前端工程發展的人，無不渴望學習、無不渴望進步，但學習路徑為何？沒人說得準！每個人都是獨立的個體，有著不一樣的學習速度與理解。當然，若是你願意投資本身，跑去各家教育訓練機構報名課程，讓專業講師教你逐步上手當然很棒，但並非全部人都有這個機會或意願作這件事，畢竟學費不便宜。大部分的 JavaScript 開發人員，其實都是靠著本身的熱情與興趣自主學習而成的。前端

通常來說，有人問我怎樣學習 JavaScript 的時候，我都會建議他們先買一本犀牛書回來看，但這本書有 1,096 頁啊！java

這本書就算你買得回來，但真的有心看完的人又有多少呢？我所看到的狀況是，你們第一時間先被這本書的厚度給嚇傻了，都把這本書當成「參考書」了，也就是反正先買回來擺著，等出問題再來翻翻看就好，反正程式邏輯無論甚麼語言都一樣啦，我只要寫得出來就行了，寫不出來就先找 Google 大神啊，否則就搜尋 Stack Overflow 看看有沒有類似的解答！真正悲劇的是，一般你都找的到解答！node

悲劇的開始

各位看官，你看到這裡必定覺得有點怪，既然都找的到答案了，為什麼還算是個「悲劇」呢？react

這牽扯到「大腦科學」的領域，人類大腦的結構極其複雜，在接觸外界事物的時候，不少時候無法處裡太多細節，甚至於有不少時候，大腦所接收到的資訊是有片斷的、缺漏的，無論是過多的資訊或是過少的資訊，人腦都會在很短的時間內自動作出判斷。講簡單一點，各位聽過什麼是「腦補」嗎？就是「腦內補充」的意思，源自於動漫方面的用語，現在不少年輕人都知道這個詞彙，意指「在頭腦中對某些情節進行腦內補充，對漫畫中、小說中以及現實中本身但願而沒有發生的情節在腦內幻想」。jquery

在程式設計的領域中，有許多抽象的概念，就是因為某些概念難以思考，某些技術難以理解，因此我們才稱呼他「抽象」，也就是說，抽象的事物是無法思考的，當你的腦中對某種技術、程式語言或是框架擁有這種「抽象」的感覺，那麼就表明你不夠瞭解他，你還沒辦法融會貫通，也沒辦法舉一反三。相對的，人的大腦在學習一件事情時，當然會設法盡力理解，以求日後能夠舉一反三。git

我認真的問你，當你從網路上看到一段程式碼能夠解決你的問題時，請問你的第一反應是甚麼？ (1) 查書？ (2) 繼續 Google？ (3) 自行看程式碼腦補劇情？ 請做答！angularjs

我把這三個選項一一拆解，告訴你為什麼很天然的會選擇 (3) 這個答案！es6

  1. 查書：你真的知道你的問題出現在書籍的哪一頁嗎？這本犀牛書有 1,096 頁啊，你連認真翻完他都有難度了，你會因為一個小問題從第一頁找到最後一頁嗎？別傻了！
  2. 繼續 Google：這是個很合理的選項，因為你想學得更深刻，好，請問你要下什麼關鍵字進行搜尋？你連犀牛書裡面出現的專有名詞都沒看過了 (因為你沒讀完過)，你能打出甚麼像樣的關鍵字？你能查到甚麼重要且完整的搜尋結果？有限！
  3. 自行看程式碼腦補劇情：是的，我們查到的程式碼看起來很簡單，每一行拆開我都看的懂阿，合在一塊兒應該是這個意思吧！嗯，我覺得我理解了，就這樣吧，下次遇到相同問題再說！

認真的同學，想必這三個選項都會嘗試，但書上寫的跟你遇到的好像有點不太一樣，你遇到的多是複合式的觀念問題，例如 Closure + Hoisting 的問題；繼續 Google 到的內容好多喔 (並且都英文)，看不完耶，先收藏好了，以後有空再看 (跟你買犀牛書卻不看完是一樣道理，你永遠不會打開你的網址書籤的)；自行看程式碼腦補劇情，我本身理解出來的，跑出來結果也對，應該沒錯吧，反正就邏輯啊！

很差意思，以上劇情我假設的有點武斷，並非每個人都這樣想，可是你們都會會心一笑，因為每個人都幹過這種事，因為自動腦補是最有效率的學習方法，只是你學到的觀念多是錯的！

你們都好忙

為什麼我們總是不斷尋找有效率的學習方法？因為你們都很忙，天天忙著開發程式，天天忙著救火，只要不忙的時候 (並且被發現)，就會馬上被塞入一堆工做，工做都沒時間了，何時纔有空學習啊！

你們都很清楚，從事軟體開發要從入門到精通沒有甚麼捷徑，就是要花時間練習、練習、再練習，寫 Code、寫 Code、多寫 Code，因此「作中學」是你們公認最可行的惟一解，無論被安排了什麼工做，反正不會就學，開發時間估長一點便可，若是時間內作不完，難道你咬我嗎？因此說啊，在「甲方」公司上班是幸福的，我曾經看過有公司因為是幸福企業，只要你有作不出來的理由，專案永遠能夠無限期 Delay！ ( 不要笑，這是真的 )

現在每間公司多多少少都須要仰賴 IT 系統的支持，不少公司都有本身的開發團隊，大多用來開發公司內部所需的系統，其實這個「作中學」方案，是個不得不的選擇，因為不少時候你並沒有更好的選擇，因此目前的選擇就是最好的選擇！( 咦?! 好熟悉的一句話! )

在臺灣，中小企業佔了 90% 以上，許多公司都是傳統產業，沒有良好的技術學習環境，因此能招募到高手的機會很低，再加上優秀的軟體人才極度缺少，真正的高手你們都搶著要，因此不得已只能聘用有點經驗、又不太有經驗的開發人員，進到公司在落實「作中學」策略，讓你們慢慢進步，反正有作事就會進步，也會越來越熟，總有一天能夠獨當一面。

作中學 ( Learning by Doing )

若是你問個人意見，我也會說「作中學」是惟一解，因為我也是這樣帶人的，我知道「作中學」不是最有效率的解法，可是確實惟一可行的解法！

哪裡沒效率？在只知其一;不知其二的情況下，學習過程會大量累積「錯誤的觀念」( 請記得人會自動腦補劇情 )。事實上，你在自我理解的過程中，並不知道哪些觀念是對的，你工做的周遭不見的有人能夠幫你點出正確的觀念，而大多隻能幫你點出解決問題的方法，你遇到一個問題，能夠問到一種解法，重點在於你無法舉一反三，當你無法活用你所學習到的知識，你就無法累積更多的自信，無法累積自信，你就會一直處於一種只知其一;不知其二的狀態。發現了嗎？這是一種老鼠賽跑的迴圈，這樣的學習方式會讓你一直傾向使用「已經會」的技術來解決問題，那麼你的學習領域就會受限，天然無法進步太多，在未來的世界裡，不可諱言的，進步太慢就是退步！

因此一直以來，個人教學風格都很強調一點，那就是「創建觀念」比「寫 Code」還重要，網路上幾乎能夠搜尋到任何你須要的程式碼，因此看完別人的程式碼還能夠寫出類似的應用才厲害，也就是能夠舉一反三的能力。可是，若是你不寫 Code，學會再多的觀念，你也會漸漸忘記，到頭來等於沒學！

因此你問我「作中學」重不重要？我會說：超級重要！可是，在有觀念打底的情況下去「作」，保證「學」的更扎實，更有自信，也更加有趣，這是我從事軟體開發 20 多年的祕密，請你們不要告訴你們！

培養自信

若是你未來想成為一個專業的前端工程師，你要知道一件事，絕對不能因為剛學會 jQuery 就心滿意足，也不能因為學不會 Node.js 就失去了熱情。你要不斷確定本身，你要知道從看不懂 jQuery 到能夠本身寫出正確的程式碼是一段頗有成就感的事，這是你努力學習的成果。但若是你試圖跳級打怪，被對方秒殺也只是剛好而已。你須要時間成長，一步一步來，這也是「作中學」不可或缺的理由之一，因為你不可能在短時間學會全部觀念與技能！

若是有人跟你說：「你都出來工做幾年了？還寫出這種程式碼？」請不要跟他作朋友，因為他把事實講出來了，想在心裡還能夠接受，但當面講出來就是不行！

請相信本身「沒有什麼事情是學不會的，只是時間長短的問題」，在學習的道路上，你會發現經常有許多神人出沒在你身邊，他們會讓你感覺，他們會的一切都是渾然天成、與生俱來的，請相信我，這一切都是幻覺。這些想法，所有都是你自行腦補的劇情，在這個世界上，我相信有天才存在，但不會是你，也不會是我，更不會是你身邊的人，他們只是在你看不見的時候偷偷努力而已。

我分享一個本身的小故事，在我小時候曾經有一次要跟同學出遊，我想跟我父親借用傳統相機 (須要換底片的那種)，他只跟我說一句話：「你不會換底片」。我說：「你教我，我就會啦」。他說：「不可能啦，小朋友不會換底片」。但我跟他盧了好久，最後他終於借我了，並且還示範一次換底片的過程給我看，他問我：「有沒有學會？」我當然說：「會阿，這很簡單」。出遊回來後，我拍了好多捲底片，我拿去沖洗之後發現，只有第一卷底片是好的，其餘的所有都沒有裝成功，而第一卷是我父親示範給我看的那捲。

你能夠想像，當時的我很是受傷，有種被戳中要害的感覺，且真的覺得本身學不會、本身沒有天分，我花了好多年的時間，才用本身的努力證明本身、相信本身，原來我能夠學會不少我之前學不會的事，並且學習的速度會隨著你會的東西越多而學得更快。不少時候你覺得別人很強，學東西很快，那是你不知道他本身學過多少東西，你只是起步比人家晚而已，沒甚麼好自卑的！

要成為一個專業的前端工程師，過程中會遇到許多阻礙，這些阻礙可能會來自於你的家人、你的朋友、你的客戶、你的同事、甚至於是你的老闆，但最大的阻礙其實還是你本身，當你擁有正確的學習心態，再也不跟別人比較，為本身作出實質的努力 (不要只掛在嘴邊說你想學習)，你纔有可能有達陣的一天！

會寫的多、看懂的少  

JavaScript 幾乎成為 Web 世界的標準程式語言，無論在你再怎樣不喜歡它，它就是在那裡，就是 Number One，全部瀏覽器惟一支持的程式語言。而這個世界，幾乎全部的軟體都在 Web 化，除了網站以外，像是 Mobile App (Titanium, NativeScript, React Native)、網路遊戲 (Web Game)、穿戴式裝置 (Apple Watch)、… 幾乎都朝著 Web 化的方向前進，你說花點力氣投資在 JavaScript 不對嗎？

恰恰我所看到的是，大部分人都會寫、也能寫 JavaScript，但真正理解 JavaScript 的人卻不多，很是的少。當你開始採用一個徹底依賴 JavaScript 的執行環境或框架時 (例如 Node.js、AngularJS、React、... etc.)，若是你還是用只知其一;不知其二的觀念去開發，你會花上大把大把的時間在除錯、鬼打牆、生悶氣、捶心肝、... 等諸如此類的事情上。因為沒有好的觀念支持，你寫不出有品質的程式碼。沒有好的觀念支持，你也無法有效率的團隊合做，整個開發團隊若是有觀念懸殊的成員存在，影響的是全隊的品質與效率，因為一個人的程式出錯，頗有可能會影響另外一個人的開發效率，因為他所遇到的問題，可能來自於你寫的程式碼。

學習資源整理

我個人覺得自學成材是很是有可能的，因為我確實親眼目擊短時間內學會 JavaScript 的人，並且徹底依賴網路上優質的、免費的學習資源就能夠學到很是紮實的觀念，如下我列出一些學習資源給你們參考：

學習方法

前陣子我才聽到一句頗有哲理的話：「努力不必定會成功，但不努力必定很輕鬆」 XD

學習沒有捷徑，只能靠自身努力，別無他法！

這是一場腦內革命，過程並不輕鬆，但即使不輕鬆，這過程卻能夠頗有趣，記得要不斷找樂子、獲取成就感，若是能夠，找個一塊兒學習的夥伴，否則真你會撐不下去。

如下我來分享一些學習 JavaScript 的方法供新手參考：

  • 找樂子
    • 不要天天都寫 Code，你會彈性疲乏，適度的平衡工做、學習與生活也是很重要的，可是請記得還很菜的時候，要把學習放重一點。
    • 不少人會適時地玩些線上遊戲來轉移彈性疲乏的注意力，有時候解 Bug 解不出來的時候，也能夠嘗試一些徹底不一樣的事情，擴展你的思考領域。
      請參考這篇文章：為什麼你睡了11個小時還會累? 原來我們的休息方式都錯了
  • 找成就感
    • 培養自信是學習過程中很是重要的一環，不斷接受挑戰，並且一一突破，過程中就會有源源不絕的成就感出現。
    • 站在巨人的肩膀上開發真的很棒，學一些現成的函式庫來用 ( 例如 jQuery, jQuery UI )，會有助於累積成就感，開發起來也會比較有趣！
    • 多找一些跟學習主題相關的資料來看，看懂一個本身本來不懂的資料，自己也是頗有成就感的一件事，不過記得要學著分享，分享才能產生快樂。
    • 光是學習 JavaScript 語言特性是很枯燥無味的，若是也能學習一些知名的開發框架，如 AngularJS 或 React/Redux 都不錯，不但有助於解決工做上的難題，更能獲得許多解決問題的成就感。
    • 若是有主題相關的闖關遊戲也能夠試試看，例如 Codewars, Code Hunt 之類的。
  • 找學習夥伴
    • 若是有同事、夥伴、朋友也對寫程式有興趣，建議能夠組織讀書會、分享會之類的活動。
    • 多參加一些知名的 Facebook 線上社團，能夠在上面發問，也能夠分享一些本身的所見所得，若是心有餘力，還能夠回答別人的問題，過程中你就能夠交到很多志同道合的朋友。
    • 找機會參加一些實體的社羣聚會，畢竟在網路上交流技術還是有點虛，若是能夠跟你們見見面，彼此見面交流一些技術心得，會有比較踏實的感覺。
  • 分享學習心得
    • 我強烈建議新手上路能夠嘗試撰寫部落格，將所知、所見、所聞都寫下來，不僅僅是留下紀錄而已，更重要的是學習組織本身的思緒，將抽象的概念透過具象的文字表達出來，這對一些觀唸的理解來說很是重要。
    • 若是一開始不容易組織大量文字，也能夠試著從手稿或筆記開始寫起，累積一些學習心得與想法，但若能公開發表出來，更能促使你將心得與想法整理得更清晰。
    • 你也能夠嘗試作些簡報 (Slides)，將一些你學到的重要概念與技巧，透過簡要的版面配置整理出來，並且分享到 SlideShare 或 Speaker Deck 均可以。
  • 手刻做品集
    • 無論你學了多少東西，你如何證明你真的學會了呢？是的，你要留下你的學習紀錄，你要整理你的做品集，一個兩個是不夠的。
    • 你能夠參考 Jennifer Dewalt 的做品網站，他從第一天開始學習網頁技術開始，就決定天天寫出一個做品 (網站)，你能夠從他的做品集中看出一個人的熱情與努力，相較於第一天與最後一天的做品，你會很驚訝一個人能夠在 180 天內學到這麼多東西！
    • 不少人也會透過創建本身的個人網站，放上本身的做品集，用以證明本身會寫網頁，你能作多炫就作多炫，沒有美感的人，到 WrapBootstrap 買個現成的版型也不錯，一般都不貴！

結論

其實無論你想學甚麼程式語言都一樣，這些學習方法與經驗均可以參考，可是我總認為，一個開發人員不能夠只學一種程式語言，因為你的思路會受到侷限。但你其實不用刻意去學兩三個語言，你總不能為了學兩三種語言，結果每個都會一點、每個都不太熟，這樣就本末倒置了。無論如何，請先精通某個程式語言再說，從中學習到精隨，當有機會接觸下一個程式語言時，相對的會比較順利，也比較能比較不一樣語言之間的差異。不過我所看到的許多 JavaScript 新手，不少都是先學過其餘程式語言然後才學 JavaScript 的，而這個轉換的過程，他們把其餘程式語言的特性與概念，原封不動的套用在 JavaScript 開發上，結果當然是慘不忍睹，開發從頭到尾都是自行腦補的劇情，Bug 滿天飛啊！

最後，我個人還是認為，書要認真讀、Code 要努力寫，這纔是學習程式設計的不二法則，祝你們都能維持熱情，開心的成為專業的前端工程師！ ^_^

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程