老姚淺談:怎麼學JavaScript?

2022-01-06 若川視野

鑑於時不時,有同學私信問我(老姚,下同)怎麼學前端的問題。這裡統一回復一下,如下次再遇到問我此問題同學,就直接把本文連結地址發給你了。

首先說句題外話。關於有人管我叫大神的事情。個人感覺這跟你買東西時,人家管你叫帥哥一樣,你答應與否都無妨。

正題開始,「前端怎麼學」應該因人而異,別人的方法未必適合自己。就說說我的學習方法吧:我把大部分時間放在學習js上了。因為這個js的學習曲線,先平後陡。項目實踐和練習啥的,我不說了,主要說下工作之外的時間利用問題。我是怎麼學的呢,看書,分析源碼。個人這幾天統計了一下,前端書籍目前看了50多本吧,大部分都是js的。市面上的書基本,差不多都看過。

第一個問題是,看書有啥好處?

好處應該是不言而明的,書看多了,基礎會逐漸夯實起來。看多了,自己的判斷力,自然就上來了。看別人的文章,就能很快判斷出,對方每塊兒講得對不對,哪塊兒又是自己不清楚的,模稜兩可的。當然也為看源碼,分析源碼提供了基礎。

10本書讀2遍的好處,應該大於一本書讀20遍。10本書的交集,那就是基礎知識的核心,而併集那就是所有的知識。好書當然要多讀,反覆讀。但是只讀一本是不行的。因為每本書的側重點都不一樣。從不同的側面,去理解一個知識點,是很有意義的。

所以特別佩服印度人,他跟你講英文,你一個詞語沒聽懂,他會蹦出n個同一意思的單詞,你聽懂一個,就ok了。看書也是這樣的,某一塊講得不透徹,不用擔心,其他書籍可以幫助你來了解。

第二個問題是,書籍推薦。

個人覺得不錯的,沒事可以翻翻的。書籍如下:

《JavaScript面向對象編程指南》,風格輕鬆易懂,比較適合初學者,原型那塊兒講得透徹,12種繼承方式呢。

《JavaScript權威指南》《JavaScript高級程序設計》,這兩本書經典是經典,但是太厚,適合把其中任意一章都當成一本書來讀。洋洋灑灑,很難一口氣看完。比較適合當做參考書。

《你不知道的JavaScript》 狙擊js核心細節,閉包、原型、this講得都還清楚。目前《中冊》也出了,還在看。

《JavaScript設計模式與開發實踐》 js設計模式也是要學的,此書把js的設計模式講得非常清晰,一點不晦澀,看起來沒多少難度。

《正則指引》,分析源碼時,如果正則表達式不懂,沒法進行下去的。此書相對來說講得比較清晰。

《基於MVC的JavaScript Web富應用開發》,看完後,基本能寫出自己的mvc框架了。是本好書。

《JavaScript函數式編程》,js是一門函數式語言,此書是函數式編程一個入門,函數是一等公民那是非常重要的。

《JavaScript忍者秘籍》,JQuery作者寫的,沒有傳說中的那麼難讀,話說就算你看完並理解所有知識點,也不會達到世界高手級別的。因為你還沒有做到隨心所欲。

《JavaScript框架設計》,如果初看此書,會覺得此書有羅列代碼之嫌。在我看來,此書講究的是框架的全局觀。以上書籍是我認為是成就高手之路上必須看的,也需要反覆看。

css相關的書籍,說實話我看得比較少,總共有六七本吧。有兩本必須推薦一下:

《CSS權威指南》,css基礎知識點那是講得非常清楚的。什麼層疊優先級、line-height啥的。不是隨便一本書都敢叫「權威指南」的。

《CSS揭秘》,此書我也是不斷的看,此書才不屑於全面講css3各屬性呢。css規範文檔能講的,它只會講你最不在意的。此書解決的47問題,解決思路和解決方案同等重要,很有啟發性。以上各書你都可以不買,至少買本此書吧。

第三個問題,怎麼看。

想必很多同學,都想看書,但是很難看下去。文字部分相對來說還能看看,一遇到代碼,頭皮就發麻了。此問題一開始時我也遇到的。

說一個學習理論。比如說學英語,有個開水理論。詞彙量必須達到6000才行,如果沒達到,英文水平不會上去的,這跟燒開水一樣,沒事燒燒,放著涼涼,從來沒燒到100度,那麼此水是永遠不能喝的。一旦煮沸過,就可以隨時喝了。

20本書你看不下去,說明什麼呢?任何一本書,你都沒看完過。熟悉的,永遠只是前三章。別笑,我原先也是這樣的。

那麼現在的問題是,怎麼把一本書看完呢?很簡單,敲。《基於MVC的JavaScript Web富應用開發》這本書我看時,就是這樣,終於有一天,我下定決心要把此書從頭到尾敲一遍。文字加代碼都敲,然後就一章一章得看完了。代碼敲一遍後,你會發現,沒之前看起來的那麼難。

如果你屬於一看書就犯困那種同學。強烈建議你把《JavaScript面向對象編程指南》此書從頭到尾敲一遍。堅持看完一本書後,信心就上來了。先保證看完一本再說,看完3本後,基本應該能做到幾天就能看一本了。萬事開頭難,加油吧。

第四個問題,看書的層次問題。

書看完後,要自己總結,要與其他書籍對比看。有同學同時對比著看《權威指南》和《高設》來的。隨便拿出個知識點,你都能閉著眼睛說得頭頭是道,說明水平夠了。

下一塊就是源碼的學習了。看框架源碼之前,想說一件事情:dom的api不懂,沒問題,你可以百度。

但是正則一定要先研究研究,不然大多數人去嘗試分析源碼時,遇到的挫折都在於此。

怎麼去閱讀源碼呢?敲,照著敲。

有哪些代碼值得去敲呢?優秀框架或者庫的源碼都值得你去敲。但是拿 jQuery 來敲,來入門,那不行的。原因:太他麼長了。八九千行呢!!

個人覺得Underscore.js庫是不錯的第一個選擇。原因都是工具方法,敲完以後自己的水平應該略有小成吧。其實有一些 api 的實現,你要把它當成 getElementById 一樣,深深的印在腦海裡。比如 extend 方法,必須張口就來。敲完 Underscore.js 庫後,可以考慮去看看《JavaScript函數式編程》這本書了。

jQuery的源碼不好敲。那麼 zepto 的源碼比較少1800多行,敲一天應該敲完了。敲幾遍後,把所有不懂的地方,都百度清楚,然後就可以寫自己的類 jQuery 的庫了。然後就可以作為一項技能寫進自己的簡歷裡。比如「創建過自己的jQuery庫」。當然敲的過程,還能幫助自己對 jQuery 的 api 認識。

然後是backbone.js,因為此框架是以類jQuery 和 Underscore.js 為基礎的 mvc 框架。代碼也沒多少行。敲吧。spine.js 與 backbone 類似。可以在敲其之前,先看看那本《基於MVC的JavaScript Web富應用開發》。希望你的簡歷可以添加這麼一筆,「創建過自己的mvc框架」。

其他的,我也敲過一些。包括jQuery.validate.js,包括一些插件。如果你願意的話,bootstrap 你可以去敲敲啊。源碼挺多的,可以按插件逐個來敲。分析明白了,輪播、分頁、下拉框等等的插件那還不是分分鐘隨手就寫一個了。最起碼看看人家api接口是怎麼設計的也是極好的。話說個人在閱讀其css代碼中,也學到了不少東西。說到插件,有兩個必須提提,一個是表格插件,一個是樹。都敲完,簡歷裡可以這麼寫上,「創建過自己的UI框架」。

當然了,你也可以敲你喜歡的框架代碼,重要的是明白其實現原理,最好理解其為啥那麼設計,如果對設計模式比較熟悉的話,會經常發現原來是這麼回事。

照著敲只是分析源碼的入門,用途也是為了學習,最後能用在自己的項目中,那是才是正道。就算沒啥用,也是打發時間的好方式,比看電視劇強多了。我閒著無聊時,就背著敲 underscore 源碼。最後說句,如果你簡歷上能如期寫上那幾句話後,必須是大神。加油吧。

後記

寫本文的最初目的,正如文章開頭說的那樣,方便自己回復大家的提問。本站的任何一篇分享學習經驗的文章,基本都會引起共鳴,這確實是一個值得討論的話題。這裡再說說幾個事情。

有人問我前端工作經驗事情

沒幾年。三年多。

初學者或新手(beginner)怎麼辦?

看書和分析源碼是重要的提高方式,但不適合新手。新手需要的是能快速的入門和入行,能快速的上手工作。一種快捷的學習方式就是看視頻。正如有的同學說得那樣,知道有哪些東西,怎麼用就可以了。

看視頻是有好處的,首先它是一種被動學習方式。我最開始的入門也是看視頻來的,只需要看就行了。一遍沒懂,再放一遍,我基本上是1.5倍數去看的。

而讀書是一種主動方式,需要自己一頁一頁翻。需要自己主動的去理解。而很多東西,也許只是視頻老師一句話,就能突出的重點,需要我們自己去解讀。還有另一件事情是,比如發現自己某個知識點不太清楚,可以單獨去百度。比如this,文章很多的。這種學習方式也是快速掌握知識點的好辦法。

書籍需要技術評審,那麼看文章一定要看看評論。不過視頻就不好說了,視頻一般都不會講得太深入,偶爾也有講錯的。當年我也曾被一些視頻誤導過,建議找不錯的視頻看看。各大網站培訓機構的免費視頻挺多的。

看書和分析源碼的時機

但已經工作一年半載時,正是提高的好時候,此時可以去看書了。全面系統的梳理知識點,掃清自己的盲區。如果只是靠項目經驗是不夠的,通過項目來學習,那肯定是必須的,工作本身就是一個學習的過程。

但是工作三年不看書的話,學又能學到多少呢?更何況每個項目都很類似,一直處在舒適區,那真就是5年經驗重複第一年的了。所以我不認同這句話:面試時強調自己的學習能力是工作能力不強的表現。3年經驗的水平,完全有可能超過5年的。

沒有時間去學習?

如果你還沒畢業,就已經天天在本站混了,其實你領先了一大步。都是混過大學的,天天充斥著lol和電視劇的陪伴,我只想說進入社會是要還的。最可怕的是什麼呢?該還、還不還(這幾個字別念錯了)。時間是有的,就看你願意付出不。下班後學習,周末學習,節假日別人玩的時候,在家敲代碼,這樣才能領先別人。

興趣問題?

興趣和擅長是一個良性迭代循環。你擅長某件事情,就會越喜歡它,越喜歡,就越願意花時間,進而越擅長。此道理都懂,只是缺乏一個 trigger。

如果你喜歡玩遊戲的話,其實你可能非常適合做前端。玩遊戲就是一個反饋機制,前端工作的反饋,相對其他工作來說也是非常及時的。代碼一改,網頁一刷,就看到效果了。擅長、優越感、成就感通常都是連在一起的。每看完一本書,我都覺得很有成就感。每敲完一個庫,也有成就感。

以上純屬一家之言,每個人的學習習慣、方式、態度都不一樣。先端正態度、找到自己的學習方法,進而養成堅持下去的習慣。最後說一句,你我共勉:只要你走在正確的道路上,不管、走得多慢,都是前進!

本文完。


相關焦點

  • JavaScript:學會toString()字符串
    javascript中的toString()方法,主要用於Array、Boolean、Date、Error、Function
  • 第一篇:JavaScript基本語法
    html><head><title>這是登錄頁面</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript
  • JavaScript模擬輪播圖效果
    div{       border: 1px solid white;       width:600px ;       height:400px;       margin: auto;       text-align: center;     }   </style>   <script type="text/javascript
  • JavaScript函數 - 遞歸
    >2.找出一個臨界值,n==0時,就不需要列印了,直接return;即可3.不等於0時,直接document.write列印hello world4.然後緊跟著return print(n-1); 依次列印<script type = "text/javascript
  • (14/30)Blazor系列:JavaScript interop(互操作)
    https://sweetalert.js.org[2]Blazor版本: https://github.com/Basaingeal/Razor.SweetAlert2[3]Blazor JavaScript interoperability (JS interop): https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability
  • 20個常用的JavaScript簡寫技巧
    箭頭函數 參考:JavaScript Arrow function https://jscurious.com/javascript-arrow-function/ 8. 模板字符串 我們一般使用 + 運算符來連接字符串變量。
  • Java、C/C++、JavaScript、PHP、Python,到底用來開發什麼?
    小白學編程,經常會迷茫,困惑,不知道學什麼?今天聽人說Java不錯,想學;明天聽人說Python前景廣,想學;……為什麼會迷茫,還不是因為你不夠了解他們。javascript聽起來跟java有關係,其實並沒有任何關係,只是名字像而已。就好比雷峰塔和雷鋒的關係一樣,雖然只差一個字。 js最廣泛的應用毫無疑問是在web前端。簡單的說,網站給你傳過來的是一堆用各種標籤表示格式的文檔,而js負責操縱這些文檔實現一些客戶端動態效果。js的領地還不僅如此,現在的Node.js還可以用於伺服器端的開發。
  • 0基礎學習JavaScript一定要知道如何使用VS2019去編寫代碼
    </title> <script type="text/javascript"> document.write("你好!")JavaScript代碼的基本使用如下說明:一、代碼編寫位置<script type="text/javascript">----JavaScript代碼段</script&
  • 1 分鐘讀完《10 分鐘學會 JavaScript 的 Async/Await》
    閱讀原文:JavaScript Async/Await Explained in 10 Minutes(https://tutorialzine.com/2017/07/javascript-async-await-explained)討論地址:10 分鐘學會 JavaScript 的 Async/Await(https://github.com/dev-reading/
  • 重新認識JavaScript中的true和false
    原文:https://www.sitepoint.com/javascript-truthy-falsy/譯文:https://segmentfault.com/a/1190000007665056作者:Craig Buckler譯者:楊忠勳推薦閱讀:
  • 精讀《高性能 javascript》
    前言本期我來給大家推薦的書是《高性能JavaScript》,在這本書中我們能夠了解 javascript 開發過程中的性能瓶頸,如何提升各方面的性能
  • 在2016 年學 JavaScript 是一種什麼樣的體驗?
    譯者:方應杭 嘿,我最近接到一個 Web 項目,不過老實說,我這兩年沒怎麼接觸 Web 編程,聽說 Web 技術已經發生了一些變化。
  • 2020年11個熱門JavaScript 庫
    7:Leaflet.jsstar:27.8k文檔:https://leafletjs.com/GitHub地址:https://github.com/Leaflet/LeafletLeaflet 是一個為行動裝置設計的交互式地圖的開源的 javascript
  • 初學JavaScript應該清楚函數、事件、關鍵字和保留字、注釋的使用
    </title> <script type="text/javascript"> document.write("你好"); document.write("Hello"); </script>&
  • 炫酷黑色電影資訊博客網頁模板(電影主題-HTML+CSS+JavaScript-前端大作業)
    ;/li><li><ahref="#"><imgsrc="images/b4.jpg"alt=""/></a></li><li><ahref="#"><imgsrc="images/b5.jpg"alt=""/></a></li></ul><ahref="javascript
  • JavaScript API 設計原則
    參考資料:via:http://jinlong.github.io/2015/08/31/secrets-of-awesome-javascript-api-design/
  • 用10行JavaScript代碼製作一款漂亮的視差效果
    英文 | https://www.ibrahima-ndaw.com/blog/parallax-effect-with-10-lines-of-javascript
  • JavaScript代理Proxy的驚人力量
    資源關於本文譯者:飄飄作者:@Georgy Glezer原文:https://levelup.gitconnected.com/the-amazing-power-of-javascript-proxies-aa27c6d06bcb來個【分享、點讚、在看】三連支持一下吧
  • 【英】Javascript ES2019中的8個新特性
    關於本文作者:@Rienz 原文:https://codedam.com/8-new-features-javascript-es2019/最後,為你推薦【英】關於如何成為全棧開發者的6個基本技巧【英】Vue3.0 對Web開發意味著什麼?
  • 程式設計師必須掌握的 12 個 JavaScript 技能!
    本文將與大家分享 12 個實用的 JavaScript 技能,未來我也將在 Github 的 JS Tips&Tidbits 倉庫(https://github.com/nas5w/javascript-tips-and-tidbits)中持續更新此概念列表。