开篇词
首先我来说说我为什么需要列一份前端的结构体系。
最近在做自己的项目的时候，总是会遇到各种各样的小bug，大部分的编程的时间都是在查找bug如何解决，解决完了也就解决完了，但对于我本身的提升却很少。
就比如说我昨天用webpack打包遇到的一个问题，JS代码需要依赖jQuery，如何注入jQuery。解决了这个问题花了有一会，解决完了，又碰到了其他问题，每天的编程就是反复在遇到问题与解决问题中，最后做完一个项目了，做是做出来了，但是代码好像东拼西补一般，乱七八糟。
所以换一个角度，我们在编程学习的过程中建立自己的结构体系，遇到的各种问题都是在填补我们这个结构体系中的知识盲点。或者在我们的知识体系中去主动扩充我们的知识，填补知识盲点，而且学习的时候也能够做到触类旁通。以我现在的理解，我们要做的是前端的工程师，架构师。不只是能够去完成业务的代码，而是能够以业务的出发点去思考，这个业务用哪种技术做比较好。所以这就是我要列一份我自己前端结构体系的原因。
学习方法
从陈皓老师对于学习技术要问自己的问题出发，我列出的每一种技术，今后我都会以下下面几个方面去书写
- 这个技术出现的背景、初衷和要达到什么样的目标或是要解决什么样的问题。这个问题非常关键，也就是说，你在学习一个技术的时候，需要知道这个技术的成因和目标，也就是这个技术的灵魂。如果不知道这些的话，那么你会看不懂这个技术的一些设计理念。
- 这个技术的优势和劣势分别是什么，或者说，这个技术的trade-off是什么。任何技术都有其好坏，在解决一个问题的时候，也会带来新的问题。另外，一般来说，任何设计都有trade-off（要什么和不要什么），所以，你要清楚这个技术的优势和劣势，以及带来的挑战。
- 这个技术适用的场景。任何技术都有其适用的场景，离开了这个场景，这个技术可能会有很多槽点，所以学习技术不但要知道这个技术是什么，还要知道其适用的场景。没有任何一个技术是普适的。注意，所谓场景一般分别两个，一个是业务场景，一个是技术场景。
- 技术的组成部分和关键点。这是技术的核心思想和核心组件了，也是这个技术的灵魂所在了。学习技术的核心部分是快速掌握的关键。
- 技术的底层原理和关键实现。任何一个技术都有其底层的关键基础技术，这些关键技术很有可能也是其它技术的关键基础技术。所以，学习这些关键的基础底层技术，可以让你未来很快地掌握其它技术。可以参看我在 CoolShell 上写的 Docker 底层技术那一系列文章。
- 已有的实现和它之间的对比。一般来说，任何一个技术都会有不同的实现，不同的实现都会有不同的侧重。学习不同的实现，可以让你得到不同的想法和思路，对于开阔思维，深入细节是非常重要的。
列出自己的结构体系
这是我参考一些老师以及其他人写的文章，列出的自己的知识体系，可能有遗漏，但是尽量做到能够从知识的结构上而不是一个个小点上对知识进行一个分类。先从CSS开始，今后每天写一篇文章来为我的知识结构大楼添砖加瓦！
