一个「学渣」从零开始的Web前端自学之路 (4)

全栈工程师之路-Node.js

框架篇

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

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

MVC,MVP 和 MVVM 的图示:在学习框架之前,你应该了解下MVVM的设计思想。

框架原理:了解一些框架的基本原理。

1. Angular

Angular:Angular官方社区。

Angular开发者:大漠穷秋老师维护的站点,Angular中国布道者。

:Angular UI 组件库,阿里巴巴出品。

2. Vue

Vue:官网,最好的学习资料。

我的Vue进阶之路:厚着脸皮贴出来,自己的一些学习总结,希望对你有所收获,哪怕一点点。

使用vue全家桶制作博客网站

:一个高质量的 Vue UI 组件库。饿了吗前端团队出品。

Vue 项目里戳中你痛点的问题及解决办法(更新):做项目难免回去到坑,这里你或许可以找到答案。

3. React

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

React官网

视频课程

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

网易公开课

慕课网:高质量的在线学习平台。

极客学院。

网易云课堂

腾讯课堂

51CTO学院

图形可视化

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

《HTML5 Canvas核心技术》:学习 Canvas 比较好的一本书籍。

Canvas系列:大漠老师的 Canvas 系列。

Echarts

D3

Highcharts

AntV

Mapv

工程化与版本控制篇 1. Git

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

Git教程:廖雪峰老师的教程。

Learn Git Branching:一种有趣的学习 Git 的方式。

GitHub 漫游指南:作者是一个极客。

git - 简易指南

2. Gulp

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

Gulp 中文网:官方教程。

gulp详细入门教程:非常详细的实现步骤。

3. Webpack

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

Webpack中文文档

webpack原理

Webpack揭秘——走向高阶前端的必经之路

Webpack HMR 原理解析 -webpack 热加载原理探索

4. Babel

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

Babel:官网教程。

5. 代码质量

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

浏览器与HTTP

浏览器的常见知识点:需要我们了解的常见知识。

网站安全:几种常见安全问题。

从URL输入到页面展现到底发生什么?

深入理解浏览器的缓存机制

网页性能管理详解

关于Http协议,你必须要知道的

HTTP 协议 

HTTP2 协议

浏览器同源政策及其规避方法

跨域资源共享 CORS 详解

总结 XSS 与 CSRF 两种跨站攻击

性能优化

性能优化:常见性能优化。

前端性能优化的七大手段

延迟加载(Lazyload)三种实现方式

详解懒加载和预加载

前端优化带来的思考,浅谈前端工程化

推荐几本与Web性能优化有关的书籍

vue + webpack 前端性能优化

SEO

SEO优化实战

博客系列 1. 个人

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

阮一峰的个人网站:阮一峰老师江湖地位不必多说,博客不止有技术,现在阿里任职。

廖雪峰的官方网站:廖雪峰老师写过很多优秀的系列教程,值得去学习。

张鑫旭:专注前端技术的大牛之一,出版《css世界》一书。

W3cplus:大漠老师在手淘任职,CSS,HTML 有着丰富的经验。

前端入门和进阶学习笔记:从零开始自学,然后进入京东,记录作者一路走来的学习笔记。

六小登登:我自己的个人博客,记录自己的一些学习总结,个人成长,认识思维,虽然自己还是个菜鸟,但一直在路上。

2. 团队

奇舞周刊:收集每周前端精华文章。

美团技术团队:分享一些美团的技术路线。

:每周都会分享一些 JavaScript 优质内容。

印记中文周刊:如果你对英文有阅读障碍的话,印记帮你翻译。

凹凸实验室:京东团队。

淘宝前端团队FED:淘宝前端团队,不必多说了。

网易FEG前端团队:网易的前端团队,网易的产品一直都是我最喜欢的。

IMWeb前端博客:腾讯公司前端团队,负责QQ的相关业务你就知道了,都是亿级别。

tutorialzine:高质量教程和文章库。

优质社区

掘金:一个帮助开发者成长的社区,很多高质量文章,我每天没事都会刷刷文章学学技术,自己的文章也会同步上去。

InfoQ:技术人员必须知道的社区站点。

CSDN:中国最大的技术交流社区。

博客园:一个专注技术的社区。

v2ex:V2EX 是一个关于分享和探索的地方,程序员聚集地。

前端乱炖

Medium:国外的优质社区,需要科学上网。

项目资源

前端技能汇总:一个前端工程师需要的技能点和学习资料。

:一个CSS的优质项目,纯 CSS 实现我们项目中很多常用,不常用的样式。

:一些优秀的JavaScript 开源库。

awesome-web-dev-books:前端经典学习书单。

前端 TOP 100:基本涵盖了所有前端在用的开源项目,我觉得收藏这一个就够了。

常用工具

CSS Sprites Generator:雪碧图的在线制作工具。

Lorem Picsum:好用的图片临时占位符。

Md2All:优秀的现在 Markdown 编辑器。

优波设计:优秀的设计导航网站,帮助你更好的寻找资料。

搬书匠:书籍搜索下载。

史莱姆导航:资源搜索。

codePen:在线代码编辑工具。

Iconfont:阿里的字体图标库,支持多种格式,下载图片,在线使用,SVG等等。

Can I use:可以查看浏览器兼容 CSS 情况。

在线工具:工具资源导航。

最后

以上是我这两年多一路走来收藏的一些资料,整理这份资料也花了我好几天的时间,希望能够在自学的道路上帮到你。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjxyw.html