首页 社会 正文

Web 前端怎样入门?

又过了好久,前端发展果然很快,重写了回答,以免误人子弟,以后不再更新。匿名是不想引起过多关注,没有别的意思。 …

又过了好久,前端发展果然很快,重写了回答,以免误人子弟,以后不再更新。匿名是不想引起过多关注,没有别的意思。


直接进入正题。前端入门是一个螺旋上升的过程,既要反复看书,也必须抓紧时间实践。入门的话三个月肯定是足够了。

IFE(百度前端技术学院)是一个绝佳的练习平台,题目都是开源的。15年的学习资料比较多,而16年的题目题量较大,难度也稍大。所以我个人建议先刷点 15 年的基础题,不会做也可以参考别人的代码。

  • IFE2015:ife/2015_spring/task at master · baidu-ife/ife · GitHub
  • IFE2016:百度前端技术学院

自己想搞点其他项目也是可以的,本质上就是要给自己找点事情做,绝对不能单看书。

我把这三个月大致分为三个阶段。

1. HTML + CSS前端的入门门槛极低,体现在 HTML 和 CSS 上。运行环境就是浏览器,推荐 Chrome。你需要的只是一个编辑器,直接用 VSCode 吧。

HTML 和 CSS 不是编程语言,前者只是结构标签,后者则是样式配置,入门是非常简单的。网上资料也有很多,可以参考 MDN。我当时是看了一本书 Head First HTML and CSS,比较无脑,虽然浅显易懂但价格比较感人,粗略翻一遍就可以了,不用买。迅速刷一遍 MDN 上介绍 HTML 和 CSS 的部分,对两者有个大致印象就好,不用死记硬背,短时间记不住的。刷慕课网勉强还行,但以后查资料还是要看 MDN 的,建议一步到位,最好看英文原版的。

接下来就是学习 CSS 了,CSS 要学深入非常难,入门的话会切图就行了。推荐:

  • 《CSS 权威指南(第四版)》。第四版包含了 CSS3 的内容,不需要再看别的了。这书非常枯燥,花几天硬啃下来就好了。属性细节不必记忆,以后用到肯定要再查的。着重点放在大局上,抓住重点快速过一遍,比如盒模型、定位、弹性盒布局等。

以上内容用时 5 天左右,主要是啃《CSS 权威指南(第四版)》。下面是实践。学了几天 HTML 和 CSS 了,应该也有点成果了。打开 IFE2015 task1,写个静态页面吧。

写不出来是正常的。可以去看下别人的代码吧,看一小部分就开窍了。忘掉的属性就查书或者查 MDN,多尝试,不断踩坑才有进步。

切完一张图后,别着急往下写。新手的代码通常会有胡乱的代码缩进、毫无章法的属性顺序等问题。

这时候应该重写。重写之前先找一份代码规范,比如 GitHub – ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的,只要合理及风格统一即可。

再去看一下别人提交的代码,多看几份。当然自己也要判断,不能听风就是雨啊,人家写得不好你再去重写一次,等于你也有责任对不对。

开始重写了,会发现写代码速度也快了很多。切几张页面后,应该比较熟练了。如果看到页面布局就大概知道应该如何写了,那就可以进入 JavaScript 的学习了。

以上内容用时 10 天左右。

进阶部分可以回头再看:

  • 掌握预处理工具 Sass 或 Less,语法都差不多,不用死记硬背,一通百通
  • 阅读 Bootstrap 源码。其实用得很少了,主要是看下大量的 CSS 代码是如何组织的,以及关注栅格布局等关键实现
  • 《CSS 揭秘》,奇技淫巧合集,增长一下见识,献上膝盖就行

2. JavaScript

这是至关重要的阶段。广义的 JavaScript 可以大致分为语言特性(ECMAScript)和 Web API(DOM、BOM 等)。

  • 强烈推荐《JavaScript 高级程序设计(第3版)》,俗称红宝书。前七章大致讲语言特性,是重中之重,必须反复阅读,直至完全理解,有 C/C++ 基础的同学应该没什么问题。DOM、事件流、表单、JSON、Ajax 与最后几章也相当重要,是一些常用的 Web API。其余章节可以略读或直接跳过,比如像 XML 这种已经没用的东西就不用看了,还有那些列举大量 API 的章节,用到再查
  • 推荐《JavaScript 语言精粹》,俗称蝴蝶书。超薄的一本,半天就可以看完。JavaScript是一门有很多坑的语言,去掉坑就是“精粹”了,过一遍就好,不理解的以后回头再看。
  • ECMAScript(简称 ES) 规范在 2015 年后每年都有新特性加入,而红宝书成书时间较早,很多知识点已经跟不上了。ES6(又称 ES2015) 及以后的语言特性也是必学内容,推荐阮一峰老师的《ES6 标准入门》,但这本书以 API 居多,所以还是留个大致印象,以后写到类似的地方,查一查在新的语言特性下,有没有更简洁的写法就好,不必死记硬背
  • 强烈推荐《你不知道的 JS》。原版是英文的,有需要的同学可以自行搜索中文版。非常精彩的书,将 JavaScript 的细节一网打尽。前几本书里搞不懂的东西,比如 this 的指向等问题,通常都能在这里找到答案
  • 不太推荐《JavaScript权威指南》,也就是犀牛书,那就是像一本字典。我就翻过一下,没有细读,不好进一步评论
  • 评论里有提到 jQuery,我觉得完全不用看,写祖传项目的时候再学也很简单的。还是要以原生的 API 为主

以上内容用时 1 个月左右,如果有一些编程经验的话,应该没什么压力。 这些书全部刷完后,差不多就入门了,可以跟人谈笑风生了。 开始实践,IFE2016 阶段二的题基本随便刷。

进阶:

  • TypeScript。对于有静态语言经验的同学,可以直接上手,基本没有难度
  • 学会使用包管理工具 npm,学会在社区上找想要的包,如 npms.io
  • 尝试使用 webpack 构建项目,并通过 Babel 编译 ES 新特性的代码兼容旧版浏览器。配置 webpack 令人痛苦,先能跑起来就行,精细的优化可以以后慢慢调,多查点资料
  • 配置 ESLint 规范代码格式,养成良好编码习惯
  • 看一下 lodash,尝试自己用简洁的代码实现。不希望读过我回答的人还遇到下面这种情况,因为这个问题里的面试官我认识(逃

如何看待前端面试不知道 lodash 被嘲讽不可思议?

www.zhihu.com

  • Web Fundamentals,宝藏网站,Web 开发进阶必读

3. JavaScript 框架

这部分就比较自由了,每个人点的技能树都不一样的。前端的发展是爆炸式的,换工具比翻书还快,所以还是以看文档为主了。

目前主流框架经常被提及的是 React,Angular,Vue。知乎搜一搜就有相当多的优秀答案了。

熟练掌握至少一种框架,把 IFE2016 刷通关吧,耗时 1 个半月左右。我个人推荐 React,对提升 JavaScript 基础有很大帮助。Vue 更像是一门新语言。新人通常不用纠结框架好坏,时间长了都学会也没什么难度吧。

进阶:

  • 框架周边生态,如无数种 Redux 封装,无数种 CSS in JS 方案等
  • 造些轮子
  • 带着问题读源码
  • Node.js,Backend for Frontend
  • ……
  • 都到了这个份上,该学什么心里都有数吧,还用写么

4. 计算机基础知识

发现前端有太多的非科班选手,所以特此补充一节,不懂基础的话天花板会很低。由于本人有 OI 的经验所以稍微占点优势。

操作系统:

  • 《深入理解计算机系统》(CSAPP),入门级别的书,挑重点看一下
  • 《现代操作系统》,翻译得比较差,有条件的同学可以读英文原版,或者用 Operating Systems: Three Easy Pieces 代替
  • The Linux Programming Interface,系统编程好书,跟前端的直接关系已经不大了,但不了解一下的话实在说不过去,不要把路子走窄了
  • Advanced Programming in the UNIX Environment (3rd Edition)(中文版《UNIX 环境高级编程》),同上面的可以一起看

计算机网络:

  • 《计算机网络 自顶向下方法》,入门的网络书,前端至少也要懂 HTTP 协议吧
  • TCP/IP Illustrated(中文版《TCP/IP 详解》),非常详细的经典,内容巨多,按需阅读吧
  • UNIX Network Programming(中文版《UNIX 网络编程》),跟上面系统编程的书一起读

算法和数据结构:

  • 《算法(第四版)》,书里是 Java 实现的,但其实并不难
  • 《算法导论》,比较学术,以实践为主的话可以略读
  • 必须刷题,加强编码水平,LeetCode 级别就足够应付大部分面试了
  • 《算法竞赛入门经典(第二版)》《算法竞赛入门经典 训练指南》,搞竞赛的基本人手一本,没接触过又感兴趣的可以看一下

编译原理:

  • 《编译原理》,俗称龙书。项目里这么多涉及到编译的东西,学一下屠龙之技也无妨啊,其实挺好玩

评论里有觉得我误导人,认为完全不可能做到,甚至说我装逼的。我必须澄清,文章里提到的都是 100% 真实经历,我不缺人脉不缺钱,又不开培训班,何况我都匿名了,装逼图个啥呢……

不过,这个答案还是禁止任何形式的转载,包括但不限于复制、扩充、改写等。

完。

本文来自网络,不代表野草社区立场,转载请注明出处。