人们对于前端的认识只有三大块(html、css、javascript),认为学习前端就是学习这三方面的内容,但是前端关联的知识不止于这几个方面,一个完整的web前端知识体系包含很多的知识,所有知识框架就是一个结构型的展现,就是一棵树。web前端的知识点非常多,也非常散,需要好几层结构来组织这个体系,这个知识框架可以划分为:理论知识,类库框架,编码开发,运行环境。
首先,我们需要一定的理论知识,不管是你听别人讲授、自己看书还是网上淘资料,你都需要一定的理论知识,每一种程序开发,都避免不了。
第二,有了这些理论知识我们就可以编码了——例如jquery;
第三,有了这些理论知识和协助我们的类库框架,我们就可真正的编码了,大家可能以为编码开发不就是写代码吗,还有啥?——这里面道道多着呢;
最后,开发程序的目的,最终是为了能高效、稳定的运行在相应的环境中;
1、理论知识
理论知识包括“软知识”和“硬知识”,“软知识”和“硬知识”大家可能觉得词陌生,其实我一说大家就能明白。
所谓“软”的就是能在各个程序开发中都用到的,算是基本功、内功,例如数据结构、算法、设计模式、面向对象等等;
所谓“硬”的就是能直接用于本程序开发的。用C语言你就得学C语言语法,此时学java没用,web前端开发所需要的硬知识其实都包含在三个标准里面:http标准、W3C标准和ECMAScript标准;
硬知识有三个标准:http标准、W3C标准和ECMAScript标准,聊聊这三个标准。
http标准:为什么做web前端要了解http标准?——因为浏览器要从服务端获取网页,网页也可能将信息再提交给服务器,这其中都有http的连接。web系统既然和http链接有瓜葛,你就必须去了解它。你不必去非常了解http的详细内容,但是你要了解web前端开发常用的一些http的知识,详细内容还得靠你自己去查阅。
![](https://i-blog.csdnimg.cn/blog_migrate/2563624bf83f10cc64b8f4404eac8123.jpeg)
W3C标准:W3C标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准由W3C起草和发布,W3C标准也只是web前端开发知识体系中的一部分而已。
![](https://i-blog.csdnimg.cn/blog_migrate/c32b3ef4994bdf15c17a58fc61dd55bb.jpeg)
ECMAScript标准:有些人可能只知道javascript,而不知道ES——其实js是在ES的基础上,为web浏览器做了一部分封装(增加了DOM操作、BOM操作等),图中的这些概念大家可能平时都在javascript中看到,其实他们是ES的内容。只不过javascript继承了ES的这些特性,并且javascript用的比较广泛,因此才会在js中讨论的多一些。ES就是JS的原型,如果你不懂原型、闭包和作用域,那就说明你还不完全了解ES,也就是不完全会用javascript。
![](https://i-blog.csdnimg.cn/blog_migrate/3130d73532f42724563a11de31ecd764.jpeg)
2、框架和类库
前面已经描述完了web前端开发所需要的理论知识,下面讲下类库或者框架,类库或者框架能大大提高你的开发效率。
![](https://i-blog.csdnimg.cn/blog_migrate/5c80b54ebcce60cadfd99c8078229ace.jpeg)
首先jq一定是大部分web前端开发者不可或缺的工具。利用jq不仅仅停留在只使用它的API和插件上,还要自己去写jq插件,去读jq的源码、了解jq的设计思路。请相信我,你会收获到意想不到的效果。怎样才能最最透彻的理解javascript的事件系统?最佳答案之一:多读几遍!
bootstrap不用再过多解释了吧,从github上的排名也能看出道道来。甚至连我们公司的UI设计师,都从bootstrap上截图作为素材。
fontAwesome是全世界最强大的图标系统。相比于css制作图标来说,这个要好很多倍,不管是开发、效率还是维护上。icomoon.io能让我自定义选择自己的图标文件。
requirejs和seajs这种模块定义系统,也一定是你系统中不可或缺的。我曾经看过一个教程,讲师就说:requirejs带来了既jquery之后的第二次前端技术变革。
backbone、angular、react这些也慢慢的开始发挥了他们的价值,精力有限就不再赘述了——但是他们很重要——你至少要了解它们。
3、编码开发
![](https://i-blog.csdnimg.cn/blog_migrate/a2cebdaa748b66ae030dff0656aa538c.jpeg)
你专门做web前端,写html语句还用手动一条一条写吗?你得需要zencoding的协助,否则效率太差了:
针对html、css、js的压缩、合并、语法检查,文件的清除、复制这些操作,你还要手动去做吗?——你需要grunt或者gulp的帮助:
你的系统中有比较多的js代码或者文件,请选择一个合适的模块定义规范——CMD / AMD:
用git来帮助你做文件版本管理,最简单的就是使用github,调试、测试,也都有专门的工具:
4、运行环境
当系统真正到了运行环境中,你觉得事情办完了,其实还有好几个知识点需要你掌握。如图:
![](https://i-blog.csdnimg.cn/blog_migrate/1e87a77ba4bb19d5bbe7f602b4f0f3fc.jpeg)
要知道web系统虽然大部分是在浏览器下运行,但是js可能会被运行在node环境。在浏览器环境下,最重要的两点是:web安全和性能优化。
5、 其他
以上这些是全部的知识体系。如果你想成为一名合格的程序猿,你除了知道这些知识之外,我觉得还需要以下几点:
要了解敏捷软件开发流程和项目管理知识这也属于一种知识吧。
要学会在网上和别人交流,交流能让自己看到自己的不足。
要学会自我反省和自我学习,随时反省随时进步。