如何合理的规划前端之路

摘要：什么是前端工程师总而言之就是运用等技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成应用开发的职位。

别害怕，没有人能把这些都学个遍，学好基础，拎一部分，满足工作中的业务需求就可以了。

学习一样东西，首先得先去了解它的定义，和大概的框架结构，梳理好思路，然后再一个萝卜一个坑，循序渐进的去丰富自己的知识体系。有人说，前端东西多而杂，你今天刚弄明白一框架，明天又出一新框架，其实大可不必去理这些花里胡哨的框架，毕竟在真正的工作环境中，你是一名业务驱动型的程序员。

好了，废话不多说，先上菜

是不是感觉前端东西不就这几样吗？？别急，这里面看似简单，每一门学精了，没个三年五载的，你都不好意思说你会。

万事开头难，一步一步来，如今充斥着各大前端框架理念。"MVVM"、"MVC"、"MV*"、"模块化"、"高性能"等等，您可别被这些迷住了眼，不都得先打基础，HTML、CSS、JavaScript这三门语言就够你喝一壶的（你再牛逼的框架不也是用我们写的吗），即使你已经工作三五年了，这里面有零碎的知识都有你不知道的；所以不管你现在已经在哪个阶段，学习基础知识的劲头可不能减。

这时候你的知识体系就是这样了

该看的都看了，该学的都学了，不能光说不练，得用起来.

资深WEB前端工程师

这个方向算是一个 WEB 前端最基本的选择了，在国外，很多老外都能够把自己的专业做到极致，能一辈子就在一个专业领域不断学习和积累。主要在于内因和外因 两方面，内因是老外通常思想比较简单直接，容易一直专注于一个领域；外因是国外的环境很好，能够良好的支撑这样的职业发展道路。反观国内，从内因来讲，WEB前端技术人员还是蛮浮躁的，通常会因为 WEB 前端知识的更新速度太快而觉得学习起来辛苦，最终转向后台或其他道路。

从外因来讲，WEB 前端人员 没有获得公平的待遇，可能从 HTML 页面制作就开始并沿袭下来的，从来WEB前端人员都比后端人员低一等，貌似前端就是“浅显”的代名词、后端就是“深 奥”的代名词，这也直接造就了前端人员的收入无法和后端人员媲美，同时直接影响到前端人才市场的活跃程度。另一方面，前端的技术入门较容易，造成另一个极 端情况：人员泛滥、人才稀缺。我想对所有的 WEB 前端工程师说：面包总会有的，要耐得住寂寞！我个人比较推荐这个职业发展方向，因为，在这个方向下，只要 足够耐心、厚积薄发，成功的概率是非常高的。同时，这是一条最单纯的路，我们更多的是花费精力在技术的钻研上，而不是办公室政治等其它琐事。

1.我觉得博客当然是用来写总结性的东西，它能帮你梳理下整个过程的要注意的地方，写写你在工作中遇到的问题，用来记录和回顾。

2.至于怎么梳理框架，还是看你博客定位了，如果偏向科普类型的，自己看着爽也要别人看的爽，当然是写的面面俱到然后加配图。如果是类似自己笔记类型的，可以稍微简单的写，提示性的。

可以考虑（github pages 或者 gitcafe pages）+（静态博客比如 hexo, octopress）+（markdown 写作）。符合程序员气质。

最主要是数据都归自己管，还可以本地随时查看，对外是博客，对内跟建立自己一个知识库一样。

写博客贵在坚持，这玩意也是见效很慢的东西，你写多了你会发现你不仅是在技术方面的进步，写作，写文档，表达也会有提高的。

而且发现评论里面有能帮助到别人，自己也会有莫名的成就感。

现在大多数的Web开发者，大都是对基础简单扫一遍，专门研究JS框架去了，什么 Vue、Angular、React 等等，倒不是反对这种做法，虽然这样做，看起来在现实应用场景和暂时找个不错的工作看起来有利一些，但是却大大的限制了自身长期的职业发展；而在前期，我是更加的去注重基础，愿意花更多的时间去了解原生的东西，也不是说我过于保守，只不过是"我在没烧好一块块砖头的情况下，我可不敢去盖大房子"；例如，Saas 效率再高，不也得转换成 CSS 让浏览器去解析，JSX看起来再邪乎，在浏览器大爷面前不也得装JS；当然，我主要去了解各种框架的设计思想，和它实现功能的方式；具体工作中用到时，我会深入研究。

同样也有人说了，玩 CSS 有什么难度，不就不布布局，改改风格吗。是的，但是，想玩好了，可不容易，个人推荐张鑫旭的博客张鑫旭，这是一位长期研究CSS的大牛；相信前端工程师听到他，应该不会陌生。

废话少说，上第二道菜。

谷歌浏览器效果图

神奇吧，这就是 CSS3 吸引人的地方，喜欢各种动画交互的人，肯定会对CSS3的新特性爱不释手；也不是说JS做不到，只不过是 JS 相对 CSS3 要说，要进行重绘，这对浏览器的性能来说，会大打折扣，所以"CSS能实现的，尽量别用 JS 去实现"。

附上代码

HTML

{% highlight ruby %}

{% endhighlight %}

CSS

{% highlight ruby %}

html,body{height:100%}body{background:radial-gradient(ellipse at center,#34679a 0,#214163 47%,#0d1926 100%)}body>div{position:absolute;top:12%;left:50%;margin-left:-103px;width:200px;height:200px;border-radius:50%;border:1px solid #fff;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(80deg) rotateY(20deg);transform-style:preserve-3d;transform:rotateX(80deg) rotateY(20deg)}body>div:first-of-type:after{content:"";position:absolute;height:40px;width:40px;background:#fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(0);transform:rotateX(-80deg) rotateY(0);box-shadow:0 0 25px #fff;-webkit-animation:nucleus_ 2s infinite linear;animation:nucleus_ 2s infinite linear;left:50%;top:50%;margin-top:-20px;margin-left:-20px}body>div:nth-of-type(2){-webkit-transform:rotateX(-80deg) rotateY(20deg);transform:rotateX(-80deg) rotateY(20deg)}body>div:nth-of-type(3){-webkit-transform:rotateX(-70deg) rotateY(60deg);transform:rotateX(-70deg) rotateY(60deg)}body>div:nth-of-type(4){-webkit-transform:rotateX(70deg) rotateY(60deg);transform:rotateX(70deg) rotateY(60deg)}body>div>div{width:200px;height:200px;position:relative;-webkit-transform-style:preserve-3d;-webkit-animation:trail_ 2s infinite linear;transform-style:preserve-3d;animation:trail_ 2s infinite linear}body>div>div:after{content:"";position:absolute;top:-5px;box-shadow:0 0 12px #fff;left:50%;margin-left:-5px;width:5px;height:5px;border-radius:50%;background-color:#fff;-webkit-animation:particle_ 2s infinite linear;animation:particle_ 2s infinite linear}body>div:nth-of-type(2)>div,body>div:nth-of-type(2)>div:after{-webkit-animation-delay:-.5s;animation-delay:-.5s}body>div:nth-of-type(3)>div,body>div:nth-of-type(3)>div:after{-webkit-animation-delay:-1s;animation-delay:-1s}body>div:nth-of-type(4)>div,body>div:nth-of-type(4)>div:after{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}@-webkit-keyframes trail_{from{-webkit-transform:rotateZ(0deg)}to{-webkit-transform:rotateZ(360deg)}}@keyframes trail_{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}}@-webkit-keyframes particle_{from{-webkit-transform:rotateX(90deg) rotateY(0deg);transform:rotateX(90deg) rotateY(0deg)}to{-webkit-transform:rotateX(90deg) rotateY(-360deg);transform:rotateX(90deg) rotateY(-360deg)}}@keyframes particle_{from{transform:rotateX(90deg) rotateY(0deg)}to{transform:rotateX(90deg) rotateY(-360deg)}}@keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}@-webkit-keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}

{% endhighlight %}

1.初级阶段：首先基本功要打好，JavaScript 基本功包括闭包，原型，继承，变量的作用域等等。

2.初级到中级阶段：这时候可以学习使用 jQuery，可以使用 jQuery 或者原生的 JavaScript 去实现一些常用的插件，比如轮播，比如选项卡，比如模态框等等。如果自己还想深入一下的话，可以去看看 jQuery 的源码。多找一些静态的页面来做一下。

高级阶段：学习使用一些框架，比如 Angular，React，Vue，ember，backbone 等等，但是记住，框架这个东西只是帮你解决了一些问题，给你的项目带来了一些便利；我们要做的是学习这些框架的思想，如果有时间可以深入的研究一下一两个框架的源码，你会有不一样的发现。还有，框架是一群人一个填坑的成果，不要过度依赖框架。

个人推荐JS路线：JS（原生最重要）- Angular - ES2015 - React - ES2016 - Vue。

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

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

前端性能优化

前端组件化，模块化

前端测试

前端开发流程

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

前端兼容

异步

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

项目技能

开发调试

git，svn版本管理

开发工具

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

grunt， gulp

BDD