学习前端的阶段性总结

备注：写于刚接触前端的阶段，或存在许多认知偏颇甚至错误的地方，等知识技能水平上来了，再补充修改后的链接。
这段时间自学了前端知识，按照顺序来说的话，共学习了以下知识：
大学里面学过vb和微机原理，汇编语言。对计算机组成原理和编程有基本的认识。
先学习c++、数据结构，对编程的世界有了个基础的认识。
然后就正式开始前端的学习，具体学习的路线和知识如下：

学习的第一个阶段：主要是html和css,可以写如下图这样的静态页面。

对于这个阶段的理解就是，页面的布局被分割为一个个盒子，父盒子里面嵌套小盒子，小盒子里面又会有子盒子，所有的页面结构都可以根据这样层层划分为最基础的一个盒子里面的布局。而且在每一个层级的盒子内部的布局都可以灵活应用流式布局，float布局，position定位布局，flex布局，rem布局，甚至还可以利用bootstrap的栅格系统进行响应式布局。

学习的第二个阶段：是js的学习

利用js，可以完成页面的一些行为。比如事件的绑定，前后端数据的交互，动画的处理等。通常都是由js来完成的。
学完了这两个阶段之后，就可以写原生的页面了，但是原生的需要写很多代码，比较麻烦，在写这部分代码的过程中，可以发现，日常使用过程中，会有很多代码和功能是常用的，或者复用的，如果将其保存下来，下次就可以直接使用了。
随着保存和封装常用代码的发展，就自然而然会出现一些实现特定功能的插件，比如专门做轮播图的，做tab导航栏的，做图表的……
而更进一步，把这些插件再集成起来，出现了框架，比如bootstrap框架，就是把常用的页面元素，事先定义好了css,以供开发者按需使用。
还有前几年特别火的jQuery，就是对js中dom操作的一个封装。极大地简化了开发者对界面元素的操作与控制，不再反反复复地写getElemnetById这种代码。

第三个阶段，学习前端相关知识

主要是这就几个部分：
1，node的学习，它其实就是一个提供js运行的平台。
2，在node的基础上，学了一个包：express，它能够更加便捷地创建服务器
3，数据库mongodb，数据的交互就是在从数据库—服务器—客户端之间进行交互的，所以理解这部分的知识很有用处的。
4，说到数据交互，就绕不过ajax，它提供了一种客户端和服务器之间的数据传递代理的作用：

利用它，它可以实现界面的局部刷新。
5，而数据交互就得发起请求，发起请求到获取数据需要时间，也就是说，这是异步的事件，于是就会接触到异步编程，回调函数作为参数传入，但是多层回调会产生回调地狱，为了解决这一问题，引入promise，把异步的执行过程和结果做到了分离，利用promise.then在异步操作外对函数进行操作。而后在es7中，提出了异步编程的最终解决方案，用await和saync把异步写成同步。
6，随着前端的发展，文档结构变得越来越复杂，比如css文件有less和sass等预编译文件，js又分为es6，es7等很多版本，还有各种插件，依赖，框架等。为了统一管理这些文件，就会学习到webpack,利用它，可以实现按需打包成dist文件（里面是可上线的文件）。
7，最后，说到打包上线，就不能绕过git这个版本管理工具和github这个平台，学习了下常规的操作。

第四个阶段：就是vue的学习阶段了。

这个阶段接触了这个单页面组件化开发的框架，确实牛逼，直接数据驱动页面元素从而实现页面渲染，而不再关注于dom操作。
学习了vue全家桶的相关知识：
vue基础的核心我觉得是数据的双向绑定和单向绑定。双向绑定主要用于表单元素，单向绑定用最多的还是属性绑定，实现页面的渲染。
vue-router:是路由部分，根据url请求的路径不同，以实现在不同组件间的切换。
vue-axios:是vue提供的ajax封装，根据发起的请求类型和请求参数的不同，从而获取服务器的对应响应。
vue-cli:是vue的脚手架工具，就是搭建一个基本的vue项目开发的环境和文档结构。像之前说到的webpack就包含其中。
vuex:既然vue是适合组件化开发的，那它开发出来的项目一定是由大大小小许多组件构成的，组件之间需要数据传递，如果只是用普通的组件间传值，会很麻烦，而vuex却可以在全局创建一个类似数据库一样的东西，所有的组件都可以访问到这里面的数据，从而大大地简化组件间数据传递地问题。

到了这个阶段，如果采用vue来开发项目的话，就会变得很明了：就是人们常常说的单页面组件化开发，页面的切换，页面的搭建，都是由组件来完成。也就是说，最开始静态页面是一个一个盒子搭建起来的，到这里，就是一个一个组件搭建起来的，而且更进一步的是每个组件都有自己的html，css,js。还可以重复使用，更加地方便且高效了。