一年多的前端技术总结-菜鸟转变成非菜鸟之路

2011年-2015年，我读大学，计算机专业，大二加入实验室，从此开始搞技术。

第一阶段：

技术：html+css,JSP
熟练程度：完全菜鸟中的菜鸟，概念不清，项目不会，深层次更加不了解。
收获：1.html是由各种标签组成，会按照W3C网站书写简单的静态页面；却不会css,js。
2.毕业设计是用JSP来做，不懂MVC,硬着头皮写java代码，勉强走完很水的毕业之旅。
复制代码

本科毕业后坚持读研，在一个大数据/数据挖掘的实验室，在导师的帮助下，我开始接受一点项目。

第二阶段-一个中医系统的小项目（2016.3-5）

技术：html+css+js+jQuery
熟练程度：还是菜鸟，已经入门
收获：
1.说白了，html最大的特点就是层层嵌套，核心就是“嵌套”，它是网页的结构；css就是给网页化妆的，是网页的表现；js就是网页的动作，是网页的行为

2.有幸接触到了canvas以及其Zrender库，html5是主流网页结构，虽然兼容新还不好；当时最熟悉的是jQuery实现异步刷新，就是ajax异步请求；其次jQuery还可以实现DOM操作，这也是其最大的用处之一，比如其获取DOM节点是跟css的选择器是类似的，类选择器或者id选择器等，你们懂的
复制代码

第三阶段-遇到贵人，实验室师兄，进行项目的代码重构并接触新的知识(2016.5-7)

技术：jQuery,AMD，ES6，gulp,sass,less,requireJS
熟练程度：可以独立写代码，翻墙找文档
收获：
1.对代码进行重构，比较流行的是对代码进行模块化，于是接触到requireJS+AMD,属于异步加载方式，其实还有CMD模式，类似于commonJS（node使用的）。说白了，AMD+requireJS模式就是想用哪一个模块就加载哪一个，这种异步的方式总是高效的吧，我比较喜欢。

2.使用Zrender库代替所有的canvas，这个库的确是很好，还在不断更新

3.其余时间，自己又重新看了一遍HTML+CSS的东西，主要我也比较喜欢玩这个东西，可能是在大学学习过的原因。自己用gulp在linux下搭建了一个工具，玩了一下这个构建工具，内部也使用了sass，这种预处理器可以使用变量、混合、继承以及条件语句，如同编程语言。当时没有学习less，因为它是和sass差不多的，取其一即可，另一个原因是less在客户端渲染，而sass实在服务端，故我喜欢更快的方式。
复制代码

第四阶段-几个人一起创业，开发公司第一版本产品(2016.11-2017.3)

技术：HTML+CSS+AMD+requireJS
熟练程度：熟练
收获：
1.并木有使用原生态的js（这是我之后后悔的一件事情），直接采用了jQuery,更加深入了解了此js库的用法;比如它的动画、异步、DOM还是很值得采取的，但是只会jQuery和js好像并木有太大交集。

2.前后端分离，理解了MVC、MVP模式，我们采用的更像是MVP模式
复制代码

遗留了很大的问题，比如产品设计问题太大，页面加载速度过慢等问题

第五阶段-开发第二版产品（2017.3-2017.8）

技术：vue.js
熟练程度：入门到熟练
收获：

1.在此之前，也专注学过js了，《javascript高级程序设计》是本很不错的书籍，前车之鉴，学到了很多，从变量类型->函数->闭包->原型->this等，当时真的是看的一团糟，简单的很明白，后面几个不是很懂。

2.从入门到熟练使用vue,node+npm（这些之前也是接触的不少了）包管理工具，webpack打包工具也是很强大。

3.vue生命周期以及钩子函数很明白，期间也走过很多坑，学习成本低，收获很大。其中使用了很多其他的东西，比如ES6，所有语法基本都是用的ES6,promise等很强大很实用，axios更加流行，vuex专门用于SPA状态管理等。
复制代码

第六阶段-直到现在

一直还在学习，学习更多的基础和新的东西，都知道，前端这个领域更新相当快了，与时俱进的心态不能放下。
1.目前学习了angular+ts，感觉还是很简单的，细节的东西比较多，当时自己也学过一段时间的angularJS，有点基础吧，但是angular完全是不同了，组件化、模块化、元数据、指令组件、数据绑定、组件通信、依赖注入等，也主要是因为有了ts这门强类型的语言，还是很好玩的。接下来就是要读读它的源码。
2.正在学习react,这个之前也学过，不是很懂，现在它好学了，更简单了，一种“css in js”的模式，使用ES6的语法，也看看源码
3.一直以来，从没有放弃js的基础知识，这里包括值类型、引用类型、闭包、原型和原型链、深浅复制等，昨晚又读了一篇文章，受益匪浅。
4.简单来说，js的函数是js变成的一个命脉，函数拥有context上下文，也就函数作用域，从而也就形成了作用域链；有函数就不得不提闭包函数-它是一种可以访问局部变量并且被嵌套的函数，作用除了访问局部变量之外还可以使得访问的局部变量一直存在于内存中，比如循环用setTime函数输出的例子就可以使用这个特点。除非变量删除，否则可能会存在内存泄漏的问题。
5.原型和原型链，每一个函数都有一个原型，实质上是_proto_，而不是prototype,原型链就是层层原型链接而得到的，具体问题具体分析。
6.this。这个东西其实是函数给的，每一个函数在定义的时候都会在自己的作用于内限制一个this指向，一般是指向自己。可以分为：（1）对象方法的指向，指向当前对象 （2）单纯函数的指向，也就是独立函数，一般来说是指向window（3）构造函数指向，是指向实例（4）call/aplly/bind限制this指向，均指向参数（5）箭头函数不绑定自己的作用域，故就木有了this指向自己，一般指向了外部函数。
7.js的执行流程也要弄明白。比如js引擎（堆栈、V8），runtime(浏览器或者nodejs给出的runtime上下文，或者叫做API工具)，call stack
8.ES6,7已经来了，现在甚至已经有ES8了，相信js的力量会无穷无尽，继续学习是王道。
放一张我自己的技术栈和学习路线，与大家共勉！还有很多细节的东西没有写上去，请见谅！之后要更加注重移动端的东西！
复制代码