课程链接：https://www.itwangzi.cn/3238.html

hello, 大家好, 我是徐小夕, 之前很多朋友问我前端应该怎么学, 怎样才能提高前端开发的段位, 作为一名非科班出生的前端程序员, 这里分享一下我对自学前端的看法.

非科班生如何快速逆袭, 成为独当一面的前端工程师?

就拿我本人的亲身经历来说吧

大学读的是工业&设计相关的专业, 对工业制造, 精益生产, 工业产品设计有一定的造诣, 但是和互联网领域比如前端, 后端, 运维这些工种还是差点距离的, 可以说是格格不入. 唯一的优势就是数学比较好.

所以要从事前端行业, 我算是名副其实的非科班生了, 但是通过自己的毅力和坚持不懈, 在一线互联网企业摸爬滚打几年, 也取得了一些成绩, 比如做过前端负责人, 架构师, 受邀参与过一些技术大会, 做分享嘉宾, 在技术论坛分享了很多技术干货, 做过技术社区“签约作者”, 开源项目接近1w的star. 接下来我会分享一下我自学前端踩过的一些坑和学习心路.

1. 从大学实习过渡到第一份前端工作(小白阶段)

在大三研究了几个月的前端之后成功的进入一家公司实习, 当时用的jquery开发官网, 因为当时jquery生态非常熟悉了, 交给我的工作又不是很难, 我也就成功度过了实习期, 觉得前端也就那样.

后面因为实习和在校有不错的经历, 笔者成功进入了员工达到3万+的所谓的“大公司”, 刚入职的一个月里由于公司用的vue和typescript, 这块自己又不是很熟悉, 所以吃了很多苦头, 瞬间碰壁的感觉真是“爽歪歪”. 那个时候我们主要做ERP系统, 业务比较复杂, 需要有很强的技术功底和逻辑思维能力, 所以笔者也是哪里不会补哪里, 跟着自己的师傅从最基础的开始, 写页面. 这个阶段(也就是小白期)主要需要掌握的技术点如下:

• js面向对象编程
• js组件化设计思路
• vue基本使用以及如何写好可复用的vue组件
• js常用工具库如lodash, moment 基本使用
• 如何编写js插件(常用的jq插件编写, js原生插件写法)
• 如何做到html5的语义化结构化, 如何使用oocss(面向对象的css)编写css
• git版本管理工具的使用和分支管理流程

由于实习期间都是用的jq和jq插件, 所以当时只能算个api调用工, 在第一份工作经历中让我学到了很多企业级产品的开发规范. 后面因为自己所在的事业部濒临倒闭, 自己手里又没什么活, 就主动辞职了. 笔者后面也将自己的工作总结整理出来了, 希望可以帮助到大家:

原生javascript组件开发之Web Component实战

《javascript高级程序设计》核心知识总结

二. 真正的互联网公司(小白成长期)

后面去了一家纯互联网公司, 我主要参与的是游戏板块和小程序的开发, 也就是当时18年比较火的《贪吃蛇大作战》, 当时听说有3亿多用户, 心里很激动, 但是小程序当时只是了解了点皮毛, 所以又进入了一轮水生火热中. 在开发者游戏内的H5页面,过程中, 确实让我学到了很多js和css3实现的动销效果, 因为游戏应用对交互和适配要求很高, 所以一方面我疯狂的补充css知识, 一方面思考js逻辑.

在做小程序的时候, 也是费劲了周折, 当时小程序对es的支持还不是很好, 所以代码里既有es6的语法,也有es5的, 记得之前涉及的技术点有 canvas画图, 支付接功能, 语音识别接口, 直播api等. 具体知识点总结如下:

• css3 布局(flex, grid), 动画(transition, animation), 媒体查询(@media)
• js实现页面适配和兼容方案
• 熟悉使用vue开发WEB工程
• 熟悉小程序基本开发流程和常用api使用
• javasript实现H5游戏的基本思路和方案

虽然技术在飞速提升, 但是加班非常严重, 现在如果有人问我: 还记得武汉凌晨1点的样子 ? 我会直接说: 4点的样子更美.

这段时间也积累的很多知识, 笔者也有总结, 还有很多总结至今还在我的草稿箱里.

用css3实现惊艳面试官的背景即背景动画（高级附源码）

使用Javascript和Css3实现一个转盘小游戏(实战篇)

2年vue项目实战经验汇总

教你用200行代码写一个爱豆拼拼乐H5小游戏（附源码）

三. 进阶中高级前端工程师(中高级成长之路)

由于之前的积累和对技术的追求, 笔者决定来上海看看. 后面也是花了几天找到一个还算不错的上市公司, 开始了技术之旅. 由于公司有很多产品, 有千万级用户的内容平台, 也有针对B端企业Saas系统, 但是公司前端技术栈基本采用了React, 由于之前都是偏 vue 的, 所以又得重头学起, 但是我们主管对我印象还行, 给了我一周时间熟悉项目, 后面我发现 react 其实使用模式和 vue 很像, 而且之前对写js逻辑已经非常熟悉了, 所以学 react 的 jsx 非常顺利, 到接手内容平台只花了3天时间.

公司对技术要求还是非常高的, 因为要承载接近百万的日活, 所以对性能, 页面体积做很大的投入, 后面还接了神策大数据, 阿里监控等, 当时感觉自己欠缺的东西还是太多了.

由于之前有H5开发经验, 我既参与内容平台的开发, 也负责公司混合app的开发, H5活动页的开发, 当时自己心很大, 感觉啥都想学, 周六日也泡在公司, 从此慢慢建立起了一套时间管理体系(被自己折磨的). 虽然期间也发生过很多故事, 但是依然是在成长, 同样自己也做了很多总结以及知识点梳理:,如下:

• 混合H5开发的一般模式, 与 native 的通信机制
• react基本开发模式以及如何做优雅的组件开发
• 如何做WEB性能优化
• 如何使用神策埋点监控并分析你的app
• 如何使用ssr技术
• 如何做好前端工程化

这些知识点需要一定的时间去消化, 笔者先后也总结了很多, 如下:

js基本搜索算法实现与170万条数据下的性能测试

web性能优化的15条实用技巧

从0到1教你搭建前端团队的组件系统（高级进阶必备）

以上还有很多没有一一列出来, 感兴趣的可以在《趣谈前端》知乎专栏中学习.

高级前端工程师(独当一面阶段)

后面经历了很多事情之后(就当是技术天花板吧), 决定跳槽到一家做人工智能的小公司, 当时的leval为A2(每个公司评级不一样), 也就是高级工程师. 在公司的3个月里, 从零搭建起了公司的前端体系, 包括组件库, 前端工程, 工具库, 脚手架等, 由于成功开发出了公司中台项目的渲染引擎, 后面得到总监的认可把我直接提拔为公司的前端leader, 陆陆续续开始参与招聘,面试, 管理团队, 研发和攻克新技术等, 此时的我对技术生态有了更丰富和深入的认知.

今天终于有时间继续更新了, 技术人的一生还是很不容易的. 我们接着从高级前端工程师说起. 笔者在入职之后遇到的第一个难题就是做技术选型. 因为公司之前没有一个完整的前端体系和架构, 所以需要从已有的产品业务和后端架构来分析, 什么样的技术选型比较合适. 刚开始是打算用 Vue 生态去构建, 也就是我们比较熟悉的 Vue + Element + vue-router + vuex这套, 因为我们核心产品是中后台产品, 所以一般的中后台产品快速开发比较适合用这套方案, 但是由于笔者之前待得公司技术栈用的是react和angular, 所以笔者花了一天时间做了份react和vue框架的技术调研:

再结合公司项目架构, 属于业务高复杂, 多系统协同互通模式, 后期很可能会演变成微前端架构, 当时vue对这块还没有很好的解决方案, 综合考虑笔者还是选择了灵活度更高的react.(现在想起来react确实没选错~), 这里附上一个笔者总结的微前端的模式架构图:

笔者也总结了一篇关于微前端的文章, 大家可以参考学习一下:

微前端架构初探以及我的前端技术盘点

xxxx 在确定好技术选型之后, 就要开始基项目架构的搭建和代码规范了. 目前是有两种方案:

• 采用市场上已有前端脚手架工具搭建前端项目和整体架构
• 自己利用webpack4 + babel + nodejs搭建项目工程

第一直觉是采用的第二种方案, 因为这样对项目的把控能力更灵活更可控, 笔者也做了一份webpack4和gulp4搭建项目的总结, 大家可以学习参考一下:

用 webpack 4.0 撸单页/多页脚手架 (jquery, react, vue, typescript)

由于中台项目的复杂性, 我们还要采用一个比较成熟的状态管理库来管理公共状态, 目前React生态比较成熟的解决方案有:

• redux + redux-thunk(同步+异步)
• redux + redux-saga(同步+异步)
• dva
• mobx

在对比了这几个库之后, 笔者决定尝试用dva(当时自己也没用过, 笔者之前的经历一直都是thunk或者saga), 对于dva又出现了比较成熟的集成解决方案umi, 研究了umi之后发现确实已经满足公司已有业务的需求了, 所以笔者后面的技术方案都采用umi来做了. 所以最后确定的方案如下:

• umi + react16.7 + dva + antd3.0(后面由于antd4.0出现了, 所以又迁移到4.0).

又到周五了, 今天继续更新.

上面我总结了前端工程师不同阶段需要具备的能力, 项目技术选型方案以及如何成长为高级工程师. 接下来我继续介绍一下项目中如何解决项目难题的一些思路以及如何被提拔为技术leader的.

前端工程师如何解决项目中遇到的难题

作为一名程序员, 我们最基本的任务就是解决公司项目中遇到的问题, 对于前端工程师来说, 任何问题都是可量化的, 也并不是所有问题都能被很好的解决. 所以我们面对难以解决的问题时, 有时候需要做取舍和变通, 换一种形式, 说不定就解决了呢?

比如说产品让我们实现一个类似在线直播的队列动画, 如下:

我们拿到这个动画时很多时候并不知道如何下手, 如何去拆解这个动画效果, 因为仔细分析你会发现这个动画分为以下几个部分:

动画一共分为以下两个过程:

• 用户进入动画
• 用户淡出动画

还有一个细节就是不管进入多少个用户, 都是从同一个位置进入的, 此时上一个用户位置会上移,如下图所示:

但是像笔者上面的把动画一描述清楚, 其实我们只需要把每一步都实现即可, 也就是拆解 - 组合的过程, 我们很多的前端问题基本都会经历这几个步骤, 关键是作为工程师的我们, 要学会把问题理清楚, 这是实现目标的第一步. 还有很多类似的例子, 笔者再拿如何设计组件来说说如何更高效的解决问题.