网站建设、公众号开发、微网站、微商城、小程序就找牛创网络 !

7*24小时服务专线： 152-150-65-006 023-68263070 扫描二维码加我微信

前端开发技术团结互助，让我们共同进步！

当前位置：主页 > 技术资讯 > 开发技术 > 前端开发技术 >

我们的优势： 10年相关行业经验，专业设计师量身定制设计师一对一服务模式，上百家客户案例！企业保证，正规流程，正规合作 7*24小时在线服务，售后无忧

一名合格前端工程师的进阶指南分享

文章来源：微信公众号围观次数：

分享到:

摘要：本文作者王超，现任快狗打车（原58速运）前端负责人。先后任职于人人网、奇虎360，8 年互联网大厂工作经验。本文将以王超的亲身经历讲述，为什么工程化是前端 leader 的必修课

本文作者王超，现任快狗打车（原58速运）前端负责人。先后任职于人人网、奇虎360，8 年互联网大厂工作经验。

从 0 到 1 组建了快狗前端团队，负责团队技术体系的搭建，形成了以 Webpack 和 Vue 为基础、 Node.js 中间层为补充的，自动化、工程化、组件化的快狗前端技术体系。

本文将以王超的亲身经历讲述，为什么工程化是前端 leader 的必修课

前端工程化是现代前端的必备技能

Web 前端这几年进化速度之快让人咂舌，很多前端工程师都不禁吐槽“学不动了”。

如今已经不是 HTML、CSS、JS 前端三剑客仗剑走天下的时代了。

以我的亲身经历举例。我在 2011 年左右进入前端领域，当时工作的主要内容是，将设计稿切图转成静态页面，然后用 jQuery 插件实现一些页面的轮播图、跑马灯等交互效果。

最后使用后端的模板语言如 Smart、Velocity 等将静态页面添加页面逻辑，代码交给服务端同学完成上线。整个过程中，JS 框架以 jQuery 为主，CSS 顶多用一下 Less。

再来看一下如今的前端工作方式，以我所在的快狗打车前端团队为例进行说明。前端的开发框架以 Vue 为主，使用 Webpack 解决接口 mock、代码检查、代码编译、构建、压缩、添加版本号、部署等全流程的工作。

涉及到的技术点有 Vue、Vuex、ESlint、stylelint、Mock、Webpack、Sass、PostCSS 等。对前端的要求相比几年前已经从单纯的 JS、CSS 问题变成了更多工程化为主的问题。

前端工程化是一个很大的话题，甚至到现在都没有一个准确的定义。我个人对前端工程化的理解是：“一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。”（原文句子参见我的课程内容）

前端工程化解决哪些问题？

在前端领域越来越繁荣，越来越复杂的今天，学习前端工程化又能给我们带来哪些好处呢？

1. 极大提升开发效率

前端工程化的演进可以极大地提升开发效率。前端发展到现在，社区涌现出大量的优秀框架和工具，得以将前端工程师从繁重的工作中解脱出来。

举个例子，同样地给一个 dom 元素绑定一个 click 事件，使用纯 JS 可能这样做：

我们引入 jQuery 的情况下，就简单了许多：

如果在 Vue 中，既简单又清晰：

如果有大量的事件绑定，却没有开发工具的支撑，将有大量重复的代码需要写，想想就头疼，其效率之低可见一斑。

2. 降低大型项目的开发难度

首先前端工程化中提倡模块化、组件化。

模块化的思想将大型项目的功能进行分解，分拆成一个个独立的模块。每个模块的开发难度直线下降。同时基于版本控制工具 Git，多个开发者可以并行开发，提升开发效率。项目在后期迭代的时候，由于每个模块相对独立，耦合性极低，一个功能的调整往往只需要修改其中的一个模块就可以，风险可控。不至于出现改动一处代码，引发全局问题的情况。

其次，前端工程化提倡用完善的流程规范和代码规范来保证大型应用的质量和可维护性。

比如通过 ESlint、stylelint 对代码进行自动校验，通过评审、详细设计、开发、联调、测试、上线等每个环节的控制，确保项目的高质量和按时交付。向主分支合并代码必须经过 code review。流程规范确保了大型项目质量和可维护性的同时能够如期交付。

所以，应用前端工程化的项目，往往能够更好地规避风险，分散流程压力，降低开发难度。

3. 更易获得面试官青睐

前端的岗位技能已经发生深刻的变化。有人甚至戏言成前端工程师为前端配置工程师。

fouber（张云龙）曾经在自己的博文中说：“前端是一种技术问题较少、工程问题较多的软件开发领域。”

依稀记得六七年前的前端面试题大概是这种风格：“如何实现水平垂直居中？”“js 事件委托的原理是什么？”“常见的 css hack 方式有什么？”，“$(function(){}) 与 window.onload 有什么区别？”

而今天遇到的面试题大概是这种风格：“能讲下 Vue 实现双向数据绑定的原理吗？”，“Webpack 中如何配置 Babel？”，“promise 和 await/async 的区别是什么？”

面试问题关注的层次已经有了很大差别。

如果想进入大公司工作，前端工程化更是需要具备的基本素质。大公司的业务往往非常复杂，而且对稳定性的要求极高。与之相对应的前端工程化程度很高，各种配套的基础建设很成熟。

比如美团点评体系化的工程化方案、移动组件库 Vix、自动化测试工具 Freekite、Hybrid 功能体验的解决方案 Titans 等。

想得到大公司的青睐，候选人需要在前端工程化领域有较深的积累。

谁需要前端工程化？

初中级前端工程师

初级中级前端工程师工作经验较少，技术的宽度和广度都不足，一上来整体掌握前端工程化肯定是有困难的。所以对于这部分同学来讲，首要的事情要学会去“用”，循序渐进地去了解其中的原理。

例如在开发之余，自己学一学如何实现一个简单的脚手架工具，了解一下日常开发必备的脚手架是如何实现的，以点带面地学习里面用到的技术点。

期望晋升的前端工程师

前端工程化能力也是一个资深前端的必备技能。工作好多年了，如果连前端工程化都知之甚少，甚至连一个基本的脚手架都不能自己搭建，怎么能带领团队呢？如果去参加公司的晋升，也是没有说服力的。

想要晋升高 T，必然需要在效率和性能优化等方面有深厚的积累和贡献。

所以，无论你是处在什么阶段，深入了解一下前端工程化都是极有必要的。

本文由微信公众号整理发布,转载请保留出处，内容部分来自于互联网，如有侵权请联系我们删除。

相关热词搜索：前端工程师进阶指南分享

上一篇：关于百度编辑器ueditor保存后图片浮动失效的问题
下一篇：前端开发的未来在哪里？-来自一个10余年前端从业者的自述

关于我们

重庆牛创网络科技有限责任公司是一群技术强大、思维活跃、拥有创新精神的年轻人创立，公司致力于为企业提供全面、周到、专业的互联网解决方案，提供网站建设、网络推广、网络安全审计、wifi营销认证、网站运营维护、域名注册、虚拟主机、企业邮局、企业形象设计等多种信息产品和服务。

联系我们

公司电话： 023—68263070
办公地址：重庆市北碚区金华路399号
邮箱：120481297@qq.com
技术咨询：15215065006

“互联网+”方案

重庆网站建设

备案图标渝ICP备19004889号-1 渝公网安备 50010902000896号

行业安全认证

前端开发技术团结互助，让我们共同进步！

一名合格前端工程师的进阶指南分享

热门资讯

关于我们

联系我们

“互联网+”方案