前端知识体系及一些细碎的叨叨叨

自学前端需要学什么

我猜这是很多新手都会面临的问题，先开始的时候我想学C语言，因为想做一个黑客，后来啊，觉得网页很有趣，所以选择了前端。真的开始学起来的时候才发现好像踩了一个坑……大学虽然是软件工程专业但其实并没有接触太多前端，只依稀知道有个html5有个css3还有个JavaScript，后来看一些公司招聘要求里边有什么响应式啊浏览器的兼容性啊，vue，ES6，jQuery，react，node.js之类乱七八糟的一些名词，再自己看的时候又看着有什么canvas之类的东西，有点懵。因为没个系统的认知，所以看到这么多东西有些头大。所以今天我们来扒一扒这都是些啥。当然，这里只列一个大纲，具体的以后再讲。

首先，最基础的其实还是http协议和浏览器，因为你作为一个前端工程师，你必须要知道一个网页是怎么呈现在你们面前的。

再就是前端三剑客了，html、css和js，当然，不要太放松，因为它们…….html有html4.01,xhtml和html5，css有css2.1,css3,less和sass，js有es3,es5,es6和typescript。

再往深入一点呢，就到了插件了，目前JQuery虽然已有些过时但你依然不能不去了解它，由JQuery又可以引出三大插件分别是 VUE，React和AngularJS。到这里可以了吗？

唔，你可能还需要一些后台知识，比如Node.js。基于node.js流的自动化构建工具Gulp，前端模块化工具webpack。除此之外就是js前端模块化规范AMD和CMD了，这个之后就是遵循AMD规范的js模块化工具requireJS了。

关于自学你需要知道的

学习一个东西如何构建知识体系

我们一般会看书的目录，把知识分成目录的结构。对于编程来说，首先，编程是将你的思维想法转换成代码，然后再在机器上运行。锻炼这种思维最好的办法是分析并实现算法。

对于css体系

1. 了解历史。了解它的作用、发明者，可以直接上维基百科搜索。

2. 了解现状。看一下W3C制定的css规范。

3. 看一些教材，看一些大神的博客之类的，看mdn文档。css大神比如说张鑫旭，一丝，css揭秘的作者等等。

4. 工具、资讯。上一些网站看一些作品，查看哪些属性可以用 css-tricks.com codrop awwwards

5. 关于js一些优秀的博客，我们需要知道js/css能做什么不能做什么。

对于如何学习前端

思维——算法

代码——HTML/CSS/JS

运行——浏览器/AJAX/DOM/Canvas

能力——做项目

学习css就像写作文

学习js就像学化学

不要只做一遍就过去了，多试几遍直到没有错

查资料推荐mdn，菜鸟教程也还行，一定不要去w3school。据说w3school有很长一串黑历史，当然你如果不想看的话可以跳过这一段，我说了这篇bolg就是细碎的叨叨叨。我们现在看到的w3school实际上只是一个国外的网站www.w3school.com翻译过来的，在原网站的地址后边加上了.cn，也就是说我们看见的w3school网站地址是www.w3school.com.cn。且不论翻译中的错误，原网站本就是错误百出。这里我们先说原网站的黑历史。我们都知道W3C标准，但其实w3school和W3C没有任何的关系。是的，它们没有关系。是的，我开始的时候也以为有关系。据说万维网联盟曾经想让这个网站改名来着，但是人家不愿意你也不能拿它怎么样…….再说网站内容本身的问题，虽然我目前也没发现有什么但是有人很不满这个网站因此同样做了一个网站叫w3fools，来专门挑错，据说挑了有几百条。。。。后来w3school.com呢，受不了了于是把人家挑出来的错都改了，但是w3school.com.cn，并没有改。 [微笑脸]反正你们自己斟酌吧。说起来感觉这个世界上还真是有很多有趣的人呢。

推荐书单&电影

先上图吧！



《code》中文名《编码》



《黑客与画家》阮一峰写的，同样还有一本推荐是《禅与摩托车维修艺术》。



《只是为了好玩》——Linux之父林纳斯自传



《软件随想录》



《代码大全》



《用户体验的要素》



《Don’t make me think》——《点石成金》



至于《硅谷传奇》、《helvetica》、《code rush（代码奔腾）》都是电影或者纪录片。不介绍了，因为我还没看过。

对于前端呢，这还有一份。



css还有一本叫《css揭秘》的，评分也挺高。

js一本《JavaScript高级程序设计》就够了吧。。不然还有一本《JavaScript权威指南》。。。

http有一本《图解http》，唔，还是不看了。。

Tips

拿到一个东西的时候你先想想这个东西是什么，有什么用以及什么时候用，然后再去学习它。

css的学习——copy，run and modify。你要想学会一个效果，就先找到那个效果，然后运行，然后修改，弄清楚里边每一个参数的含义。代码可以放jsbin里边，直接run看效果就好。不然存本地……总觉得浪费了。

web archive可以看任何网站的历史，但是我还没学会怎么用。。

还有一个网站greygao.com，也不知道是我记错了还是要翻墙，反正我没进去。不知道有什么用但是应该是个好东西。。

还有最后一些知识的获取方法。

1. 工具使用知识—–把所有能点的按钮都点一遍。。。

2. 概念知识——一些名词，比如面向对象、闭包。所有的东西都是建立在概念之上的。css先用再学，js先理解概念再用。把概念先串起来，然后再敲代码。

3. 工程实践知识——多写代码

4. 经验——每一次比上一次做得更好，悟，总结。多些blog。