前端学习之路

前端求职、前端学习咨询、前端架构探讨、前端难题 等
总之和前端相关的问题都可以到 https://github.com/6174/6174.github.io/issues 这个仓库下面给我提 issue 哈， 一定尽力回答
HAPPY FE ：- ）!

前端学习之路

近来几个水嫩嫩的小师弟来问我如何学习前端，为了统一作答， 我决定post一篇简短的blog， 一来算是对师弟们问题的解答， 二来也算是对自己四年来的前端学习过程的总结。四年下来看过哪些书， evernote过哪些好文章，需要实践的地方有哪些， step by step。 希望能够对小师弟们有些许帮助。

由于被小师弟赶着写博客，=。=，所以目前这篇几个个小时赶出来的质量肯定不高，以后会不断更改和细化。好吧，换个好听点儿的说法，迭代的思想来写博客，先提供给你们MVP

怎样定义这里说的前端

首先，在我们深入的讲如何系统学习前端之前，要理清楚right here 我们讲的前端是什么，前端的范围是什么，了解了范围过后再去学各个部分。

范围： 这里，我的前端定义比较狭窄，js + html + css。对的，没有数据接口开发，没有android或者ios前端开发，仅仅是web browser app前端开发。

html + css：

1. 基本规范

2. 结构布局

3. 兼容

4. oocss

5. css3

javascript：

1. js基础，framework, custom framework, clean code, achitecture

2. game, animation, async, static analysis

3. 围绕项目开发, 前端应用架构设计， 前端基础框架设计，

4. follow big guys，订阅优质前端博客

5. 关注前端发展

项目技能

1. 开发调试

2. git，svn版本管理

3. 开发工具

4. 前端工具： 性能测试工具，调试工具，代理工具，css工具

5. grunt， gulp

6. BDD

知识图谱：

skills
前端技能汇总

那该如何学

了解了前端基本要学些什么过后， 接下来是how，如何去学。由上面的知识图谱以及前端skill来看，对于刚接触前端的同学来说，不可能速成的，就本人的观点而言，对于前端，更多的看重学习经验，解决问题的能力。 那么多的知识点，不可能全部记住，更好的方法是去广的涉猎， 当遇到问题的时候， 知道该怎么解决，用什么工具和方案来实现。

但所有的一切是有前提的，拥有好的基础。这里我指的基础当然是js，css基础。那如何培养这些基础呢：

书单
1.《Javascript高级程序设计》
2.《高性能Javascript》
3.《Javascript 模式》
4.《Javascript富应用开发》
5.《悟透Javascript》
5.《The Book Of css3》

进阶书单
1.《深入浅出Nodejs》
2.《Testable Javascript》
3.《Javascript框架魔法指南》

其他
1.《clean code》
2.《Git 权威指南》

看书是伴随着项目开发的过程的，通过不断的实践才能真正的学习， 一本书不是看完一遍就完事儿， 个人的观点是螺旋式回归的学习。

与此同时试着做一下的事情来练习前端开发：

1. jQuery组件开发： 一些自己项目中需要应用的组件，或者模仿一些组件效果

2. 通过现有框架开发或模仿一个小游戏：游戏的开发几乎是pure js，过程中可以学到很多js开发的东西， 包括架构设计，开发调试，图片相关

3. 自己实现一个canvas游戏框架

4. 做一个自己的前端库

5. 阅读源码，从小片段源码到整个项目的源码

6. 做一个自己的项目

7. 不断写blog

这些并不是step by step的，应该是相辅相成的，而我觉得整个前端生涯都会不断重复的做其中一些事。

如何做的更好

学习和研究一个领域一样， 需要了解这个领域都在解决些什么问题，了解这个领域的发展和历史，有哪些了不起的任务和贡献者。 该领域内对特定问题的普遍解决方案。

尝试关注下面这样问题，如果可以提出自己的决绝方案

1. 前端性能优化

2. 前端组件化，模块化

3. 前端测试

4. 前端开发流程

5. 细化的前端问题，样式，加载，图片处理

6. 前端兼容

7. 异步

当到了这一步我我觉得学习的方法应该是，尝试解决一个别人没有解决的问题或者做得不够好的问题，通过自己的探索和研究，提出自己的方案。这一过程中会学到很多很多的东西，可能不仅仅是前端，这些内容可能包括UX，设计，服务端设计等等。 可能我现在的状态也是处在这里，为了解决一个特定的问题，深入学习这个特定领域，找出解决方案。