想学Web前端开发，应该怎么自学？

大厂技术 坚持周更 精选好文

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的. 前端工程师如何解决项目中遇到的难题 作为一名程序员, 我们最基本的任务就是解决公司项目中遇到的问题, 对于前端工程师来说, 任何问题都是可量化的, 也并不是所有问题都能被很好的解决. 所以我们面对难以解决的问题时, 有时候需要做取舍和变通, 换一种形式, 说不定就解决了呢? 比如说产品让我们实现一个类似在线直播的队列动画, 如下:

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

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

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

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

但是像笔者上面的把动画一描述清楚, 其实我们只需要把每一步都实现即可, 也就是拆解 - 组合的过程, 我们很多的前端问题基本都会经历这几个步骤, 关键是作为工程师的我们, 要学会把问题理清楚, 这是实现目标的第一步. 还有很多类似的例子, 笔者再拿如何设计组件来说说如何更高效的解决问题. 前端如何从零设计一个复杂组件 在项目开发中我们不可避免的会用到各种组件和组件库, 比如elementUI, ant design, zantUI等, 但是这些都仅仅只能满足我们基本的页面搭建需求, 实际工作中往往会有各种杂七杂八的业务组件需要我们自己开发, 笔者之前公司中基本自定义组件占到了60%, 如果你觉得自己设计前端组件很吃力, 那么请看看我下面的分享. 笔者之前也自己开发过很多组件库, 关于组件库搭建, 设计的经验之前也做过很多分享, 可以参考如下文章: 从0到1教你搭建前端团队的组件系统（高级进阶必备） 从零到一教你基于vue开发一个组件库 前端组件/库打包利器rollup使用与配置实战 那么我们如何开始设计一个组件呢? 笔者这里来举一个例子: 从零设计一个抽屉Drawer组件.

我们在面对这样一个组件时, 首先要使用笔者上面介绍的方法, 现思考需求, 如下:

明确了需求之后, 我们只需要按照笔者上面分享的文章中的方法去写组件就好了, 这样我们就能把一个庞大的任务, 分解成一个个小任务, 当解决了所有小任务之后, 我们也就解决了真正的大难题. 所以, 有了以上的方法, 你还会觉得做前端很吃力吗? 今天终于有时间更新了, 我们继续来谈谈如何学习前端, 才会不吃力. 之前说到了nodejs, 可以说它已经是前端工程师必备的技能之一了, 我们之前使用的前端工程化工具webpack, gulp, 或者是前端集成解决方案umi, 都离不开nodejs. 笔者在上段工作中也利用nodejs来完成前端体系搭建的.

nodejs的基本使用方式笔者这里就不一一介绍了, 在公众号《趣谈前端》中有非常详细的教程. 笔者这里聊聊nodejs的几个核心api和关注点:

• fs模块
• http模块
• 父子进程 child_process
• 多线程 worker_threads
• websocket

这几个是nodejs开发必须掌握的知识点, 对于nodejs框架来说, 笔者推荐如下:

• koa2
• egg
• nest

这3个框架基本上一线互联网公司用的最多也是集成度和扩张性最好的几个框架. 笔者也在趣谈前端中写了很多nodejs实战的文章, 如下: 复盘node项目中遇到的13+常见问题和解决方案 深入浅出node中间件原理 基于NodeJS从零构建线上自动化打包工作流 还有很多笔者这里就不一一介绍了. 我们再来看看nodejs的实际应用. 笔者在一线公司的经历中nodejs主要用来做中间层和轻服务, 比如

• 做 ssr(服务端渲染技术, vue和react中都有对应的解决方案, 比如nuxt, next).
• 做轻量级web服务器, 比如说托管cms系统, 官网, 用nodejs完全够用
• 做爬虫服务, 笔者公司之前也用了笔者设计的nodejs爬虫来抓取网页中大量有用的数据
• 结合serverless, 对接函数计算
• 监控平台(v8引擎带来的优秀特性)
• api网关
• 数据过滤middleware
• IM即时聊天应用

还有很多, 大家可以多去尝试, 以上介绍的都是笔者曾经深度负责过的项目, 如果感兴趣, 可以和我交流. 对于一名大前端来说, 掌握了nodejs就等于你有了一把利剑, 可以让我们平时觉得麻烦和复杂的问题通过 width idea 来实现, 慢慢地就会发现前端这个门技术, 其实 so easy. 我们掌握了nodejs之后后面还会要考虑性能问题, 因为相比于其他后端语言, nodejs的内存管理和瓶劲还是非常有限的, 所以我们一定要做好优化, 后面笔者会继续介绍一些nodejs的优化技巧. 今天有时间我们继续追更. 上面我们聊到了用 nodejs 赋能前端, 给前端工程师打造核心竞争力, 由于笔者之前也写了很多 nodejs 的实战和开源项目, 笔者接下来先解答一下如何做一个有影响力的开源项目. 作为一名程序员, github 是我们必备的法宝, 在职场中很多面试官会看中求职者的横向发展和对技术社区的了解, 而 github 上的开源项目, 更是加分项之一. 我们用好了 github, 可以让前端开发游刃有余, 因为工作中遇到的80%的问题基本可以在 github 上找到答案. 所以作为前端工程师的我们, 也要好好打造自己的 github.

笔者认为一个好的开源项目一定是经得起时间考验的, 并且与时俱进. 比如我们前端常用的jquery, vue, react, angular这些开源框架和库, 几乎每个技术的发展阶段在不断更新, 不断优化, 努力让自己变得更“完美”. 笔者这里总结一下一个好的开源项目的必备要素:

• 解决了某方面的痛点或者局限
• 代码质量高, 可读性强, 注释完整
• 代码格式规范, 注重测试, 可用性强
• 文档清晰, 详细
• 与时俱进, 持续迭代

做到了以上几个要素, 笔者觉得就是一个好的开源项目. 笔者看了大量的国外优秀开源项目, 基本上都遵循以上几个要素, 反观国内的部分开源项目, 不是刷题的就是面试打开卡的, 有时候格局决定了一个技术人未来的发展. 所以说要想让自己更优秀, 让前端做起来更轻松, 请牢记笔者上面的开源要素5原则. 笔者也开源了很多开源项目, 有 star 超过6000+, 基本上遵循了以上的原则, 大家可以参考一下: 如何评价Dooring低代码/零代码搭建平台？ 开箱即用的前端图片压缩方案 从零开发一款轻量级滑动验证码插件(深度复盘) 从零开发一款图片编辑器Mitu-Dooring 最近我也在不断迭代 H5-Dooring 这个低代码项目, 主要用在可视化拖拽生成H5页面用的, 比如说页面制作, 页面编辑等, 感兴趣的可以研究一下, 我也会在《趣谈前端》中同步我们的最新进展. 所以, 你是不是也想做一个有意思, 也能让自己成长的开源项目呢? 那就赶快用上面说的方法尝试吧. 因为这些项目基本都和nodejs相关, 我后期会总结一下nodejs性能优化的内容, 来帮助大家在开发nodejs项目时游刃有余, 让前端越来越简单. 今天继续追更. 上面我们聊到了如何做开源项目以及如何使用 nodejs 为前端赋能, 接下来我们来聊一聊 nodejs 性能优化. 如何优化我们的 nodejs 性能 ?

从笔者的工作经验来看, 任何语言的性能优化需要从以下几个方面来着手:

• 代码精简, 即无任何无用代码
• 代码复用性
• 执行脚本或算法性能
• 执行模式优化, 比如同步还是异步, 单线程还是多线程
• 数据结构优化

前2点我们很好处理, 作为 nodejs 本身, 我们可以把文件中没有使用的模块删除, 可全局复用的代码抽象到通用库中, 并做好模块命名和划分, 因为其本质上是 javascript 语法, 所以我们从语言层面可以用 javascript 的方式优化, 笔者也总结了一篇详细的性能优化的文章: web性能优化的15条实用技巧 对于脚本的执行性能, 我们可以参考函数式编程范式, 比如 ramda, lodash 这两个库, 对于计算性能, 一直不是 nodejs 的优势, 所以如果有大数据处理的业务, 我们可以选择性能更优的算法, 比如查询算法有二分法, 排序算法用快速排序, 归并排序或者希尔排序, 笔者之前也做过不同算法的性能对比和实现方案, 感兴趣的可以在研究学习一下: 《前端算法系列》如何让前端代码速度提高60倍 再者就是执行方式的问题. 考虑到 nodejs 是单线程的, 所以在处理耗时任务时需要排队, 如果有大量耗时任务可能会让 nodejs 服务器荡机, 好在 nodejs 目前也有多进程的替代方案 child_process, 所以对于耗时任务, 我们可以采用父子进程通信的方式, 让子进程处理, 主进程正常处理其他业务请求. 笔者在多个 nodejs 项目中都采用了该方案, 大家可以参考一下.

它能让我们更快速的操作json, 并遵循优雅的数据结构. 其次我们还可以用流(stream)的方式读文件并返回给客户端, 这对大文件读写非常有用. 今天继续更新. 接下来我们聊聊让前端学习变得更轻松的工程化管理. 如何用nodejs做前端工程化管理 首先笔者认为前端工程化主要要解决如下问题:

• 制定编码规范, 让团队有章可循
• 代码管理规范, 如制定版本管理策略, 提交策略, code review
• 技术选型规范(制定合适的技术选型是提高团队效率, 降低维护难度的必备法宝)
• 代码测试(测试框架通常提供BDD(行为驱动开发)和TDD(测试驱动开发)两种测试语法)
• 前端自动化

以上几点是任何有技术追求的前端团队都会考虑的问题, 笔者之前也做过大量实践, 在开发: 深度思考: 如何做好一个开源项目? 项目中也做了大量应用, 这里笔者主要分享 Nodejs 在其中扮演的角色. 我们目前的前端工程化主要使用 webpack, gulp, rollup, vite等, 他们底层都和 nodejs 有或多或少的关系:

比如团队自建cli工具, 结合模块打包工具做定制化的项目工程, 活动配置系统等, 这些用nodejs可以轻松实现, 结合 shell脚本, 可以让技术选型在项目中灵活切换. 笔者也总结了一篇文章, 感兴趣的可以了解一下: 30分钟教你使用nodeJs开发自己的图床应用 如何开始serverless之旅 前段时间一直忙着工作和开源lowcode项目H5-dooring, 终于赶上清明小长假, 继续的更新我们的“如何让前端不再吃力”. 接下来我们讨论的是这几年比较火的技术serverless. 伴随这国内外云服务厂商的“服务云”的不断完善和升级, Serverless这一技术也不断浮出水面. Serverless不代表再也不需要服务器了，具体突出的是：开发者再也不用过多考虑服务器的问题，计算资源作为服务而不是服务器的概念出现。Serverless是一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。 Serverless是思维方式的转变，从过去：“构建一个框架运行在一台服务器上，对多个事件进行响应。”变为：“构建或使用一个微服务或微功能来响应一个事件。”，我们可以使用 前端工程师最熟悉的 node.js 及其上层框架express等实现，框架变得也不那么重要了。

其对企业来说解决的最大痛点就是应用部署成本和相应速度, 我们使用函数计算可以将服务器成本降到最低, 并且应用服务的部署级别可以降低到函数单元, 这样极大的提高了需求的响应速度, 如下:

所以说学习Serverless 将是前端工程师进阶必不可少的环节, 因为不同函数计算提供厂商对serverless的内置使用结构略有差异, 这里没办法形成统一的学习经验, 所以笔者推荐一个学习函数计算的网站, 大家可以学习参考: https://serverlesscloud.cn/ 当然Serverless学习成本不是很高, 大家不用过度担心, 认真学好nodejs就好了. 这段时间一直在迭代H5-Dooring| H5编辑器 , 终于有空继续更新这个问题, 接下来我来谈谈如何在职场上快速成长. 如何在职场上快速成长 进入任何一家公司都意味着你需要迎来一次新的革新, 我们需要快速适应公司的环境, 节奏, 职场氛围, 作为前端工程师, 想在职场中轻松的应对各种问题, 一定要积极主动的去学习“公司文化”. 一方面是技术, 一方面是人文. 作为一名有追求的技术职场人,第一步要做的就是驾驭公司的技术, 我们需要投入大量精力快速适应公司技术和需求的更迭, 这样才能让我们在公司有个稳定的地位. 其次就是积极主动的去适应公司文化, 为公司的业务发展做出自己的贡献, 这也是职场晋升的第一步, 同时也要处理好同事关系, 并且持续学习, 以下是一个实用的学习模型, 送给大家:

在你进阶为技术管理岗位后, 考虑的就不是个人发展的问题, 而是团队发展的问题. 我们需求带领技术团队走向成功, 所以要培养更优秀的人, 比如定期做技术分享(2周一次比较合适). 好啦, 今天的分享就到这, 如果你也在技术之路上有一些疑问, 欢迎随时和我交流.