截图的这个梗只要是了解点前端开发的应该都不陌生。

这一切的背后是良心的泯灭，还是道德的沦丧，还是人性的扭曲？

让我们来谈谈前端的学习之路。

起因

先找下前端为何开始变得玩法倍出的？

首先排除盘古时代神器 jQuery

不得不说它“老人家”老当益壮，面试当中有不少同学依然忘不了它

排除的原因很简单，它能玩的花样依然还仅仅停留在一个套路（dom）里玩不出花来

真正让前端赋予更多开火权的罪人应该属 NodeJS，原因如下：

  • 让前端能接触并从后端那边分得一些任务份额，如数据库操作、API 开发、甚至服务脚本等，天生异步特性让不少大神也沉迷造轮之乐
  • 附属品 NPM 为 JS 库开启了疯狂模式，2018 年直接升到了最欢迎语言，NPM 的作用非常明显，一时间 Star 高的就似乎意味着你得学学 :)
  • 再衍生的编译打包工具 Webpack 等混搭着超集语言让 CSS 跟 JS 的写法变得魔幻起来，你要是不熟悉它们，那么抱歉，起码你跟前端架构师无缘了

是万恶之源，所以如果你还想在前端有所建树，这个坎多少还得自己摸索一下。

从入门到放弃

大家应该对前端知识图谱有些了解，我们再回顾下

看完这图应该就差不多能劝退一波初学者

但学习这个东西对每个人都是公平的，既然前端可学的那么多，各个精通很困难，那么我们就可以选择几个精通的，来曲线救国

初级必学 HTML、CSS、JS 基础

这三剑客是逃不掉的知识点请务必认真对待

可以学习的站点只要能系统的看一遍手动撸一下基本都能学会

这里就放弃的，这个职业也跟你无缘了

资料站：

  • W3Schools 博主的启蒙老师
  • MDN 撸一遍不放弃基本就可以干活了

锻炼手法：

  • 通过习得的 HTML、CSS 去模仿各大门户网站做一个首页，这个过程无他唯手熟尔
  • JS 尝试写一些页面特效（针对DOM操作）以及字符串或者常用的一些处理函数（这里不推荐用较老的语法去实现类Class，虽然 JS 语言是面向对象，但函数式编程才是未来趋势，允许我做个神棍）

学会筛选

如果你已经有了三剑客的基础，这时候其他的东西其实已经属于万变不离其中了

不管是 ES6,7,8,.. 还是 Less,Stylus,Sass,..

大多数还是会回归到本来的样子

因此后面的学习要学会自我辩识，是自己的项目哪个顺手，更好用就学哪个，不需要跟风

另外一种情况是公司需要，那么只能学了（在金钱的淫威下）

框架不是万能

很多前端在学会几个框架后就有点飘，包括我自己，其实这是阻碍你进一步提高的绊脚石

  • 通过框架你觉得自己能做的事变多了，但这是框架的功劳，如果你不知道一些底层的知识，框架使用中遇到的坑就不那么容易解除
  • 过轻过重的框架都有隐患，过重缺失了灵活性，过轻缺失了统一风格规范严谨性
  • 组件无法方便的共享，排除不需要自生运行核心库的框架，绝大部分都有自己的一套规范

即便如此，但目前就职来说你依然需要掌握一到两个主流框架，并且要关注一些理念能更符合未来规范的框架。

这里我不做推荐，因为框架太多主流的大家都懂：）

打磨兵器

恭喜你，如果以上内容你都没有放弃的话，其实你已经具备优秀的前端自学能力

这里我要特别地推荐仔细研究打包工具的配置，并且能自己手动配置出目前主流框架的 Demo

这里有区别：

  • App 工程打包 推荐 webpack
  • Lib 工具库打包 推荐 rollup

这里我为什么不推荐 gulp ?

因为 Gulp 能做的不用 Gulp 也能办到

这里虽然有点争议，包括之前同事也有过不同意见，但这里我保留自己的观点 NPM script几乎可代替Gulp，并且不推荐各位新学前端的去学习过多的打包工具

webpack 在经历了 4.0 在优化配置复杂度跟编译速度上有了长足进步，在单入口的项目中它是最好的选择

rollup 则突出在它的快速灵活的编译，即便是多入口 文件也非常容易配置

对于前端来说打包是最后的战场，所以这个工具配置信息的意义以及如何优化是至关重要的（直到某一天浏览器标准可以做到不需要干预结果就可兼容）

缘，妙不可言

在我面试的角度，以上几个如果能满足要求就可以入职

因为其他几个目前火爆的概念，如 PWA 、 Prerender 只要有以上几点的基础学习成本就不会非常大

并且要相信语言大同小异（有 Java 基础的甚至可以立马去撸 Typescript）

所以其他的前端知识学与不学完全看缘分，公司项目要用了，如果恰巧你没学过，这就是(nie)缘。

最后几个自学的忠告：

  • 边看要边写
  • 有问题不要度娘（浪费生命），找 Google 或 StackOverflow
  • 警惕一些收费的教程，你想学的跟别人教的可能两码事，核心竞争力的人家未必想教你
  • 太新的工具慎用，即便 star 很多
  • 一样的东西可以尝试用不同的框架或方法实现，灵感也是妙不可言的
  • 遇到一时难以消化的库或框架，可找类似其他的选择，或许人家的文档更优秀，回头再看之前的难点可能就能迎刃而解
1
最后祝每个前端同学都能快乐学习