前言现在是信息时代。经过web1.0时代、web2.0时代和现在的移动互联网时代，信息获取越来越高效，坐着不动就会有大量的新闻、博客、信息推荐给你。作为一个可靠的程序员，你不可避免地要查阅大量的文章、视频和书籍来填充你的知识并不断学习。但是现在网络上堆积了很多信息，对你来说意味着什么？如何合理筛选和整理获取的信息，又如何知道自己还缺少哪些信息？至此，应该提出本文的主题——知识体系。其实无论它针对哪个领域的知识，都有一个完整的、成型的知识体系和标准作为支撑，比如数学、建筑、医学、机械等等，当然也包括计算机编程，其中肯定包括前端发展。有了完整的知识体系，再面对大量的信息获取，你就会知道每条信息中提到的知识点属于知识体系的哪一部分。同时，你也会知道哪些部分你掌握得好，哪些部分你没掌握，哪些部分你没听过。如何构建知识体系学习新知识并不难，真正的困难在于你不知道还需要学习什么。你可能学过htmlcssjsjQuerywebpackvueReactnodejsgitlinux设计模式算法...等前端开发需要大量的知识和技术，但是它们应该如何连接起来，才能形成什么样的知识网络。而且，在这个知识网络中，还有什么是你没有考虑过或没有学到的。这确实是一个需要你积极思考并找到正确方法的问题。跟各位读者分享一下我的分析方法。不过需要说明的是，这道题的分析方法没有标准答案，所以我的方法不一定是最正确的，仅供参考。基础知识也许你听过“程序=算法+数据结构”这句话，那么这句话针对的是怎样的开发者呢？是用js写的，还是用java写的，还是用C++写的？答案是给所有程序员的，不管你是前端、客户端还是服务端，都适用。那么这些适用于所有程序员的东西就叫做基础知识。一般来说，基础知识分为：算法、数据结构、面向对象思想和设计模式。我觉得这部分是前端程序员最容易忽略的部分，因为只有复杂的逻辑处理才能让这些知识有用。从最初的前端时代到jQuery时代，受网速、浏览器、JS引擎的限制，JS基本上就是一个验证表单、操作DOM、修改样式的脚本，没有任何复杂的业务逻辑。但现在不一样了。网速越来越快，浏览器和JS引擎足够强大，vueReact等框架流行，使得前端JS的业务逻辑越来越重要。这些基本知识必须掌握。最后，别忘了nodejs已经流行了很多年，它可以让js运行在服务器上，做的事情和phpjava一样。最后一件事要补充。其实编程基础不止这些，比如编码、编译原理、计算机组成、网络等，都是基础，但是和前端开发没有直接关系（或者说和我们日常关系不大发展），所以我不会在这里提及它们。我已经追根究底了。感兴趣的读者可以继续自行补充。为什么标准使用var来定义变量？为什么要使用document.getElementById获取元素对象？你可能会回答：“这就是浏览器所做的。”那么继续追问，为什么浏览器会做出这样的规定呢？为什么这么多浏览器以这种方式达成一致？——答案是有一些统一的标准定义了它们，浏览器必须按照这些标准来解析JSHTMLCSS等语法。如果浏览器不按照这些标准解析怎么办？——请参考臭名昭著、现在没落的IE浏览器。第一个标准是ECMA-262标准。JS和ES6的基本词法和语法由该标准制定和实施。忽略细节，比较重要的是：prototype和prototypechainscopeandclosureasynchronousES6新语法（如模块化，Class，Promise等）第二个标准是W3C标准，除了JS和ES6、其他常用功能由该标准制定，主要包括：HTMLCSSJavascriptWebAPI（如DOM操作、BOM操作、事件绑定、ajax等）HTTP协议存储websocketJSON和XML2D3D标准指导开发者如何编写代码等方面指示浏览器如何运行代码。即代码和浏览器通过这个标准紧密相连。开发环境开发环境是比较多变和复杂的，也是最难归纳的部分。每个公司或团队使用的工具和环境可能不同。但是根据我们日常开发的基本顺序，可以归纳为：代码版本管理，比如gitIDE，脚手架比如sublimevscodevim，比如vue-cli构建工具，比如webpack本地服务和mocks，比如如webpack-dev-serverdebug，比如使用chrome开发者工具，抓包，代理等部署测试，每个公司都不一样。基本原理是将代码压缩后上传到测试机。单元测试有时需要操作测试机。运行环境需要掌握linux的基本命令如果暂时不考虑nodejs，前端代码的运行环境主要分为两种。首先是标准的浏览器环境，运行在我们常见的浏览器中。这里需要考虑的问题是：加载和渲染过程，比如面试中经常问到的“请描述一下从输入url到渲染页面的整个过程”性能优化，如何加载更快，如何解析和渲染更快更安全的问题，常见的有XSS和CSRF浏览器兼容性响应式布局二是在非标准浏览器环境下运行，即特定app的webview。比如页面在微信中展示，或者混合形式展示。在这种情况下，除了考虑上述问题外，还应该考虑：如何发布和更新混合体，虽然这是前端、服务器端和客户端都要解决的问题。js-bridge的使用和原理，比如微信总结了以上四部分JSSDK的使用框架和库，你会发现少了一个很重要的内容，就是框架和类库，比如vueReactjQuery下划线等等。这也是我在总结过程中遇到的问题。如果您不仔细考虑，您可以轻松地将“框架和库”列为第五项，与前四项并列，但我不同意。下面我们就以列举的四个例子来详细了解一下：vue的主要功能是MVVM和组件化。MVVM是MVC的一种变体或微创新，而MVC是设计模式的结合，所以MVVM肯定和设计有关。组件化和面向对象基本是同一个思想，都是面向对象思想在前端视图层应用的体现，所以组件化和面向对象是相关的。最后，vue框架其实是设计和面向对象的具体体现，应该是基础知识的一部分。包括它的依赖项目，比如vuexvue-router等等。React和Vue一样，只是更纯组件化，没有MVVM，这里不再赘述。jQuery的功能非常丰富，其API的标题可以填满一页。我们最常用的是DOM操作和ajax。通过上面的分析，我们知道这两个都是JSWebAPI的内容。所以jQuery应该属于这部分的JSWebAPI。underscore或者lodash是一个基础函数库，只涉及到最基础的语法，所以应该属于ECMA标准的一个扩展。最后，再想一想，如果真的把“框架和库”作为第五项拿出来，前端开发有那么多框架和库可用，为什么要把这部分炸掉？——这显然不是一个合理的设计。任何框架和库的出现，都是为了满足我们日常开发的效率和设计。说白了，就是对现有方法的改进和补充（因为基础和标准是不会不断变化的），所以上面的前四项，肯定会找到各自的位置。每个人都坐在同一个号码上，而不是聚在一起。这是合理的设计。知识体系的脑图经过以上分析，现在画出最终的脑图，做一个总结。不过这张图的粒度还是太粗了，读者可以继续细化完善，再欢迎分享给大家。我是一个从事了五年的前端工程师，整理了一份最全的前端学习资料，从最基础的HTML+CSS+JS到HTML5项目实战学习资料，还有我送给每一位前端小伙伴，想要学习web前端，或者转行，或者大学生，工作中想要提升能力的，正在学习的朋友，可以私聊我有需要的，这是我的前端开发qun，【60三】【九八五】【九九三】，直接在群里下载，学习web前端有什么问题可以问我（学习方法，学习效率，如何找到工作），与其说本文提供了一个前端知识体系，不如说是提供了一种分析和完善知识体系的方法。真心希望看到读者能够不断完善和总结自己的知识体系。其实前端涉及到的知识还有很多没有体现在图中，比如server端的nodejs，PWARN结合client端等等，我还在思考如何把这些融入进去以更合理的方式进入系统。
