老姚浅谈:怎么学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.mzph.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…