Fork me on GitHub

前端路径整理

发表于 | 更新于: | 分类于 | | 本文总阅读量 次
字数统计: 4.7k | 阅读时长 ≈ 16

工具篇

工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。

1. WebStorm （付费）

不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。

2. Visual Studio Code （免费）

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

3. Sublime Text （付费）

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。。 （最强神器—过去式）

4. 科学上网

每个程序员都应该具备的工具和能力，否则很多事情都无法办到，至于怎么做，你可以自己查阅资料，这里不就不在多说了。而且下面推荐的很多资源都是需要科学上网之后才能访问，所以一定要学会，一定要学会，一定要学会。

5. Google

在使用「Google」之前必须学会科学上网，不然无法访问，学会使用搜索可以帮助我们解决很多问题，一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候百度出来的东西重复性很大，最重要的是垃圾信息很多，在百度找不到的答案，在这里很容易找到，Google 是我的必备搜索。

6. Github

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

HTML 篇

一些准备就绪之后，开始我们的学习之旅，首先我们先从 HTML 开始。

HTML名为「超文本标记语言」，是整个页面的结构基础，它承载了我们的页面内容。

1. 基础

  • w3school 在线教程：内容非常的基础，适合小白学习，对 HTML 有一个入门了解。
  • freeCodeCamp：一个非常好的入门学习网站，采用闯关的模式，就像游戏打怪升级一样，非常的有乐趣，准备自学的小伙伴不妨试试。

2. 进阶

  • MDN HTML：这里的内容质量更好，错误更少，内容也更加的全面。
  • HTML和CSS编码规范：掌握一些代码技巧，写出更好，更高质量的代码。

CSS 篇

HTML 承载了页面的内容，但是有时候会略显单调与「丑陋」，CSS 的作用就是为这些内容加上样式，就像一个美女也要有漂亮的外衣去修饰才会更加漂亮，「人靠衣装马靠鞍」，网页的内容也是需要穿上一件漂亮的外衣去吸引用户。而 CSS 则完成了这个装饰。

1. 基础

2. 进阶

书籍：

《CSS揭秘》：非常推荐的一本 CSS 书籍，可以学到很多鲜为人知的技巧。

在线系列：

  • MDN CSS：和 HTML 都是 MDN 社区文档，质量保障。
  • HTML和CSS编码规范：掌握一些代码技巧，写出更好，更高质量的代码。
  • 大漠老师的CSS系列：大漠老师对CSS有非常深入的认识和丰富的实践经验，《图解CSS3：核心技术与案例实战》的作者。
  • 大漠老师的SASS系列：大漠老师的 sass 文章系列。
  • SASS中文网：成熟、稳定、强大的 CSS 扩展语言解析器，它可以让你使用变量，条件语句等书写 CSS。
  • Stylus官网：同样是 CSS 预编译器，但它省去了一些符号，让 CSS 写起来更加的简洁，清爽。
  • HTML5和CSS3：详解HTML5 和 CSS3。

知识点：

JavaScript 篇

有了 HTML 与 CSS，网页也就有了内容和样式，但是会缺少与用户的互动，所有的内容都静静的躺在那里死气沉沉。就好比一个美女穿着漂亮的衣服在你面前一动不动好像也没有什么吸引力，但如果又唱歌，又跳舞，还向你抛媚眼，那可真就把持不住了。JavaScript 就是给网页添加这样的「行为」。

Javascript 简史 ：可以简单了解下，JavaScript 发展由来。

1. 基础

书籍

  • 《JavaScript权威指南 （第6版）》：俗称「犀牛书」，JS 的经典之作，提升JS技能的必备书籍，我的JS基础知识全都是啃这本书啃下来的，刚开始读时可能有会有些吃力，但是只要坚持下来收获满满。
  • 《JavaScript高级程序设计（第3版）》：俗称「红宝书」，JavaScript 超级畅销书，全书阐述了JavaScript语言实现的各个组成部分，ECMAScript，DOM，BOM，事件，面向对象等等，随时拿出来翻翻，更加深入了学习 JS。

在线系列

除了书籍之外，也有很多优秀的在线教程，可以帮助我们更好的学习。

2. 进阶

TypeScript篇

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

Jquery篇

虽说现在已经是单页面应用时代，有React，Vue 这种强大的框架可以使用，但也不缺乏一些老的项目需要维护，而且在学习之初，可以用它做两个简单的应用还是不错的，可以相对了解下基本用法，它可以让你更好，更方便的操作DOM。但不建议再深度学习。

Ajax篇

掌握了的HTML、CSS、JavaScript时，这时候可以尝试自己做一些项目了，而项目中肯定会有数据的交互，这时候就是 Ajax 的用武之地了。

NodeJS与模块化

NodeJs 的出现让前端发展进入了一个新的领域，并且滋生出专业的 Node 工程师，不仅如此 Node 在前端模块化，工程化起到很重要的作用，所以了解是必须的，如果感兴趣的可以深入学习，可以向全栈工程师发展。

框架篇

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

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

1. Angular

  • Angular：Angular官方社区。
  • Angular开发者：大漠穷秋老师维护的站点，Angular中国布道者。
  • NG-ZORRO：Angular UI 组件库，阿里巴巴出品。

2. Vue

3. React

React我了解不多，所以就没什么好推荐的了，大家可自行学习。

视频课程

很多时候，我们在学习的时候有些知识点很难理解或者自己一时间想不通，如果有大牛能够询问或者带着我们再好不过了，而那些视频学习资源是你最好的选择，能够录制视频的都是一些大厂的资深大佬，技术造诣也足够深，我就推荐几个我经常看的视频网站，供你们选择。

图形可视化

随着日益增长的数据，如何利用高效的利用数据，是每个企业都考虑的问题，而人的眼睛看到的东西要胜过阅读的问题，俗话说「一图胜千言」就是这个道理，所以数据的可视化就会格外的重要，以下都是我常看的一些技术，书籍，和关注的可视化开源库。

工程化与版本控制篇

1. Git

版本控制工具，很多新手往往把 git 与 github 傻傻分不清楚，二者是不同的东西，一定要去区分清楚。

2. Gulp

自动化构建工具，项目打包部署前的压缩合并，节省时间，提高开发效率。

3. Webpack

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

4. Babel

JavaScript代码编译器，可以让ES6及以上语法转换成浏览器支持的语法，一般会在框架的脚手架中自行配置。

  • Babel：官网教程。

5. 代码质量

  • ESLint：javascript代码检测工具帮助我们写出更规范的代码。

浏览器与HTTP

性能优化

SEO

博客系列

1. 个人

现在是一个信息爆炸的时代，网上有很多优秀的博客文章，每个人的精力都是有限的，不可能关注到所有的博客，每个人关注点可能不太一样，所以关注的个人博客也会不同，这些推荐几个我比较常看的几个高质量博客。而且是持续更新的。

  • 阮一峰的个人网站：阮一峰老师江湖地位不必多说，博客不止有技术，现在阿里任职。
  • 廖雪峰的官方网站：廖雪峰老师写过很多优秀的系列教程，值得去学习。
  • 张鑫旭：专注前端技术的大牛之一，出版《css世界》一书。
  • W3cplus：大漠老师在手淘任职，CSS，HTML 有着丰富的经验。
  • 前端入门和进阶学习笔记：从零开始自学，然后进入京东，记录作者一路走来的学习笔记。

2. 团队

优质社区

  • 掘金：一个帮助开发者成长的社区，很多高质量文章，我每天没事都会刷刷文章学学技术，自己的文章也会同步上去。
  • InfoQ：技术人员必须知道的社区站点。
  • CSDN：中国最大的技术交流社区。
  • 博客园：一个专注技术的社区。
  • v2ex：V2EX 是一个关于分享和探索的地方，程序员聚集地。
  • 前端乱炖
  • Medium：国外的优质社区，需要科学上网。
  • 前端九部 - 入门者手册2019：支付宝前端团队写的《Web 前端开发入门手册》。

项目资源

常用工具