Web/17-前端综合/02-2022年Web前端入门自学路线(精简版).md

163 lines
9.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

> 本文的最新内容,更新于**2021-10-09**。大家完全不用担心这篇文章会过时,因为随着 前端技术的更新,本文也会随之更新。
> 本文的最新内容也会在[GitHub](https://github.com/qianguyihao/Web)上实时更新。欢迎在GitHub上关注我一起入门和进阶前端。
我之前写过一篇文章:[《裸辞两个月海投一个月从Android转战Web前端的求职之路》](http://www.cnblogs.com/smyhvae/p/8732781.html)。这篇文章讲述了我在转型过程中的亲身经历和感受,不少童鞋私信问我怎么入门前端,于是有了这篇文章。
## Web前端入门的自学路线
> 新手入门前端,需要学习的**基础内容**有很多,如下。
一、HTML、CSS基础、JavaScript语法基础。学完基础后可以仿照电商网站例如京东、小米做首页的布局。
二、JavaScript语法进阶。包括作用域和闭包、this和对象原型等。相信我JS语法永远是面试中最重要的部分。
三、jQuery、Ajax等。jQuery没有过时它仍然是前端基础的一部分。
四、ES6语法。这部分属于JS新增的语法面试必问。其中关于 promise、async 等内容要尤其关注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面试时有的公司不一定会问canvas靠运气。如果时间不够这部分的内容可以先不学。但如果你会绝对属于加分项。
七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
八、前端框架Vue.js和React。这两个框架至少要会一个。入门时建议先学Vue.js上手相对容易。但无论如何同时掌握 Vue 和 React 才是合格的前端同学。
九、UI框架[Ant Design](https://ant.design/index-cn)、[Element UI](https://element.eleme.cn/#/)。在做管理后台的时候这两个UI框架使用的比较多的。Element UI 是基于 Vue.js技术栈的。Ant Design 既有基于 React技术栈的也有基于 Vue.js技术栈的 [Ant Design Vue](https://antdv.com/) 。
九、Node.js。属于加分项如果时间不够可以先不学但至少要知道 Node 环境的配置,以及 Node 的一些基础知识。
十、前端工程化:构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass、自动化测试、持续集成 等。注意Sass 比 Less 用得多gulp 比 grunt 用得多。
十一、前端综合HTTP协议、跨域通信、安全问题CSRF、XSS、浏览器渲染机制、异步和单线程、页面性能优化、防抖动Debouncing和节流阀Throtting、lazyload、前端错误监控、虚拟DOM等。
十二、编辑器相关。Visual Studio Code 是每个学前端的人都要用到的编辑器。另外前端常见的编辑器、IDE有两个Sublime Text 和 WebStorm 。WebStorm 什么都好可就是太卡顿VS Code就相对轻量很多但是比较占内存。个人总结一下用VS Code 的人越来越多,用 WebStorm 的人越来越少。具体可以看:《[第一次使用VS Code时你应该知道的一切配置](https://www.cnblogs.com/qianguyihao/p/10732375.html)》
十三、TypeScript简称TS。ES 是 JS 的标准TS 是 JS 的超集。TS属于进阶内容建议把上面的基础掌握之后再学TS。
十四、小程序开发。学会基本的JS语法再了解小程序独有的API参考小程序的官方文档就已经掌握了小程序开发没有你想象的那么难so easy。小程序在商业上是成功的但我个人认为它是 Web 技术的倒退也完全体现不出开源精神和开放精神。而且小程序的开发效率贼低IDE也卡到了极点卡爆了。
当然不得不承认小程序开发让很多人找到了编程的工作。但你要一路谨记不要做小程序开发工程师要做Web前端开发工程师。
十五、总结——框架有时候很虚;熟练掌握 JavaScript 基础、核心源码,才是行走江湖、驰骋千里的关键。
## 推荐的前端图文教程
我在GitHub上有一个Web前端入门的学习教程非常详细地址是
> <https://github.com/qianguyihao/Web>
非常详细和贴心你值得star。这个前端教程主要有三个作用
- 网上的大部分入门教程,都不太适合初学者,本项目争取照顾到每一位入门者的同理心。
- 帮助前端同学提供一个精品学习路线和资源,提高学习效率,少走很多弯路。
- 可以当做前端字典,随时翻阅,查漏补缺。
## 推荐的技术博客
- [阮一峰](http://www.ruanyifeng.com/blog/)
- [张鑫旭](http://www.zhangxinxu.com/wordpress/)
## 推荐的书籍
### 1、基础知识相关书籍
- 《[网络是怎样连接的](https://book.douban.com/subject/26941639/)》
程序员面试的时候经常会被问的一个问题是“在浏览器的地址栏输入url按下回车后发生了什么
为了清楚这个问题,看上面这本书,足够了。如果你想入门计算机网络,这本书也是必读的。评价非常高。
关于这个问题,也可以看下面这篇文章:[浏览器输入 URL 后发生了什么?](https://zhuanlan.zhihu.com/p/43369093)
### 2、JS相关书籍
- 《[你不知道的JavaScript](https://book.douban.com/subject/26351021/)》
上面这套书有上、中、下三本,你都可以读一读。如果时间不够,那就先读第一本。
- 《[JavaScript语言精髓与编程实践](https://book.douban.com/subject/35085910/)》
周爱民的书,谁能不爱?这本书不但完整解析了 JavaScript 语言,还逐一剖析了相关特性在多个开源项目中的编程实践与应用。
- 《[JavaScript高级程序设计](https://book.douban.com/subject/35175321/)》
红宝书,人人都知道。
- 《[JavaScript 悟道](https://book.douban.com/subject/35469273/)》
本书首先介绍JavaScript的基本知识命名、数值、布尔值和字符串等并展示了其缺陷和局限性但随后展示了如何解决这些问题接着继续研究数据结构和函数探索底层机制并使用高阶函数来实现面向对象编程。
本书的翻译是@死月,
### 3、CSS相关书籍
- 《[CSS世界](https://book.douban.com/subject/27615777/)》
关于 CSS 的书籍,首先推荐这本书,我身边的大佬们都说这本书好。虽然我不是大牛,但我也觉得这本书很好。
如果 js 熟练,说明你是有技术深度的前端;如果 css 熟练,说明你是有经验的前端。
- 《[CSS新世界](https://book.douban.com/subject/35539710/)》
这是一本关于CSS的进阶读物专门讲CSS3及其之后版本的新特性。
- 《[精通 CSS](https://book.douban.com/subject/30450258/)》
CSS 进阶书籍。
### 4、面试相关书籍
- 《[前端开发核心知识进阶:从夯实基础到突破瓶颈](https://book.douban.com/subject/35218831/)》
JS基础、ES6语法、Vue源码、React源码、前端性能优化等等这些话题都是面试必问。
- 《[了不起的JavaScript工程师从前端到全端高级进阶](https://book.douban.com/subject/34788884/)》
作者@[亚里士朱德](https://yalishizhude.github.io/about/) 是慕课网讲师博客和课程都写的好。这本书讲述了开发者使用JavaScript在各种Web开发场景下所需要掌握的重点知识和概念。
### 5、Vue.js、React 源码书籍
- 《[深入浅出Vue.js](https://book.douban.com/subject/32581281/)》
这本书讲 Vue.js 2.0的实现原理,很不错。 评分不高,不是因为书不好,而是因为你没看懂。
## 推荐的链接
- 前端导航:<https://www.cnblogs.com/qianguyihao/p/10701923.html>
这个导航里列出了很多常见网站、博客、工具等,整体来看比较权威。
学是一方面,也是最主要的方面;但还有一个作用,比如,“这个前端框架你都不知道啊”、“这个前端大牛你都没听说过啊” 。此时,这份清单就能起到作用了。如果能把清单里列出的内容都了解下,逼格也会高很多。
- MDN 官方文档:<https://developer.mozilla.org/zh-CN/docs/Web>
如果你想查看前端的 api 文档,请首先去 MDN上看。很官方很正规。
不要去什么 w3school 、菜鸟教程上看,上面有一堆错误。
## 前端资讯订阅源
国内的很多技术博客,都是比较粗浅的二手知识,真正的大佬,看不上这些东西。
要了解最新的的前端技术趋势、前端资讯,还得看国外的网站。下面这两个前端资讯的网站,极力推荐。它们都可以通过邮件的形式订阅,我认为是前端开发者必须要订阅的:
- Daily JS<https://medium.com/dailyjs> - medium 上的博客。
- JavaScript Weekly<https://javascriptweekly.com/> - 聚合类的技术周刊。
## 我的公众号
想学习**更多技能**?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)