阅读 7555

入门前端一周年总结-我是如何快速入门前端的知识分享

概述

1.2号,是我入门前端的一周年,这一年里,自己也在不断摸索学习的方法。这里记录和分享下自己在平时生活中接触的学习资源。

先介绍下自己的经验,18年毕业,目前在南京工作,虽然大学学的是软件工程,直到大四才决定走这条路(因为之前打算出去做销售类似的工作),发现自己的兴趣点,并且逐渐深入前端。本人大概是从7月份开始高强度的学习。

目前学习主要以书本(纸质书)、博客文章、少部分付费视频、练习网站为主。在这里分享一下自己的学习方式和资源。

个人习惯

笔者在看书或者学习的过程中,喜欢记笔记。目前笔记大概记了有十来本了。每本 B5 纸大概60页这样。所以导致看书的速度会慢的多。但是效果会比较好。

为什么钟爱记笔记,原因有3:

  1. 自认为比较笨,认为好记性不如烂笔头。
  2. 方便自己知识的查找。只要目录结构记得清晰点。
  3. 方便自己进行知识整理的适合,对知识进行梳理,也方便了自己整理技术博客对适合进行知识查找。

当然,记笔记的习惯也有不好的地方。如:技术更新会导致笔记知识的技术落后或者造成误区。在我看来,利大于弊。

书籍推荐

JavaScript部分


JavaScript高级程序设计,这本书自己看了两遍,确实比较厚。但是对于基础非常重视,其实,在第二遍仔细看的过程中,发现很多细节性的东西自己之前没注意。所以,这本好书值得读不止一遍,前端的圣经。

Professional_JavaScript.jpg

JavaScript语言精粹,很薄的一本书,但是知识点很分明,作者很清晰的指出了 JavaScript 这门语言中精华部分和糟粕部分,此外,还讲解了一些编码的技巧,很受用。

JavaScript_good_parts.jpg

编写可维护的 JavaScript,这本书也不厚,但是教给我很多编码的技巧,如何编写可读性很高,易维护的 JavaScript 代码。此外,这本书是基于 ES5 编写的。所以,很多技巧可以用 ES6 的语法进行替代。在这个过程中,自己又总结了下 ES6 代码和 ES5 的语法的区别,所以,我们要善于总结。

mataniableJs.jpg

ES6 标准入门,很完整很细致的读完了一遍,工作中又经常翻这本书。真的是阮一峰老师的给力之作啊。强力推荐这本书。当然,也有电子稿。可以很深入的掌握 ES6 的语法,甚至将语法触及到 ES6+。

ES6.jpg

你不知道的 JavaScript ,上中下三卷。这三本书帮助我更加深入的了解了 JavaScript 这门语言。这本书基本是从语言的底层来剖析 JavaSCript,所以读的很慢。有机会会再次温习这三本书。强烈推荐

you_dont_konw.png

JavaScript 忍者秘籍,这本书的作者的目的是让这本书的读者成为真正的火影忍者,在我看来,这本书最大的特点是作者最大限度的结合了当下最流行的几个库(作者当时的时代,不是现在的MVVM),教我们如何写出更好的代码,甚至是一个优秀的库。此外,作者对跨浏览器的策略描述的比较多(无奈跨浏览器实在提不上兴趣),书中也大量运用 JQ 的思维。(因为作者就是JQ的作者)

JavaScript_nija.jpg

JavaScript 函数式编程指南。这本书笔者暂时读了一半,读的有点懵,后来又补充了很多函数式编程的相关知识,等相关思维感觉成熟了,再重拾这本书。此外,笔者已经在编码中运用了函数式的思想来编码,还是很好的,这个是思维转换的过程,这个过程还是很痛苦的,慢慢的领略到函数式编程给我们带来的好处之后机会觉得很棒了。

functional_js.jpg

高性能 JavaScript 这本书最近正准备看。

high_performance_js.jpg

CSS书籍


CSS权威指南,很透彻的剖析了CSS2的各个属性,但是,我再读第二遍的时候,对其中对属性做一一尝试,发现很多知识点其实已经被标准修改了。所以,大家也要注意,不能盲目信任权威,要自我实践。此外,我特别喜欢作者列出对属性支持和应用的表格,很清晰。遗憾的是,没有CSS3部分的描述

css_official.jpg

CSS揭秘,这本书我只读了一半,读的过程中就不断感叹自己好菜,太打击自信了。作者是 CSS 组织的规范成员之一,那些技巧足够让我们眼前一亮。这本书,读一遍显然是不够的,我觉得重要的是要理解其中的思想。而不是把 CSS 当成一种工具来使用。唯一的缺点就是这本书有点小贵。全彩印 200 多页,定价是 90 多。(也是读者买过逼格最高的一本书哈)

css_secert.jpg

CSS世界,是国内知名博主张鑫旭的鼎力之作,可是我还没有读。之后会抽时间来拜读,现在的我时间永远不够用,有点学不动了的感觉。

css_world.jpg

网络,计算机,算法相关知识


图解 HTTP,这本书算是我对 HTTP 很好的入门了,全书只有200页左右,花了周末两整天的时间读完了,很清晰易懂。大量的插图我也比较喜欢的。

picture_http.jpg

图解 TCP,还没开始读,但是因为图解 HTTP 的缘故,我也会好好的读这本书的。

picture_tcp.jpg

HTTP 权威指南,这本书太厚了,足足有 600 多页,现在笔者读了 300 多页了,读的比较慢,且记得笔记比较多。这让我第一次如此深入读了解 HTTP,虽然书很厚,但是读起来不会很晦涩,语言和朴实易懂。只能说,译者太厉害了。

http_derect.jpg

计算机科学导论,这本书作者是这样解释的,是给未了解过计算机的人们普及计算机相关知识。但是我觉得就是在扯淡。全书读起来很晦涩,理解其中的内容,需要大量的计算机知识,要不然根本读不下来。我读的过程中,一边读,一边做习题。觉得对计算机的一些知识做了很好的储备,比如说:计算机的存储原理,整数以补码的形式存,浮点数以余码的形式存,为什么不用原码的形式存,这样做的好处有哪些?所以,这本书很值得一读。在读到一半的时候,读到了HTTP相关的知识,所以,直接转到了 HTTP 权威指南了。后面的算法,操作系统章节,自己都准备好了对应的书籍。

common_category.jpg

深入理解计算机系统,很厚的一本书,没有读。之后会抽时间读,现在时间安排的比较满。

deep_in_system.jpg

TCP/IP 协议 (卷一),这本书也特别厚,但是总觉得自己对TCP/IP 协议的理解不够深刻,有时间会拜读这本书。

tcp_ip_one.jpg

数据结构与算法 JavaSCript 描述,这本书只能作为我深入算法和数据结构的开胃菜,全书也就不到 200 页。还没开始读。

js_construt.jpg

算法导论,最厚的一本书,目测有 1000 页左右。让我很恐惧,同事跟我说,这本书比较生涩,但是自己还是买下来了。深入了解了 HTTP 和 TCP 之后,会把重心放在 数据结构和算法 上。

ai_category.jpg

浏览器内核的相关知识。

最近刚入手了一本书,叫 WebKit 技术内幕,是一本二手书,也是绝版书籍。我买过的最贵的一本书,要 200 多。翻了部分,自己非常喜欢。一个前端,怎么能不对自己整天打交道的工具 浏览器 进行一次近距离的了解呢。之前有大概了解过浏览器的渲染原理,但是目前的一些教程不满足自己的期望,深入的了解了这本书,自己对其中的原理和一些实践有一些自己的见解,后期会以博客的形式,以3到4篇到篇幅来详细介绍一下,从输入URL到页面到渲染完成,到底发生了什么。

webkit.jpg

学习资源

现在接触的很多都是 英文的网站,无奈自己英语太差,最多能以龟速读英文文章,视频基本听不懂,所以,准备苦练英语,没这玩意不行啊。 这里还是把我收藏的一些技术型网站或者博客推荐出来。

学习网站


这些资源都是本人平日中学习进行逐渐收集到的,对本人的学习起到了很大的帮助作用。 这些只是自己在学习的过程中用到的,并且今后还会一直用到。

前端基础知识

  1. 首推 Frontend Master,光看到里面的讲师阵容,就吊起了我的兴趣,不过该视频是收费的,而且收费还不便宜,但是,优质的课程就值这个价不是吗?买不起怎么办?看下面

  2. 推荐 egghead,该网站很多视频都是免费的,而且讲师阵容也很强大,很多知名库作者也都会在该网站做分享。如:Redux 的作者 Dan Abramov,所以,有一定的英语基础的可以收下。

  3. 慕课网中一些免费的课程,和付费的课程质量也是相当高的,笔者当初就在慕课网上花 699 元购得 Vue.js 源码全方位深入解析,使自己对 Vue.js 的理解更加深入了。

  4. Vue 技术内幕,该网站是开源的,也是 Vue 作者推荐的源码分析的首选,作者分析的很有层次,自己对着源码看这个教程,可以很有条理的解读源码,并且作者教会了我很多阅读源码的技巧。

  5. 汤姆大叔的深入理解JavaScript系列,个人最开始接触到的技术博客,对于 JavaScript 有着比较深入的分析。

  6. 2018年你应该知道的 15个 JavaScript 实用程序库,推荐了很多实用的 JavaScript 库,比如:笔者喜欢的 Ramda,还有很有实用意义的 30 seconds of code,我在后者的 30 seconds of code 中学到了很多编写函数的技巧。也通过该系列更加去深入了一些 JavaScript 中的高级函数的用法 如 reduce,filter等。虽然有中文翻译,但是建议跟着 github 上学习,因为中文翻译不会随着源代码更新。此外,还有其他等系列,如 CSS,React 都是相当不错的。

  7. codewar,这是站外的练习网站,语言和 task 都比较全面。可能需要翻墙。大家自行选择。

  8. leetcode,这是站内的专注于算法的练习网站。大家可以斟酌选择。

  9. img标签中,不为人知的事情,该文章是关于 img 标签的一些隐藏的知识点,通过阅读这篇文章,可以更加清晰的了解 img 标签中一些知识。

网络相关知识

  1. 车小胖技术博客,这是关于网络方面的技术博客,对网络对一些现象做了比较通透的解释,本人比较喜欢。

  2. 车小胖,这个是文章系列,介绍网络相关的知识。想深入了解可以去看一下。

  3. 图解基于 HTTPS 的 DNS,这是关于 dns 查询到过程,配上插图和文字到描述,可以对 dns 到查询过程有一个大概到了解。

  4. howdns.works,完全用插图的形式来解释了 dns 的工作方式,非常形象。

函数式编程

  1. functional light JavaScript,大神对轻量级的函数式编程做了透彻的讲解,英文原文,像我这样英语不怎么样的,读起来也不是很费力气。我在读的过程中对 异步数据流的控制,还有管道流数据,curry化,反curry化,偏函数的应用,point-free,与之前相比有了更加深刻的见解了。

  2. 关于函数式编程的教程,这本电子教程,是一本很好的函数式编程教程

  3. 关于范畴论的系列文章,这是系列文章,文章的一些内容有点晦涩难懂,但是可以对函数式底层的抽象,有了更好的理解。

  4. 趣学Haskell,为了更好的学习函数式编程,我决定接触 Haskell ,这篇教程由浅入深,在学习过程中,再对比下 Ramda 的官方教程,才有点体会 Ramda 这样设计的原因。这条路不知道是不是有点偏了,但是,自己会利用其他时间来学习的。只是为了更好的理解。

  5. 可视化学习 Rx.js,以动画的形式来展现 Rx.js,再也不需要那么抽象的学习 Rx.js,此外,还有 redux 等,也有相应等展示。

浏览器相关的知识

  1. WebKit技术内幕作者的博客,很深入的讲解了浏览器内核对相关知识。

  2. Chorme浏览器的全面教程,系统的描述了Chrome浏览器的信息,可以更加全面的了解Chrome浏览器,最给力的是所有的工具的使用介绍。

react相关

react相关的资源:前端时间从 vue 技术栈转到 react 的过程还是很平稳的,因为对当前流行框架的背后思想已经有了自己的一些见解。所以,过渡很平稳,本着 不光要学会怎么使用,还有透过本质理解背后的思想。这样才能最大化的发挥框架的力量。

  1. react官网,我觉得最好的学习方法就是接触一手资源,官网应该精读,而不是作为一个参考的网站。就比如说 react hooks。我就是在最新的官网了解的,英文读起来不费劲。

  2. react 小书,阮一峰老师的每周总结上看到的,这是我认为最开始学react,redux最好的教程,它不会教你怎么运用这些知识,它通过背后的思想告诉你,redux 为什么要有这个 API,没有这个功能会怎么样,以及自己怎么实现这样的功能,通过精读该教程,自己实现了一个简单版本的 redux 和 react-redux,当然啦,背后的思想最重要。后面自己又去看了下 redux 和 react-redux 库的官方实现,找出区别在哪,优化点有哪些,这些对于理解其背后的本质十分重要。

  3. react-router,我直接学习的 V4 版本,该教程是英文的,但是代码居多,自己可以慢慢琢磨。

  4. 大神吕思远、张立理、唐一等 6 位作者的知乎,虽然现在知乎逛的比较少,但是,还是有很多高质量的文章的,自己在学习 react 的过程中,难免会遇到很多困惑,如:PureComponent 的优化效率到底有多高,组件的状态 和 渲染是否应该都要分开,如何更高效的避免无意义的渲染,是否应该对组件进行更加细粒度的拆分。这些都应该在实践中去寻找答案,然后解惑。

  5. React In Depth,大神justjavac的专栏,深刻的去理解 react 中的一些思想,还是那句话,思想大于代码,好的思想值得我们去借鉴,我们使用一个框架,必须要先去了解其思想。

  6. 进击的react,大神 Morgan 的专栏,文章的内容很经典。

  7. 国内React Fiber的布道者,我是看了他很多的文章,才有了学习的思路,很好的指路人。

其他

  1. 阮一峰老师的博客,我就不列出来了,我们都应该经常去看一下。

  2. 还有掘金上的文章也有好多,大家可以关注下我赞过的文章,我觉得质量都是很好的。

总结

这里我想说的是,实践要与理论并存,不能一味的看书,我的宗旨就是学以致用,我们应该善于思考和总结。学到的知识要思考如何更加有效的应用在实际项目中,笔者一般都是先看书,然后练习,成熟的方式会在实际项目中应用。如果大家有更好的方式,欢迎交流和学习。

以上是笔者目前自己遵循的学习方法,当然,学习的方式有很多种,笔者会不定期的更新,可能更新不会同步到掘金,我会在自己的GitHub pages上进行更新,欢迎大家关注并一起交流。如果有好的书籍或者学习方式的话,请推荐给我。感激不尽。

关于之后的计划,笔者将会把更多的重心放在 react,http,算法之上,同时,开始深入学习一些前端生态中的工具,如 node,webpack。