方正的前端学习路线

2024年1月8日 82次阅读 来源: 方正

最近收到不少私信，关于求职的，也有关于如何学习的，学习什么的。

不少朋友有一些编程基础，但是依旧是比较迷茫。在这里，我也说一下我的前端学习路线。

开发前准备

  • 代码编辑器

其实就是开发工具，我只推荐一款，现在大家都在用的好东西！

Visual Studio Code – Code Editing. Redefined：调试、终端、插件一体化！重点是只有不到100M的大小！

  • 代码调试

没错，作为一个前端开发，你必须要跟天天见面的浏览器打交道！众多浏览器里，谷歌浏览器用的人最多！反正大家用，我也用！

Chrome Dev Tools 浅析：成为更高效的开发人员 – 文章 – 伯乐在线：这是一篇教程

  • 代码、版本管理

刚开始编码的时候，我根本不知道还能有这种智能化的「回滚，版本控制」功能的软件！学习了两个月编程才知道github!惭愧啊！

Github 地址：Build software better, together

github 学习：Git远程操作详解 – 阮一峰的网络日志（不解释了，我就是看着这篇文章长大的！）

前端开发最基础

  • HTML入门级教程：HTML 教程，不用全部看完，知道套路基本就可以了！现在的开发模式基本都是「div+css」的模式，因此了解一下其他html5的元素！直接写一个简单网页出来看看吧！
  • CSS入门学习：HTML+CSS基础教程-慕课网，稍微注册一下（或者微信登陆）你就能获得一整套的HTML+CSS基础教程！学完包你之后都不用再看了。
  • Javascript教程：JavaScript教程，什么？你没听说过 @廖雪峰 大大？在这么多Javascript教程里面，我最喜欢廖大的教程！通过讲故事，写小说一般将js的运用娓娓道来！是一个名副其实的好老师！
  • HTTP协议：对于一个前端人员（或者web开发），如果你不知道，不了解HTTP协议，那么它就会在你的开发旅程里，像一个幽灵一般的死鬼缠着你！防火防盗防不懂HTTP协议的人！HTTP 协议入门 – 阮一峰的网络日志，实际上10分钟看一遍你就懂完了。
  • 课外了解：「互联网协议入门（一） – 阮一峰的网络日志」「互联网协议入门（二） – 阮一峰的网络日志」，现在单机的应用非常少了，我们每天都在和网络打交道，茶余饭后花费10-20分钟了解一下互联网协议，会对你以后的编程学习有很大帮助！

进阶

  • HTML 5 教程：别再纠结于什么htmlxxxxx了，直接看html5。新的html5新增了非常多的元素和特性，前端工业标准！
  • CSS 教程：其实css在前面你可能已经了解了，使用css+html5我们可以实现很多的特效。能不用js就不用js!
  • 自适应网页设计（Responsive Web Design）：为什么现在有些网站，鼠标放大浏览器框，缩小浏览器框，他的排版排布会完全不一样？为什么现在有些网站，电脑看的时候是一个样子，手机访问的时候又是一个样子？答案全部在这里！
  • CSS动画简介 – 阮一峰的网络日志：又是他！套用阮大大的开头一句话「现在，我很少写介绍CSS的文章，因为感觉网站开发的关键还是在服务器端。但是，CSS动画除外，它实在太有用了。！！！」
  • 进阶课外学习：「jQuery 教程 | 菜鸟教程」「Bootstrap 教程 | 菜鸟教程」「AJAX 教程」，建于现在大家都往ng/react/vue上面靠，这部分作为新人有兴趣了解即可，我们将重点放在后面的ng/react/vue上！

高手之路

  • 包／模块管理：Node.js，直接安装一个node.js，你就可以拥有了npm包管理工具，基本市面上流行的工具我们都可以使用npm下载到，非常方便！「NPM 使用介绍 | 菜鸟教程」「快速搭建 Node.js 开发环境以及加速 npm」这两篇文章，十几分钟看完，基本上这辈子就不用再看了。
  • 前端自动化：入门Webpack，看这篇就够了。啥？还没听说过Webpack？你在写工程的时候，每次都要<link>啊，什么什么的写一大堆你才能开始做你的工程，太慢啦！大家都在用的Webpack就是帮你做这些事情！花半个小时了解一下Webpack配置，你马上就可以拥有快速开发H5应用的先决条件了！
  • ES6：ECMAScript 6入门，不解释了。历史的js有很多二逼得不行的设计，我们说的js变量作用域就是一个非常丑陋的设计！在ES6中，引入了let关键字，完美的解决了这个问题。当然ES6语法中，有大量的新的语言特性，快点操作起来！（不要搞错，不是叫你学一门新的语言，其实es6还是js）
  • 更好的css排布方式：Less 中文网。我们的css代码越写越乱，没有层级感，特别丑，我们可以使用less去让我们的css更好编排，更好看。Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网,同样sass也是非常成熟的解决方案！不解释，反正几分钟就能上手，随便选一个开始吧！
  • 新的网络请求深入浅出Fetch API – WEB前端 – 伯乐在线：以前我们都用的ajax，现在落伍啦！我们赶紧使用Fetch api来进行网络请求吧！（其实fetch也快落伍了哈哈哈
  • 课外：StuQ技能图谱，这个网站详细的介绍了前端工程师需要掌握的技巧，课外同学可以查看！

前端三大流行框架之一：React

ng/vue我都非常喜欢！有兴趣的人，可以去学习（实际上学好哪一个都好找工作），因为我工作中用到的是React所以我详细说一下学习路线。

React入门

都是阮大大的教程，都比较古老了，但是依旧是值得我们去学习。深入浅出的介绍了React的工作方式，编程方式，以及重新定义React。测试那一篇可能有点难懂，看不懂可以暂时跳过。（毕竟测试是穿秋裤……

React进阶

出学者我只推荐一本react的书，非常好，非常新，用的都是react技术栈的新版本。

  • 《深入浅出React和Redux》(程墨)电子书下载、在线阅读、内容简介、评论 – 京东电子书频道，知乎 @程墨Morgan 大大写的一本关于React和Redux的书籍。我本人非常喜欢程大对软件架构的一些理解。
  • 在书中，你能够很清晰的看到，如何学习整个React技术栈，从React，到Redux，再到React router，单例测试，最后到服务器端的渲染、同构，应有尽有，看完这本书你基本上就能很好的了解整个React技术栈.
  • 你不仅能从书中学习到React，你还能学习到一个高手如何去排布，组织自己的代码。程大用浅显易懂的语言，把现代前端开发架构讲得非常透彻，并且以「限制」一词贯穿始终，大大的点赞。
  • 我没有收钱，我是真的从书中学到很多，因此非常推荐。我本人买了纸质的版本，喜欢的朋友也可以去买。想立即阅读的同学，马上去买电子版本吧！

React进阶高手

  • redux-saga：redux解决了项目结构和数据流的问题，但是异步问题redux解决得非常屎，可以说更恶心了。React社区的人想出了React-thunk的解决方案，但是依旧是让人头疼的一个解决方案。在我们学习ES6以后，我们可以轻松的使用redux-saga去排布我们的异步代码！掌控 redux 异步
  • Material-UI：一个开箱即用的ui库，符合现在的审美设计。让你不再腰酸背疼的去写一套ui库！
  • A UI Design Language：阿里出品的ui库，我个人最喜欢的React ui库之一。风格轻量化，不做作，比起Material-UI油腻的风格，我更喜欢ant design.
  • Introduction · redux-observable：有时候，我们的网络请求会有竞争态，这时候，我们可以使用这款中间件去增强我们的redux，借鉴了rx.js。当你有竞争态的时候，你可以使用这样的一个库去解决！

这一部分内容我要单独说一下。在我们开发的路程中，我们不应该直接去使用这种「高级的特性」，上述我说的都是react后来发展出来的高级特性（库），这些高级库其实是为了解决react的某个问题而存在的。

你必须去写最基本的React应用，你才能够感受，到底React是哪里蛋疼，是哪里需要改进，然后你就能明白为什么会出现这么多的「乱七八糟的库」。

实际上，如果你脑力超凡，你可以「不用任何库，只用React去缔造一个属于你自己的应用」。

一些值得我们关注的前端博客：

  • Home – 廖雪峰的官方网站：哈哈，廖老师幽默十足，看他的前端教程你可以乐呵呵的笑出声来并且学到东西！！
  • Ruan YiFeng’s Personal Website：不解释了，学过React的人，都知道这位神仙，他的教程，文字，深入浅出，无人不晓。重点就是他的博客中还有很多人生道理，开发收集等。（世界流量前6000的网站哦!
  • 张鑫旭的个人主页 ” 张鑫旭-鑫空间-鑫生活：张大大的博客，非常多的奇巧淫技，很多鬼怪的功能，他都有写，是一个非常牛x的博客！
  • 聂微东 – 博客园：同样是一个非常好的博主，博客主要内容包括：HTML5，Python，PHP，Nodejs，MySQL，NoSQL。作者是一位毕业于陆军航空兵学院，获计算机科学与技术学士学位的人。热爱编程，从事JavaScript研发工作。

一些奇巧淫技：

最后的一些总结

  • 以上就是我个人所看过的所有博客和文章，知识点可能会遗漏，但是我只推荐我看过的，我认为精品的！
  • 学习前端难吗？其实不难，很多东西都是上手后，一星期之内就能下地干活搬砖。
  • 自学前端找工作难吗？首先，前端基本都是自学的。其次，找工作这件事情，实际上还是看你的态度。态度体现在：你是否在学习过程中做笔记；你是否认真管理过你的代码（上传github）;你是否认真完成过一个完整的项目。最后说一点，简历用心写，和不同心写，是两个物种。
  • 造项目经验：不是编，而是造。认真学习完以后，一定要做一个用心的应用出来，就算面试简历没用，再不济，你也能从中学到很多！这个十分关键！
  • 面试失败不要心急，总结自己失败的原因，回来再学过。互联网工资高，谁都想来，脚踏实地做人，认真学好每一样东西，这样就能脱颖而出。
  • 最后说一句：切忌编工作经验，那些说编工作经验找到高薪的人，有，但是这种方法终究不是正道，而且聪明的面试官，基本上一眼就能看出你是否有这么久的开发经验。不要把人当傻逼，你把人家当傻逼，人家一样把你当傻逼。

关注 我@方正 ，学习更多编程知识（甚至健身知识….

    原文作者：方正
    原文地址: https://zhuanlan.zhihu.com/p/28886543
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞