web前端知识体系梳理

前言

如今是信息时代，通过 web1.0 时期、web2.0 时期到如今的移动互联网时期，信息获取愈来愈高效，坐着不动就会有大量的新闻、博客、资讯向你推荐而来。做为一名靠谱的程序员，你免不了要查阅大量的文章、视频和书籍来充斥你的知识量，不断学习。可是如今网上大量的信息堆积起来，对于你来讲意味着什么？你如何去合理的筛选、梳理这些得到的信息，又如何去知道本身如今还缺什么信息？

到这里就应该提出本文的主题 —— 知识体系 。其实不管针对哪一个知识领域，它都是有一套完整的、成型的知识体系和标准做为支撑的，例如数学、建筑、医学、机械等等，固然包括计算机编程，其中确定包括前端开发。

有了完善的知识体系，再来面对大量的信息获取，你就知道每一个信息所说的知识点是属于知识体系中的哪一个部分。同时，你也会很清楚本身哪些部分掌握的好，哪些部分掌握的很差，甚至哪些部分本身压根都没据说过。

如何构建知识体系

学习新的知识并不难，真正难的是你不知道本身如今还有哪些须要去学。

你也许学过 html css js jQuery webpack vue React nodejs git linux 设计模式 算法 …… 等各类前端开发须要的不少知识和技术，可是他们之间到底应该怎么联系起来，能造成怎样的知识网络。以及，在这个知识网络中，还有哪些是你没有考虑到或者学会的。这确实是一个问题，须要你去主动思考，并且还要找到正确的方法。

下面向各位读者分享一下个人分析方法。不过须要说明，这个问题的分析方法没有标准答案，所以个人方法也不见得是最正确的，所以仅供参考。

基础知识

也许你听过 程序 = 算法 + 数据结构 这句话，那么这句话是针对哪一种开发人员说的呢？是写 js 的、写 java 的仍是写 C++ ？答案是针对全部的程序员，不管你是前端、客户端、server 端，都适用。那么这些针对全部程序员都适用的东西，就称之为基础知识。

通常来讲基础知识分为：

• 算法
• 数据结构
• 面向对象思想
• 设计模式

这部分我以为是前端程序员最容易忽略的，由于只有复杂的逻辑处理才能让这些知识有用武之地。从前端的最初时代到 jQuery 时代，受限于网速、浏览器、JS 引擎这些限制，JS 基本就是一个脚本，验证一下表单、操做一下 DOM、修改一下样式 ，没有什么复杂的业务逻辑。

可是如今不同了，网速愈来愈快、浏览器和 JS 引擎足够强大，并且 vue React 等框架流行开来，使得前端 JS 的业务逻辑愈来愈大，这些基础知识必须掌握。最后别忘了，nodejs 都盛行多年了，这可以让 JS 运行到 server 了，和 php java 等干同样的事情。

最后补充一句。其实编程基础也不止这几个，像编码、编译原理、计算机组成、网络等这些都是基础，可是并不会和前端开发直接相关（或者和咱们平常开发相关性不大），这里就再也不深究了。有兴趣的读者，能够本身继续补充。

标准

为什么要用 var 定义变量？为什么使用 document.getElementById 能够获取元素对象？你也许会回答：“浏览器就这么规定的”。那么继续追问，浏览器为什么这么规定？并且恰恰那么多款浏览器都是这样统一约定好的？—— 答案是有一些统一的标准限定着它们，浏览器必须按照这些标准来解析 JS HTML CSS 等语法。

若是浏览器不按照这些标准来解析怎么办？—— 请参见以前臭名昭著、如今没落的 IE 浏览器

第一个标准是 ECMA-262 标准 ，JS 和 ES6 的基本词法、语法都是这个标准来制定且推行的。忽略细节，其中比较重要的有：

• 原型和原型链
• 做用域和闭包
• 异步
• ES6 的新增语法（如模块化、Class、Promise 等）

第二个标准是 W3C 标准 ，除了 JS 和 ES6 基础语法，其余经常使用的功能都是这个标准制定的，主要的包括：

• HTML
• CSS
• Javascript Web API （例如 DOM 操做、BOM 操做、事件绑定、ajax 等）
• HTTP 协议
• 存储
• websocket
• JSON 和 XML
• 2D 3D

标准一方面指导开发人员如何写代码，一方面指导浏览器如何运行代码。即，代码和浏览器之间，就靠这个标准来紧密相连。

开发环境

开发环境是比较多变并且复杂的，也是最很差总结的一部分，每一个公司或者团队使用的工具和环境可能都不同。可是根据咱们平常开发的基本顺序，能够归纳为如下几点：

• 代码版本管理，如 git
• IDE ，如 sublime vscode vim 等
• 脚手架，如 vue-cli
• 构建工具，如 webpack
• 本地服务和 mock ，如 webpack-dev-server
• debug ，如用到 chrome 开发者工具、抓包、代理等
• 部署提测，各个公司都不同，基本原理都是将代码压缩而后上传到测试机
• 单元测试
• 有时须要操做测试机，须要掌握 linux 基础命令

运行环境

暂时先不考虑 nodejs 的话，前端代码的运行环境主要分为两种。第一种是标准的浏览器环境，即运行在咱们常见的浏览器中。此处须要考虑的问题是：

• 加载和渲染过程，如面试中常被问的“请描述从输入 url 到呈现出页面的整个过程”
• 性能优化，如何更快的加载，如何更快的解析和渲染
• 安全问题，常见的有 XSS 和 CSRF
• 浏览器兼容性
• 响应式布局

第二种是运行在非标准的浏览器环境，即一个特定 app 的 webview 中。例如页面在微信中展现，或者 hybrid 形式。这种状况除了要考虑上述的几个问题以外，还应该再考虑：

• hybrid 如何发布和更新，虽然这是一个前端、server 端和客户端共同解决的问题
• js-bridge 的使用和原理，例如微信 JSSDK 的使用

框架和库

以上四个部分总结完以后，你会发现遗漏了一块很重要的内容，就是框架和类库，例如 vue React jQuery underscore 等。这也是我本身在总结过程当中遇到的一个问题。

若是你不仔细思考的话，你会很容易将“框架和库”列为第五项，和前四项并列，可是我不敢苟同。让咱们来仔细分析如下就知道了，就拿列出的这四个例子：

• vue 最主要的功能就是 MVVM 和组件化。 MVVM 是 MVC 的一种变异或者微创新，MVC 又是设计模式的一种组合形式，所以 MVVM 确定是和设计相关的。组件化和面向对象基本都是同一个思想，是面向对象思想在前端 view 层应用的一种体现，所以组件化是和面向对象相关的。最后，vue 这个框架，实际上是设计、面向对象的一种具体体现，它应该归属于基础知识的一部分。包括它的依附项目，如 vuex vue-router 等。
• React 和 vue 同理，只不过是更加纯粹的组件化，没有 MVVM ，这里再也不赘述。
• jQuery 功能丰富，其 API 光标题就能沾满一页。咱们最经常使用的就是 DOM 操做和 ajax
  ，从上面分析得知这二者都是 JS Web API 的内容。所以 jQuery 应该属于 JS Web API 这部分。
• underscore 或者 lodash ，就是一个基础函数库，它只和最基础的语法有关，所以它应该属于 ECMA 标准的一个扩充。

最后再想一下，若是真的把“框架和库”做为第五项单独拿出来，前端开发中可用的框架和库那么多，不得把这部分给撑爆了？—— 这样明显不是一个合理的设计。任何框架和库的出现，都是为了知足咱们平常开发的效率和设计，说白了都是对已有方式的一种改进和补充（由于基础和标准不常变），所以上文中的前四项，确定能找到它们各自的位置。

你们都对号入座，而不是扎堆在一块儿。这才是合理的设计。

知识体系脑图

通过上文的分析，现画出一个最终的脑图，作一个汇总。不过这个图的粒度仍是太粗，读者能够继续细化、完善，而后欢迎共享给你们。

总结

与其说本文提供了一个前端知识体系，不如说提供了一个分析和完善知识体系的方法，很但愿能看到各位读者能继续完善并总结出本身的知识体系。

其实还有不少前端涉及的知识没有体现到该图中，如 server 端的 nodejs ，和客户端结合的 PWA RN 等，这些我还在思考如何以更加合理的方式归入到体系中。