前端工程师是怎么练成的

hti

　　本人Sam。启蒙微软派，遁入前端教。已修炼后端技能、领域驱动设计、前端技能等近八余载。擅长C#，领域驱动设计，必杀技为Javascript、Css。为领域驱动设计在前端教的应用而奋斗。现将自我领悟的前端教技能秘笈总结如下：
　　上图咯：

内功心法
　　前端教的三大内功秘笈：Html、Css、Javascript。你必须要掌握的程度

• html：他是Css和Javascript秘笈的根本，没有他Css和Javascript就无法施展其魅力。他包含了标签语义、BFC和IFC标签、h5新功能（如：cnavas、video、websocket、localstorage等）等。
  
• css：他有静态装饰html元素能力，css3的出现也让他做了一Javascript的事件。你需要区分css2.1与css3的差异。
  

　　在css2.1的领域中display(改变元素的BFC和IFC的能力)、float(让元素浮动)、position(定位)、z-index(层级)、vertical-algin(垂直对齐)、Margin和Padding等很重要。而在css3的领域更加完善了background、transition(过渡)、animation(动画)、linear-gradient（渐变）、shadow(阴影)、flex布局、媒体查询的支持、多设备适配的单位等，这些你都需要掌握。

• javascript：他是三大秘笈中最难，也是最致命的技能，什么怪都能打。
  

　　es5存在了很多年，es6火得很快，es7又来了。es5虽然很古老，他也是一切罪恶的根源，es6与es7都是为es5解决一些复杂场景应用的问题。在es5领域中的闭包、this指向、自执行函数、执行上下文、Js与Dom的关系等很重要，在es6的领域中，Class、let、Promise、Generator等太多东西，这些你都需要深入理解和掌握。
下山
　　完成上述内功心法的修炼，我们就可以进入下一个阶段，下山打怪。
　　在这里我们需要解决掉一个css框架、一个javascript框架，css框架推荐选择当下流行的bootstrap，他是集合了所有怪物的特点于一身。javascript框架推荐选择框架老祖JQuery，虽然现在都MV*了，但是JQuery的江湖地位还是首屈一指的。对于这两个框架我们需要深入理解他的源码，并对每一个值得学习的细节做好笔记。

• boostratp要学习他对css应用场景的分类，如：字体、按钮、表单等，更要掌握他利用样式叠加实现各种效果的组合技能。
  
• JQuery要学习他的Promise(Es6会原生实现)、Extend方法，链式调用、callback、css相关Hack的处理手段等
  

制造怪物
　　在制造怪物之前，我们还需要了解当下流行的MV*框架，他是未来处理前端项目的首先，在这里我们思想要有所改变，要时刻记住只有viewModel才能驱动view的改变，以及Flux概念的理解和应用。

• 选择一个MV*框架深入学习，如：Vue，React，AnglerJs等。
  
• 学习Nodejs做为前端开发工具的应用
  
• 学习一门户后端语言，推荐nodejs。可以做到一份代码多端运行，也就是同构方案
  
• 前端自动化工具的使用，如karma，eslint，webpack，phantomJs，selenim webdirver等 完成上述技能后，就可以选择一个业务领域进行自己框架的开发了。
  

修炼成仙
　　完成前三步已经是江湖高手了，在这里主要是把我们渡为神，如下就是神所需要具体的能力

• 对浏览器解析原理的深入理解，了解各浏览器内核，如：webkit，Gecko等，折腾源码建议选择webkit相关的。
  
• Javascript解析原理的深入理解，首先V8引擎
  
• 建议选择chrome开源版本的chromium学习和应用
  

　　此文为本人转型前端两年来的自我实践总结，如有偏颇欢迎指正。也许我们会在某个阶段停留很久，但不要气馁，相信自己一定会突破难关。为自己，更为同样身在泥潭中的战友，共勉。