老姚淺談:怎么學JavaScript?

大家好,我是若川。當初我就是看本文深受啟發,開始看書讀源碼。所以現在聯系了作者@老姚 授權轉載分享給大家。我按照文中的做法敲完了《JavaScript語言精粹 修訂版》,在2017年7月23日寫出了我的第一篇文章《讀書筆記》。看完了《JavaScript面向對象編程》、《你不知道的JavaScript》上中卷等書。到現在看了很多源碼,輸出了10余篇學習源碼系列。面試、年度總結、JS基礎系列

@老姚 可能有一部分讀者朋友不知道是誰。這里簡單介紹下:之前經常在前端網發文,不過現在前端網注銷了。他寫了很多優質文章,其中有一本小書《JavaScript正則表達式迷你書》(百度可以搜索到)。非常好,學正則看這本就夠了。我在2017年時看完了,雖然現在不常用基本忘記了。
原標題《前端網老姚淺談:怎么學JavaScript?》
鏈接:https://zhuanlan.zhihu.com/p/23265155


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

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

正題開始,“前端怎么學”應該因人而異,別人的方法未必適合自己。就說說我的學習方法吧:我把大部分時間放在學習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庫”。當然敲的過程,還能幫助自己對 jQueryapi 認識。

然后是backbone.js,因為此框架是以類jQueryUnderscore.js 為基礎的 mvc 框架。代碼也沒多少行。敲吧。spine.jsbackbone 類似。可以在敲其之前,先看看那本《基于MVC的JavaScript Web富應用開發》。希望你的簡歷可以添加這么一筆,“創建過自己的mvc框架”。

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

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

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

后記

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

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

沒幾年。三年多。

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

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

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

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

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

看書和分析源碼的時機

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

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

沒有時間去學習?

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

興趣問題?

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

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

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

本文完。


最近組建了一個江西人的前端交流群,如果你是江西人可以加我微信?ruochuan12?拉你進群。


推薦閱讀

我在阿里招前端,該怎么幫你(可進面試群)
畢業年限不長的前端焦慮和突破方法

前端搶飯碗系列之Vue項目如何做單元測試
前端使用puppeteer 爬蟲生成《React.js 小書》PDF并合并

·················?若川簡介?·················

你好,我是若川,畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇,在知乎、掘金收獲超百萬閱讀。

從2014年起,每年都會寫一篇年度總結,已經寫了7篇,點擊查看年度總結。

同時,活躍在知乎@若川,掘金@若川。致力于分享前端開發經驗,愿景:幫助5年內前端人走向前列。

點擊方卡片關注我、加個星標

今日話題

也許會有很多人就是看到某篇文章開始有所改變,后來努力向上,做出了很多優秀的成果。這也許就是分享的一種好處吧。歡迎分享、收藏、點贊、在看我的公眾號文章~

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275722.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275722.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275722.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JavaScript 如何使用閉包

閉包基本上是內部函數可以訪問其范圍之外的變量&#xff0c;可用于實現隱私和創建函數工廠 定義一個數組&#xff0c;循環遍歷這個數組并在延遲3秒后打印每個元素的索引 先看一個不正確的寫法&#xff1a; const arr [10, 12, 15, 21]; for (var i 0; i < arr.length; i) …

ai中導入sketch_在Sketch中營造深度感

ai中導入sketchCreating a user interface with depth can seem daunting at first, but it only requires you to understand one fundamental rule — emulating a light source.首先&#xff0c;創建具有深度的用戶界面似乎很艱巨&#xff0c;但這僅要求您了解一個基本規則-…

java byte轉bigdecimal_Java BigDecimal byteValueExact()用法及代碼示例

java.math.BigDecimal.byteValueExact()是一個內置函數&#xff0c;它將BigDecimal轉換為字節并檢查丟失的信息。任何大于127或小于-128的BigDecimal值都將生成異常&#xff0c;因為它不適合字節范圍。用法:public byte byteValueExact()參數&#xff1a;該方法不接受任何參數。…

Python3+PyCharm+selenium3 環境搭建

安裝Python3請去python官網下載安裝包&#xff0c;我用的是Python3.6安裝PyCharm&#xff0c;這個也是去官網自己下吧&#xff0c;偶的是2018.2.3&#xff08;CommunityEdition&#xff09;接下來安裝seleniumPyCharm中Tremianl安裝完成后&#xff0c;在python Console中輸入沒…

2021 年最值得了解的 Node.js 工具

大家好&#xff0c;我是若川。今天分享一篇用得上的 node 庫 鏈接地址&#xff1a;https://github.com/huaize2020/awesome-nodejs?前言&#xff1a;文章的靈感來源于&#xff0c;社群中某大佬分享一個自己耗時數月維護的github項目 awesome-nodejs 。或許你跟我一樣會有一個疑…

DOMContentLoaded與interactive

ie中inline script執行時竟然第一次進入頁面,doc.readyState是interactive.刷新則是loadinginteractive也就算了,竟然沒有把dom樹構建好,也沒有body...而在inline的腳本里跑計時器什么的,去doc.body.doScroll(left);則有可能碰到interactive時dom樹構建好的情況.而其它瀏覽器in…

figma下載_何時在Figma中使用組或框架

figma下載Groups and Frames have very different uses in Figma, but it’s difficult at first to tell why both of them exist. I can assure you that they complement each other, but first, you need to understand the nuances of each. I’ll show you how to make t…

java標記錯誤_標記電子郵件Java時出錯

在調用以下我的代碼片段時&#xff1a;Message message_in null;inbox instanceof IMAPFolderIMAPFolder f (IMAPFolder)inbox;f.idle();System.out.println("IDLE done");message_in inbox.getMessage(inbox.getMessageCount());message_in.setFlag(Flags.Flag.D…

邁入現代 Web 開發(GMTC 2021 演講全文)

前言&#xff1a;希望像做游戲一樣做 Web 開發的 dexteryy 同學今天在 GMTC 技術大會上又搞了一場「跨年演講」&#xff08;內容超多的意思&#xff09;&#xff0c;不但現場爆滿、超時嚴重&#xff0c;而且一如既往的講完之后只要把講稿和幻燈片拼起來就能發出來&#xff0c;大…

Laravel 測試: PHPUnit 入門教程

介紹 PHPUnit 測試的基礎知識&#xff0c;使用基本的 PHPUnit 斷言和 Laravel 測試助手。 介紹 PHPUnit 是最古老和最著名的 PHP 單元測試包之一。它主要用于單元測試&#xff0c;這意味著可以用盡可能小的組件測試代碼&#xff0c;但是它也非常靈活&#xff0c;可以用于很多不…

Brad Wilson寫的 ASP.NET MVC 3 Service Location 系列文章索引

Brad Wilson在他自己的博客寫了有關ASP.NET MVC3依賴注入支持的一系列文章&#xff0c;但由于某些原因&#xff08;你懂的&#xff09;&#xff0c;需要FQ才能閱讀。 為了方便自己也方便喜歡的同學&#xff0c;特意FQ再拷貝回來發布&#xff0c;以下是這一系列文章的索引&#…

注釋標記的原則_它關系到平臺如何標記操縱的媒體。 這是設計師應遵循的12條原則。

注釋標記的原則By Emily Saltz, Tommy Shane, Victoria Kwan, Claire Leibowicz, Claire Wardle埃米莉薩爾茨 ( Emily Saltz) &#xff0c; 湯米沙恩 ( Tommy Shane) &#xff0c; 關 穎琳 ( Victoria Kwan) &#xff0c; 克萊爾萊博維奇 ( Claire Leibowicz) &#xff0c; 克萊…

saltapi java_搭建基于Jenkins salt-api的運維工具

1. 安裝salt-master和salt-minion安裝過程不再贅述&#xff0c;請參考http://docs.saltstack.com/en/latest/topics/installation/index.html2. 安裝salt-api&#xff0c;cherrypy用來jenkins與salt通信啟用salt-api在salt master的配置文件中添加rest_cherrypy:port: 8010host…

他開發了redux,昨晚字節一面卻掛了?

大家好&#xff0c;我是若川&#xff0c;誠邀你進群交流學習。今天分享一次直播的記錄。我寫過redux源碼文章。動手按照文中例子學習&#xff0c;我相信會有所收獲。學習源碼系列、面試、年度總結、JS基礎系列redux的作者是誰&#xff1f;Dan&#xff0c;他的全稱叫做Dan Abram…

Onew積極開拓國際市場,為全球用戶提供全方位金融服務

當區塊鏈技術剛被提出的時候&#xff0c;金融被認為是最主要的應用場景之一&#xff0c;具體包括建立基于區塊鏈技術的銀行間點對點支付結算系統和跨境支付系統、在交易所運用區塊鏈技術實現股權的登記和轉讓等。 區塊鏈應用于金融領域有著天生的絕對優勢&#xff0c;主觀來看&…

高通董事長:努力降低智能手機價格

高通董事長&#xff1a;努力降低智能手機價格 高通公司董事長兼CEO保羅雅各布近日表示&#xff0c;2011年高通除了繼續與各方合作提供高端及各層次智能手機外&#xff0c;將更加致力于降低智能手機的價格。 手機將成為個人生活中心 作為移動通信芯片領域的霸主&#xff0c;高通…

mysql數據庫的新特性_【數據庫】MySQL新特性歸檔介紹

MySQL 8.0.17發布了&#xff0c;看了下release note&#xff0c;發現果真如之前預期的那樣&#xff0c;恢復了redo log歸檔(redo log archiving)功能。之所以說是“恢復”&#xff0c;那是因為在InnoDB非常古老的版本(MySQL 4.0.6之前的版本)才存在&#xff0c;之后就取消了&am…

為什么同事寫的代碼那么優雅~

大家好&#xff0c;我是若川&#xff0c;誠邀你進群交流學習。今天分享一篇相對輕松的代碼簡潔之道。學習源碼系列、面試、年度總結、JS基礎系列內容出自《代碼整潔之道》、Alex Kondov[1]的博文tao-of-react[2]和《Clean Code of Javascript》image.png代碼整潔有什么用&#…

[轉]讓你賺大錢成富翁的4個投資習慣

本文轉自&#xff1a;http://bbs.jrj.com.cn/msg,68723793.html 第一條&#xff1a;對自己進行投資  這是最大最大的投資&#xff0c;當然收獲也是最為豐盛的。藝不壓身&#xff0c;這句話非常有哲理。朋友今年27歲&#xff0c;可是毫不夸張地說&#xff0c;他已經具有了百萬…

thymeleaf th:href url傳遞多參數

<a th:href"{/teacherShowMember(class_id${class.classId}&#xff0c;class_name${class.className})}"></a> thymeleaf使用&#xff08;,,&#xff09;的形式解析多個參數,結合${}放置變量十分方便 傳統URL傳遞多參數使用&#xff1f;&拼接 <a…