比较实用的web前端开发知识框架图，让你从入门到精通

把整个web前端开发所需求的常识都之中在一个视图中，构成一个完整的web前端常识系统，意图是想要颠覆人们对于前端只有三大块（html、css、js）的知道——做web前端需求的比这三大块要多得多。

一、分类

所有常识结构，那肯定是一个结构型的展示，就是一棵树。web前端的常识点非常多，也非常散，需求好几层结构来安排这个系统，否则就会显得很乱。那么如何安排、把谁和谁放在一块儿？这是真正值得我们去考虑的，你也可以自己来考虑一下这个问题。

在我总结的这个常识结构中，首要第一层我划分为：理论常识，类库结构，编码开发，运行环境。

接下来给咱们解释一下：

这个图要从下往上看，为何？——由于下面是上面的根底；

首先，咱们需求必定的理论知识，不管是你听他人教学、自己看书还是网上淘材料，你都需求必定的理论知识，每一种程序开发，都避免不了。

第二，有了这些理论知识咱们就可以编码了——不错——but，没有人能抵挡住第三方框架和类库的引诱，例如jquery；

第三，有了这些理论知识和协助咱们的类库框架，咱们就可真实的编码了。咱们或许以为编码开发不就是写代码吗，还有啥？——这里面道道多着呢；

最后，开发程序的目的，最终是为了能高效、稳定的运行在相应的环境中，这其中又有哪些工作需求咱们去做？请等待。。。

二、理论知识

“软知识”和“硬知识”咱们或许觉得词生疏，其实我一说咱们就能明白。

所谓“软”的便是能在各个程序开发中都用到的，算是基本功、内功，例如数据结构、算法、规划形式、面向对象等等；

所谓“硬”的便是能直接用于本程序开发的。用C言语你就得学C言语语法，此时学java没用。咱们web前端开发所需要的硬常识其实都包含在三个规范里边：http规范、W3C规范和ECMAs cript规范。

三、web前端开发中的“硬常识”

“软常识”的内容十分多，也是咱们大学年代学习所谓的重点。咱们本次首要讨论的是web前端这一个方向，因此就点到为止，让我们知道这些常识也在常识体系中扮演重要人物。

刚才说道，硬常识有三个规范：http规范、W3C规范和ECMAs cript规范，那咱们就挨个聊聊这三个规范。

3.1 http规范

为什么做web前端要了解http规范？——由于浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。web系统已然和http链接有瓜葛，你就必须去了解它。

我的意见是：你不必去十分了解http的详细内容，可是你要了解web前端开发常用的一些http的常识——就是上图中我列出来的那些。当然，我常识列了一个纲，详细内容还得靠你自己去查阅（本文章讲的是常识结构，不会涉及任何常识点的详细内容）。

3.2 W3C规范

如果说你只知道web前端的一个规范，估计肯定是W3C规范了（据我了解，貌似大部分人真的都只知道这一个规范）。

写到这里让我想起了一句话：2/8原则——20%的功用满意80%的需求。我觉得这句话用到这里十分适宜，我们在平常开发过程中底子用不到这么多东西。反而，你要把平常用的多的东西搞懂了。

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

3.3 ECMAs cript

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

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

如上图中的这些概念，大家可能平常都在javas cript中看到，其实他们是ES的内容。只不过javas cript承继了ES的这些特性，并且javas cript用的比较广泛，因此才会在js中评论的多一些。

仍是那个“2/8准则”。其实ES中的内容也非常多，并且更新很快，现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。如果你不明白原型、闭包和效果域，那就阐明你还不彻底了解ES，也便是不彻底会用javas cript。

四、框架和类库

前面现已描绘完了web前端开发所需要的理论知识。怎么实践呢？——不能胡来——还得绕国际去看看，有哪些大牛现已为咱们做出了如此多的奉献。

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

首要，jquery一定是大部分web前端开发者不可或缺的东西。而我运用jquery不仅仅停留在只运用它的API和插件上，我还会自己去写jquery插件，我还会去读jquery的源码、了解jquery的规划思路。假如你也能那样做，请信任我，你会收获到意想不到的作用。

假如有一个问题：怎样才能最最透彻的了解javas cript的工作系统？最佳答案之一：读几遍（一遍可能读不明白）jquery关于工作处理部分的源码！

bootstrap不用再过多解释了吧，从github上的排名也能看出道道来。甚至连我们公司的UI规划师，都从bootstrap上截图作为素材。

fontAwesome是全世界最强大的图标系统。比较于css制作图标来说，这个要好很多倍，不管是开发、功率仍是保护上。icomoon.io能让我自定义选择自己的图标文件。

requirejs和seajs这种模块定义系统，也一定是你系统中不可或缺的。我早年看过一个教程，讲师就说：requirejs带来了既jquery之后的第二次前端技能变革。

其他的，backbone、angular、react这些也逐渐的开端发挥了他们的价值，此处精力有限就不再赘述了——但是，他们很重要——你至少要试着去了解它们。

五、编码开发

要问编码IDE哪家强，当然要属微软的visual studio！但是即便是微软的VS最新版别，它也替代不了下面要说的这套开发环境。

如果你专门做web前端，就不要在用vs了，当然要挑选sublime。写html句子还用手动一条一条写吗？你得需求zencoding的协助，否则效率太差了。

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

如果你的体系中有比较多的js代码或者文件，请挑选一个适宜的模块界说规范——CMD / AMD

请用git来协助你做文件版别管理，最简略的就是使用github。

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

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

六、运转环境

当体系真正到了运转环境中，当你觉得总算完事儿的时候，其实还有好几个知识点需求你掌握。看下图：

?

首要，你要知道web体系虽然大部分是在浏览器下运行，可是js可能会被运行在node环境。

如果你想学习web前端技术知识，想要学习web前端培训课程，那么就来千锋重庆web前端开发培训机构进行学习。这里有专业讲师带你，最多半年的时间让你完美蜕变。进名企、拿高薪不再是问题。