2020Web前端的学习之路，以及反省自身的不足之处。

一、基础技术

前端的三大基础毫无疑问就是HTML、CSS和JS。我称之为前端的骨、肉和魂。

先说“骨”——HTML。HTML,翻译过来就是超文本标记语言，而不是江湖上的HOW TO ML。方向不能搞错了，我们整的东西可是老少咸宜的。HTML学习最重要的标签的学习，div、h1-h6、p、ul-li、strong、图片、字体等，什么内容用什么框.

推荐学习方法：

网站《w3cschool》https://www.w3school.com.cn/

书籍《HTML5与CSS 3权威指南（上下册）》

再说“肉”——CSS。CSS定义了HTML标签的显示外观，气质。主要掌握浮动，宽高设置、显示属性等

推荐学习方法：

书籍《CSS权威指南（第三版）》

反省：对于由于工作中css的权重并没那么高，这本书还没有阅读。

最后“魂”——Javascript。这是运行在浏览器上的脚本，但是现在javascript已经远远不是当年的那个js了，尤其Ecmascript6标准出来后，nodeJS 横空出世，JS暴露出一统天下的野心，JS让网页变得灵活，其实现的每一个明里暗里的交互，其实是为了触及您的灵魂，这也是其成为魂的原因。

推荐学习方法：

书籍《JavaScript DOM编程艺术 （第2版）》

书籍《JavaScript语言精粹》

书籍《JavaScript权威指南（第6版）》 犀牛书

书籍《JavaScript设计模式》

博客《廖雪峰JavaScript教程》廖雪峰https://www.liaoxuefeng.com/wiki/1022910821149312

反省：设计模式和权威指南的书籍厚度让我暂时还没有开始拜读

而现在，CSS3和HTML5的发展，又将web推向下一个时代，一个更为丰富多彩的时代。

二、环境基础

设备、浏览器以及运行环境

必须指出的是，html CSS JS都是运行在浏览器的，是由浏览器负责编译和呈现的。所以必须了解浏览器的工作原理。但是浏览器千千万万，也不是每个都要去解剖，主要的有Chrome, Firefox, IE，Safari,Opera,国内的主浏浏览器基本是基于chrome内核开发，做了一些更为接地气的功能，了解下就可以了，主要有QQ浏览器，UC，百度浏览器，360浏览器，搜狗浏览器，猎豹浏览器等。这里我主要使用谷歌浏览器和火狐浏览器。

目前很多项目都是使用Node.js 与前后端分离，通过webpack进行项目打包，npm安装依赖

反省：对于webpack，npm，node.js的使用也仅仅只了解到一些简单的脚手架工具的使用，这里在今后的学习计划中要多花时间。

三、 计算机基础

计算机网络，http协议。既然是web必不可少需要知道计算机网络的知识，这对于网页的加载和速度优化有很大的帮助，并且，我们做的不是静态的页面，而是动态的，所以必然涉及到与后台之间的数据的传输和存储，这个是要掌握的。

必须懂：Ajax，JSON，必须会的工具：postman用于测试接口

推荐学习方法：

博客《阮一峰Ajax详解》https://wangdoc.com/javascript/bom/xmlhttprequest.html

反省：工作中的接口请求的封装由公司前端大佬完成，导致自己的一知半解，能够看懂，从零开始封装不一定那么顺利

四、流行框架

随着日益复杂的用户需求，与系统的复杂度上升，传统的开发模式日渐的很难满足，此时的三大框架孕育而生，让开发者更加高效，可复用，把关注点都放在数据层的操作，免去那些繁琐而又重复的视图操作。

现在框架的能力已经是前端开发人员必备的技能之一也是趋势，三大框架的「最终目的」都是一致的，我认为开发者不必纠结于到底应该选择哪一个学习，可以选择其中的两个是最好的。对于刚入门的人来说，建议选择 Vue 入手，比较简单，灵活。

推荐学习方法：

网站《vue.js官网》https://cn.vuejs.org/

博客《使用VUE全家桶制作博客网站》https://www.cnblogs.com/xiaohuochai/p/9228543.html

反省：公司主要使用的框架就是VUE，另外两大框架React和Angular暂时还没有接触

五、工程化与版本控制

学会使用git可以有效、高速地处理从很小到非常大的项目版本管理。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

ESLint 规范我们的代码习惯，javascript代码检测工具帮助我们写出更规范的代码。

推荐学习方法：

博客《廖雪峰git教程》https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

网站《Webpack中文文档》https://www.webpackjs.com/

博客《webpack原理》https://juejin.im/entry/5b0e3eba5188251534379615

网站《ESLint官网》https://eslint.bootcss.com/

反省：webpack打包工具的原理需要认真学习，对于代码的规范的重视程度不够

六、锦上添花

 Visual Studio Code

微软开源免费产品，受到非常多技术人员的喜爱，基本上成为前端开发者的必备编辑器，强大的插件扩展，可以灵活的打造自己喜欢的风格。给你们送上常用插件列表拿走不谢。

Github

全球最大的「同性」开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧，应该避免重复造轮子，这里能够找到你需要的工具或代码。

Markdown

Markdown 轻量级标记语言，简洁的语法，让作者专注内容而非复杂的格式要求，我认为人人都应该掌握，特别是经常写博客的人。想想你在用 world 时的场景，每次写完文章之后，不得不话费很多时间进行格式的排版，使用它你就可以避免这些烦恼。

TypeScript

ES6 的超集扩展，严格的数据类型，带来更好的维护，适合大型项目的开发工作，有人说它是未来的发展趋势，你说要不要了解？

UI框架

移动端框架推荐使用vant 和 vux，电脑端框架推荐使用element-ui