大专生如何逆袭前端工程师

① 如何成为前端工程师

一、技术的必须的

作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通，类似我字样对前端知识一知半解的，一遇到问题就停下工作就四处搜索解决方案的，首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下（包括搜索引擎），能够完成大多数任务。

以下知识点是作为一个前端工程师必须了解和熟悉的：

• DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

• DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

• 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

• XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。

• 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。

• 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。

• 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

• 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

• HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

• JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识，也还需学会至少一门后端编程语言，让你自己学会如何与后端进行更好的交互。

很多前端工程师对一些库非常的熟悉，jQuery，Bootstrap等，但是对于库的熟悉并不能提现你的优秀，整整优秀的是那些理解库背后的机制，特别是能够徒手写出一个自己的库的人。

真正合格的前端工程师是能实现具体的功能要求，而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。

二、沟通很重要

优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关。在任何情况下，前端工程师至少都要满足下列四类客户的需求。

• 产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求，以及怎样通过他们设计的模式赚到钱（但愿如此）。一般来说，这些人追求的是丰富的功能。

• UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。

• 项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

• 最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道，但他们的反馈意见至关重要；没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。

不要在没有作出评估之前就随便接受某项任务。你必须始终记住，一定先搞清楚别人到底想让你干什么，不能简单地接受“这个功能有问题”之类的大概其的说法。而且，你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理，问一问这个按钮有什么用处，然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师，这种沟通至关重要。

那么，前端工程师应该最关注哪些人的意见呢？答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期，然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上，因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能，必须删繁就简，你怎么跟产品经理解释？再比如，假设某个设计如果不改回原方案可能会给应用程序造成负面影响，你怎么才能说服UI设计师？作为前端工程师，你必须了解每一类人的想法从何而来，必须能拿出所有各方都能接受的解决方案。从某种意义上说，优秀的前端工程师就像是一位大使，需要时刻抱着外交官的心态来应对每一天的工作。

专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。

三、提升无止境

优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

四、前端开发知识架构

• 前端工程师

• SVG/Canvas/VML

• D3/Raphaël/DataV

• 知识管理/总结分享

• 沟通技巧/团队协作

• 需求管理/PM

• 交互设计/可用性/可访问性知识

• 编译原理

• 计算机网络

• 操作系统

• 算法原理

• 软件工程/软件测试原理

• D2/WebRebuild

• NodeParty/W3CTech/HTML5梦工厂

• JSConf/沪JS(JSConf.cn)

• QCon/Velocity/SDCC

• JSConf/NodeConf

• YDN/YUIConf

• MongoDB/CouchDB

• HTML5/CSS3

• 响应式设计

• Zeptojs/iScroll

• V5/Sencha Touch

• PhoneGap

• jQuery Mobile

• CSRF/XSS

• ADsafe/Caja/Sandbox

• 类库模块化

• 业务逻辑模块化

• 文件加载

• CommonJS/AMD

• YUI3模块

• LABjs

• SeaJS/Require.js

• 压缩合并

• 文档输出

• 项目构建工具

• YUI Compressor

• Google Clousure Complier

• CleanCSS/UglifyJS

• JSDoc

• Dox/Doxmate

• make/Ant

• GYP

• Grunt

• Yeoman

• 数据结构

• OOP/AOP

• 原型链/作用域链

• 闭包

• 函数式编程

• 设计模式

• Javascript Tips

• JSPerf

• YSlow 35 rules

• PageSpeed

• HTTPWatch

• DynaTrace’s Ajax

• 高性能JavaScript

• HTTP1.1

• ECMAScript3/5

• W3C/DOM/BOM/XHTML/XML/JSON/JSONP

• CommonJS/AMD

• HTML5/CSS3

• jQuery/Underscore/Mootools/Prototype.js

• YUI3/Dojo/ExtJS

• Backbone/KnockoutJS/Emberjs

• Coding style

• 单元测试

• 自动化测试

• JSLint/JSHint

• CSSLint

• Markup Validation Service

• QUnit/Jasmine

• Mocha/Should/Chai

• WebDriver

• IDE

• 调试工具

• 版本管理

• VIM/Sublime Text2

• Notepad++/EditPlus

• WebStorm

• Firebug/Firecookie

• YSlow

• IEDeveloperToolbar/IETester

• Fiddler

• Git/SVN

• Github/Bitbucket/Google Code

• HTML/HTML5

• CSS/CSS3

• PhotoShop/Paint.net

• JavaScript/Node.js

• JavaScript语言精粹

• IE6/7/8/9

• Firefox

• Chrome/Safari/Opera

• 浏览器

• 编程语言

• 切页面

• 开发工具

• 代码质量

• 前端库/框架

• 前端标准/规范

• 性能

• 编程知识储备

• 部署流程

• 代码组织

• 安全

• 移动Web

• JavaScript生态

• 前沿技术社区/会议

• 计算机知识储备

• 软技能

• 可视化

• 后端工程师

• Unix/Linux/OS X/Windows

• SQL

• MySQL/MongoDB/Oracle

• C/C++/Java/PHP/Ruby/Python/…

• 编程语言

• 数据库

• 操作系统

• 数据结构

参考链接：


http://www.cn-cuckoo.com/2010/01/10/nicholas-c-zakas-talk-about-what-makes-a-good-front-end-engineer-1356.html

JacksonTian/fks · GitHub

② 如何成为一个前端工程师

作为一名前端工程师，必须要掌握的三样东西HTML,CSS,Javascript。这里掌握的意思是，你不需要去借助搜索引擎去完成你的主要任务，当然我没有涵盖到书本，因为在JS发展到现在的，我们已经在里面添加里数不清的接口，你也不可能全部都了然于心。
三者当中你还要比较深刻了解JS中的两大部分，COREscript 和DOM,前者也就是我们经常提到的ECMAscript。你需要知道JS中最不同于其他语言的一些基本概念，诸如原型链，事件冒泡，字面量等，这对于你去了解一些框架有很大的帮助。当然你是不能不懂得AJAX，几乎我没有见过有哪个新型web站是不用这些技术的。另外你还懂得如何去操纵DOM，这个很关键。也是最繁琐的一个地方（繁琐的地方是，当你深入理解到节点类型，map，一堆繁琐的底层API的时候，你就会想哭的感觉，当然很多时候你都不会用到这些东西），当然一般来说它也不是什么难题，多加训练即可。
socket 需要重点理解），只是一些新的扩展性API，在经验当中可以成长。
当你觉得自己概念知识都能够基本掌握的时候，那么请你去实践。多么伟大的代码都要经过实践出真知，它不仅可以给你带来验证，而且它可以让你深刻去理解。
如果你想继续提升自己的能力，那么可以从以下几个方面去提升：
1.阅读别人的程序，理解别人的思路。你可以去使用和阅读框架，当然有人一听到框架就会嗤之以鼻，特别是性能党。我想说框架是个好东西，不过前提是你最好理解底层的东西。
2.优化你的程序，把你的程序做精做简，这是非常考验一个前端工程师的自我修养能力。
3.构建一个后端程序，或许你可以使用node去构建一个服务器，网上有教程手把手教你从基本做起，让你可以很好的贯穿前后端的知识。
4.如果你还有时间，那么可以学些脚本语言提高下自己的能力。作为一名前端个工程师，我们并不是需要你很全面的掌握一切有关计算机的知识，因为那样很不实际。你要相信你的记忆力和精力都是有限的，特别是面对费脑子的计算机。

③ 怎样才能成为优秀的前端工程师

这个问题没有绝对的标准，说说我所认为的优秀的前端：
一，时刻紧随前端界的发展风向，了解并适当掌握新技术，有一定的技术视野。
二，对于浏览器的内核引擎有一定的理解，知道浏览器解析、渲染页面的基本原理。
三，有扎实的HTML, JavaScript, CSS基础，对于像HTML5, CSS3, ECMAScript新标准有全面的认识。
四，掌握各种调试桌面端/移动端/App内嵌页面的方法与技术，有快速定位问题范围的能力。
五，理解HTTP, HTTPS, UDP, TCP协议等，有比较全面的计算机网络知识。
六，对于各种后端语言在不同应用场景下的优劣有自己的见解与认识，知道在什么情况下应该采用怎样的技术选型。
七，知道如何组建出高效易用的前端自动化编译/调试/测试的工程化流程。
目前国内所谓前端工程师还是有好多分支的，有的前端在UED部门，有的在设计部门，有的在技术部门，所以首先要找好自己的定位，在技术部门的你就狂钻研javascript，死扣兼容性问题， 在UED部门你就可以关注一些交互，提高自己的沟通技巧（因为我觉得产品和交互就是耍嘴皮子的），在设计部门你就扣css细节，像素级别的，关注各种布局和效果的技术实现，提高设计稿还原度和效率。
优秀的前端，即能高效准确的还原设计稿，又精通浏览器兼容性问题，同时精通javascript，各种跟后台的数据交互，又广泛涉猎产品和交互设计，能与交互设计是和产品唇枪舌战。

④ 如何自学前端少走弯路

先说一下自学前端如何入门吧。

方法：

第一：理清Web前端的知识结构。要想高效学习Web前端知识，首先应该搞清楚Web前端都包括哪些技术结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。

第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。

路线：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：Node.js全栈开发(1周)

内容包括：(WebApp后端系统开发、一、Node.js基础与Node.js核心模块；二、Express；三、noSQL数据库)

至于视频教程，我这里有很多前端的全套教程，如果你需要的话，可以加一下我的学习交流裙裙，找我要就行了！

⑤ 怎样成长为一个优秀的 Web 前端开发工程师

学习web前端的开发，个人认为大概可以分为以下几个步骤，或者层次吧。首先，基础一定要牢固，主要就是HTML、CSS和javascript，这三者一定要掌握。当然，在初级阶段并不需要对js做太深入的研究，会查手册用jquery库基本差不多。应该把更多的精力放在HTML和css上。由于近年来HTML5和css3的火热，在这方面需要花上更多的时间。 然后，可以抽时间深入的学习一下js，对js的理解程度是评价一个前端工程师是否优秀的重要标准之一，这也是为我们接下来学习前端框架打下基础。对高阶的js掌握得差不多的时候，就去多了解一些框架，比如angularjs，看看jquery库的源码，领悟别人的设计思想。 最后，建议熟悉一门服务端语言，比如php，懂得后台的基本工作原理，这样能够极大的减少前端与后端在交流时的时间成本。

⑥ 转型成为web前端工程师需要学些什么

前端前景是很不错的，像前端这样的专业还是一线城市比较好，师资力量跟得上、就业的薪资也是可观的，学习前端可以按照路线图的顺序，

0基础学习前端是没有问题的，关键是找到靠谱的前端培训机构，你可以深度了解机构的口碑情况，问问周围知道这家机构的人，除了口碑再了解机构的以下几方面：

1. 师资力量雄厚

要想有1+1>2的实际效果，很关键的一点是师资队伍，你接下来无论是找个工作还是工作中出任哪些的人物角色，都越来越爱你本身的技术专业前端技术性，也许的技术专业前端技术性则绝大多数来自你的技术专业前端教师，一个好的前端培训机构必须具备雄厚的师资力量。

2. 就业保障完善

实现1+1>2效果的关键在于能够为你提供良好的发展平台，即能够为你提供良好的就业保障，让学员能够学到实在实在的知识，并向前端学员提供一对一的就业指导，确保学员找到自己的心理工作。

3. 学费性价比高

一个好的前端培训机构肯定能给你带来1+1>2的效果，如果你在一个由专业的前端教师领导并由前端培训机构自己提供的平台上工作，你将获得比以往更多的投资。

希望你早日学有所成。

⑦ 前端工程师从小白到大神要经历哪几个阶段

首先是找到第一份正式工作前的那个阶段，这阶段就是入门，但你再入门都代替不了一份实际的工作。
找到第一份正式工作，几年内主要是实现功能，修bug，做重构，把理论和实践充分结合起来，用各种工具，库和流程，积累经验，套路都懂了。
到某个时候你会发现市场上该接触的东西似乎都接触过了，套路已经满足不了你，你开始对这个技术栈有了自己的见解，搞出来的东西水平高了，能自信的选型，做出靠谱的架构来，设计流程，带带团队的人，这是所谓senior的阶段。每个人情况不同，一般这个过程需要5年以上的积累。
你不会成为大神的，大神是小白臆造出来的糖衣炮弹。行业内的真正大神不是从“前端“开始的，而是大厂里喜欢折腾编译器，设计模式，模式匹配，把functional programming当饭吃的那些人。他们的思路跟你的不在一个层次上。