专治前端焦虑的学习方案.docx

专治前端焦虑的学习方案React并不一定适用于所有的场景，但是我觉得它是所谓最安全的，学了不吃亏。React还会引导你去了解一些像组件、应用状态与无状态函数等等现代Web应用框架的概念。最后，React的整个生态圈非常繁荣，你可以从Github上有关React的项目中找到很多可用的组件，或者在Stack Overflow上找到很多关于React的答疑解惑。作者：王下邀月熊_Chevalier来源：/a/1190000007362890segmentfault|2016-11-07 13:41javascript:favorBox(open);?收藏 javascript:;?分享 最近我也读了Jose Aguinaga的博文2016年里做前端是怎样一种体验。这篇博客引发了广泛的关注与讨论，无论是在Hacker News还是Reddit还是Medium上，都有很多人参与到了它的讨论中。我也是很早之前就感觉到了目前JavaScript生态圈中的群雄逐鹿，并且我还特地对目前JavaScript库流行现状进行了调查，希望能够在异彩纷呈的各式各样的库中寻找到真正的为大众所接受的。不过今天我希望能够更进一步，不仅仅再抱怨现状，而是从我个人的角度来给出一个逐步深入学习JavaScript生态圈的方案。(如果你尚对HTML/CSS/JavaScript并不了解，那么可以阅读前端攻略：从路人甲到英雄无敌)。而在文本中我们会涉及以下几个方面:一个现代的JavaScript Web应用会包含哪些部分为什么不推荐使用jQuery?为什么React是个不错的选择为什么并不需要你首先学透JavaScript?如何学习ES6语法缘何与如何学习Redux?GraphQL到底解决了什么问题?下一步又会走向何方BackgroundJavaScript vs JavaScript在正式开始之前，我们先要搞清楚我所要说的和你目前理解的是不是同一个东西。如果你在Google中搜索‘Learn JavaScript’或者‘JavaScript study plan’，你能得到一坨一坨的资料与教程指导你如何学习。不过实际上在我们的真实项目中，我们只会用到一些相对简单的语法。换言之，可能你在学习Web应用编写中所需要的80%的知识点都包含在了任何一本JavaScript书籍的前几章。另一个角度来说，真正麻烦的点在于如何掌握整个JavaScript生态圈，这里包含了数不尽的框架与库。不过我相信本文可以给你一点启示。Building Blocks Of JavaScript Apps/a/1190000006728971State Of JavaScript：前端框架现状调查为了便于理解现代JavaScript为啥看起来如何复杂，我们首先要明白其工作原理。我们首先来看下2008年左右流行的所谓传统Web应用的架构:1.服务端从数据库中获取数据。2.服务端读取这些数据然后渲染到HTML中。3.HTML文件被发送到浏览器，浏览器将HTML转化为DOM树并且展示出来。现在很多的应用会在客户端使用JavaScript来保证应用的可交互性，不过本质上浏览器还是从收到HTML文件开始。下面我们再比较下2016年流行的所谓现代Web应用，典型的就是所谓的单页应用:注意到区别了吗?与传统的Web应用相比，现在的服务端更多的承担起是提供数据的功能，而渲染HTML文件这一步交由客户端进行处理。这一个根本性的变化也会导致很多或好或坏的结果，好的一方面呢:对于某一块内容，仅仅发送数据会比发送整个HTML文件快很多以单页应用为例，客户端可以刷新局部数据而不需要刷新整个浏览器窗口坏的方面:由于现在数据的加载与渲染放在了客户端，初始加载与渲染会耗费更长的时间现在需要在客户端提供一个存储与管理数据的地方，也就是我们目前所熟悉的状态管理工具恶心的地方:随着客户端应用逻辑与交互的日渐复杂，你需要掌握像服务端技术栈一样复杂的前端技术栈The Client-Server Spectrum实际上很多才接触现代前端开发技术栈的同学，特别是才从后端转前端的同学都会有个疑问，既然这么麻烦为何还要进行转变?举个例子，如果用户希望得到2+2的结果，肯定不需要我们将这个计算发送到服务端然后等待结果，浏览器完全能够支持这种简单的计算。换言之，如果你是打算构建一个纯粹的静态内容站，譬如博客这样的，那么在服务端直接生成最终的HTML文件是个不错的选择。不过实际上很多Web应用中我们并不能很好地界定这个分割点，并且整个光谱并不是连续的，你并不能先构建一个纯粹的服务端应用然后慢慢地向客户端迁移。当到达某个分割点时，你不得不停止这种迁移过程而去重构大量的代码，或者你就会面对一个庞杂无序难以维护的垃圾代码库。这一点与不建议使用jQuery不谋而