本身总结的web前端知识体系大全【欢迎补充】

1. 前言

　　大约在几个月以前，让我看完了《webkit技术内幕》这本书的时候。忽然有了一个想法。

想把整个web前端开发所需要的知识都之中在一个视图中，造成一个完整的web前端知识体系。目的是想要颠覆人们对于前端仅仅有三大块（html、css、js）的认识——作web前端需要的比这三大块要多得多。

　　拖了好几个月了，但是由于最近将要參加的某一个活动。我不得不这两天把这个东西整出来。

说干就干。

上午我就開始在办公室画草图，乱七八糟的在那儿理思路。

　　

　　你们不要惧怕。事实上下文中的这个知识框架要比草图中的好看的多。草图你们权当没看见。

　　好了，废话不扯。如下请尾随我本博客的内容，来看看web前端开发除了htm、css和js以外，还有哪些东西需要你一步一步去掌握。

　　

　　在看内容以前。先看一下这个知识框架的预览图。

图太大很差展现，看不清除，可在此下载清晰版：http://pan.baidu.com/s/1hqIUvUc （内有整个知识体系的图片和xmind文件）

　　

2. 分类

　　所有知识框架，那确定是一个结构型的展示，就是一棵树。web前端的知识点许多，也很散，需要好几层结构来组织这个体系，不然就会显得很乱。那么怎样组织、把谁和谁放在一起？这是真正值得咱们去思考的。你也可以本身来思考一下这个问题。

　　在我总结的这个知识框架中。首先第一层我划分为：理论知识，类库框架。编码开发，执行环境。例如如下图：

　　

　　接下来给你们解释一下：

　　这个图要从下往上看。为什么？——因为如下是上面的基础。

• 首先。咱们需要必定的理论知识，不管是你听别人讲授、本身看书仍是网上淘资料，你都需要必定的理论知识，每一种程序开发。都避免不了。
• 第二。有了这些理论知识咱们就可以编码了——不错——but。没有人能抵挡住第三方框架和类库的诱惑。好比jquery。
• 第三，有了这些理论知识和协助咱们的类库框架，咱们就可真正的编码了。

  你们可能觉得编码开发不就是写代码吗，还有啥？——这里面道道多着呢。

• 最后，开发程序的目的，终因而为了能高效、稳定的执行在对应的环境中。这当中又有哪些事情需要咱们去作？请期待。

3. 理论知识 包含“软知识”和“硬知识”

　　“软知识”和“硬知识”你们可能认为词陌生，事实上我一说你们就能明确。

　　

• 所谓“软”的就是能在各个程序开发中都用到的，算是基本功、内功，好比数据结构、算法、设计模式、面向对象等等；
• 所谓“硬”的就是能直接用于本程序开发的。用C语言你就得学C语言语法，此时学java没用。咱们web前端开发所需要的硬知识事实上都包括在三个标准里面：http标准、W3C标准和ECMAScript标准；

4. 聊一聊web前端开发中的“硬知识”

　　“软知识”的内允许多，也是咱们大学时代学习的重点（没学好是另回事儿。毕业再恶补）。

咱们本次主要讨论的是web前端这一个方向，所以就点到为止，让你们知道这些知识也在知识体系中扮演重要角色。

　　刚才说道。硬知识有三个标准：http标准、W3C标准和ECMAScript标准，那我们就挨个聊聊这三个标准。

4.1 http标准

　　为何作web前端要了解http标准？——因为浏览器要从服务端获取网页，网页也可能将信息再提交给server，这当中都有http的链接。web系统既然和http连接有瓜葛。你就必须去了解它。

　　

　　个人意见是：你没必要去很了解http的具体内容。但是你要了解web前端开发常用的一些http的知识——就是上图中我列出来的那些。固然，我知识列了一个纲。具体内容还得靠你本身去查阅（本文章讲的是知识框架，不会涉及不论什么知识点的具体内容）

　　关于这方面的知识。建议去查阅《图解http》这本书，浅显易懂的讲述了这些内容，我之前也看过。

4.2 W3C标准

　　假设说你仅仅知道web前端的一个标准，预计确定是W3C标准了（据我了解。貌似大部分人真的都仅仅知道这一个标准）。它的内允许多，看看www.w3.org/TR/这个页面。

　　写到这里让我想起了一句话：2/8原则——20%的功能知足80%的需求。我认为这句话用到这里很合适。咱们在平时开发过程当中根本用不到这么多东西。反而。你要把平时用的多的东西搞懂了。

　　下图的这些知识，我想不用再过多解释了，这就是我文章开发说的“三大块”（html、css、js）。现在你要知道。它们仅仅很少是W3C标准的一部分。而W3C标准也仅仅是web前端开发知识体系中的一部分而已。

　　（下图没有全然展开。想看权展开的图，可下载本文一開始提供的附件）

　　

　　关于CSS的基础知识，毛遂自荐一下本身以前的一篇系列博客：《CSS知多少》

4.3 ECMAScript　　

　　简称ES。写全称太麻烦了。

　　有些人可能仅仅知道javascript，而不知道ES——事实上。js是在ES的基础上，为web浏览器作了一部分封装（添加了DOM操做、BOM操做等）。

　　

　　如上图中的这些概念，你们可能平时都在javascript中看到，事实上他们是ES的内容。仅仅只是javascript继承了ES的这些特性，并且javascript用的比較普遍。所以才会在js中讨论的多一些。

　　仍是那个“2/8原则”。

事实上ES中的内容也很是多，而且更新很是快。现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。

假设你不懂原型、闭包和做用域，那就说明你还不全然了解ES，也就是不全然会用javascript。

　　在此毛遂自荐本身以前的一篇系列博客。你们可以去參考：《深刻理解javascript原型和闭包系列》

5. 框架和类库

　　前面已经描写叙述完了web前端开发所需要的理论知识。

怎样实践呢？——不能蛮干——还得绕世界去看看。有哪些大牛已经为咱们作出了如此多的贡献。

　　用如下的这些类库或者框架。能大大提升你的开发效率。

　　

• 首先，jquery必定是大部分web前端开发人员不可或缺的工具。而我利用jquery不仅停留在只使用它的API和插件上，我还会本身去写jquery插件，我还会去读jquery的源代码、了解jquery的设计思路。假设你也能那样作，请相信我。你会收获到意想不到的效果。假设有一个问题：如何才干最最透彻的理解javascript的事件系统？最佳答案之中的一个：读几遍（一遍可能读不懂）jquery关于事件处理部分的源代码！
• bootstrap不用再过多解释了吧，从github上的排名也能看出道道来。甚至连咱们公司的UI设计师。都从bootstrap上截图做为素材。

• fontAwesome是全世界最强大的图标系统。相比于css制做图标来讲，这个要好很是多倍。不管是开发、效率仍是维护上。

  icomoon.io能让我本身定义选择本身的图标文件。

• requirejs和seajs这样的模块定义系统，也必定是你系统中不可或缺的。我之前看过一个教程，讲师就说：requirejs带来了既jquery以后的第二次前端技术变革。
• 其它的，backbone、angular、react这些也慢慢的開始发挥了他们的价值。此处精力有限就再也不赘述了——但是，他们很是重要——你至少要试着去了解它们。

6. 编码开发

　　要问编码IDE哪家强，固然要属微软的visual studio。但是即使是微软的VS最新版本号。它也取代不了如下要说的这套开发环境。

　　

　　假设你专门作web前端，就不要在用vs了。固然要选择sublime。

写html语句还用手动一条一条写吗？你得需要zencoding的协助，不然效率太差了。

　　另外。针对html、css、js的压缩、合并、语法检查，文件的清除、复制这些操做，你还要手动去作吗？——你需要grunt或者gulp的帮助。

　　在此毛遂自荐本身的教程《用grunt搭建本身主动化web开发环境》，讲的比較具体，适合刚開始学习的人学习。

　　假设你的系统中有比較多的js代码或者文件，请选择一个合适的模块定义规范——CMD / AMD

　　请用git来帮助你作文件版本号管理。最简单的就是使用github。

　　调试、測试，也都有专门的工具，都是需要学的……

　　——个人天哪……这些字写到现在写的个人手都酸了。别说要学习这些知识了——再也别说咱们web前端是“三大块”了！

7. 执行环境

　　当系统真正到了执行环境中，当你认为最终完事儿的时候。事实上还有好几个知识点需要你掌握。看下图：

　　

　　首先，你要知道web系统尽管大部分是在浏览器下执行，但是js可能会被执行在node环境。

　　在浏览器环境下，最重要的两点是：web安全和性能优化。需要注意的纲要我都列出来了，假设想了解推荐两本书《白帽子将web安全》《高性能站点建设指南》

8. 其它

　　以上这些是全部的知识体系。假设你想成为一名合格的、让leader喜欢的程序员。你除了知道这些知识以外。我认为还需要下面几点：

• 要了解敏捷软件开发流程（如SCRUM）和项目管理知识（如考取PMP），这也属于一种“软”知识吧；
• 要学会在网上和别人交流（博客、qq群、开源项目），交流能让本身看到本身的不足。
• 要学会自我检讨和自我学习。就像我现在同样，试着本身总结一下属于本身的东西，随时检讨随时进步。

-------------------------------------------------------------------------------------------------------------

欢迎关注个人教程：

《使用grunt搭建全本身主动web前端开发环境》《从设计到模式》《json2.js源代码解读视频》

《深刻理解javascript原型和闭包系列》《css知多少》《微软petshop4.0源代码解读视频》

------------------------------------------------------------------------------------------------------------

也欢迎关注个人开源项目——wangEditor，轻量化web富文本编辑器

-------------------------------------------------------------------------------------------------------------

随机视频聊天——chatyou.net

-------------------------------------------------------------------------------------------------------------