vlambda博客
学习文章列表

一年内的前端看不懂前端框架源码怎么办?

不建议直接看已经迭代了这么多大版本的框架源码,如果想看源码,可以循序渐进的看。

第一步:可以从lodash这种工具库开始看,因为都是比较小块的函数,比较好上手理解,也容易调试看效果。还可以补足自己的基础,例如节流、防抖、深拷贝等。另外还推荐30 seconds of code,全是小而美的代码片段,有些lodash的函数可以用这个替代。


第二步:找到了看源码的感觉后,再去看某个类库的源码,比如说redux、moment这种,功能专一同时也兼顾深度。

一年内的前端看不懂前端框架源码怎么办?

一年内的前端看不懂前端框架源码怎么办?

第三步:这时候自己有了一定的基础和感觉了,可以再去看现在mvvm框架实现的原理,也是从单一的功能开始,拆解mvvm框架的通用实现模式,如双向绑定、虚拟dom等,最后实现自己的mini mvvm。



第四步:这时候你具备了看react、vue这种框架的能力了,最好还是带着问题去看,比如看react fiber的原理、如何渲染的,setState怎么操作等等。



最后:可以试着参与到开源框架的开发中来,对preact、vue等框架进行一些issue的修复和功能的迭代。如果觉得过于困难,可以对react或者vue周边生态的库进行pr,经过前面的这么多铺垫,这时候也可以释放自己创造力了,可以试着做一些对标业界开源高质量的轮子。



但是,在实际的业务开发中并没有多少造这种轮子的机会,抛开具体的知识点,大家的关注点会更多的放在能够产生业务价值的事情上,如果想摆脱页面仔的称号,还有很多其他方向,值得研究和学习

  • 各种多端秒开方案、性能优化相关


  • 工程化套件(脚手架、开发调试工具、发布管理)(建议先熟练使用webpacl和babel)

  • 数据埋点/监控

  • 多端融合(包含 H5/iOS/Android/小程序 )

跨端开发框架如腾讯的omi、京东的taro和滴滴的Chameleon

更加偏底层的有Weex、RN、Flutter


  • 组件库、pro code、low code方案

组件库有基础组件库和业务组件库,基础组件像ant design这种已经非常的成熟了。实际业务中可能会根据场景去封装基础组件库构成业务组件、通用模板等。

pro code: 以 ant design pro这种为代表,相当于一个开箱即用的中后台系统

low code:一般是可视化搭建的形式生成前端代码,一般只能做比较简单的场景或者和业务耦合的也比较严重,目前没有好的开源的产品

  • 互动平台,包括各种2d、3d的动效, 前端图形,直播等


动画动效路线: js/css动画 -> svg动画 ->  lottie-web

  • SSR、微前端方案


  • BFF、Serverless、以及BFF in Serverless


  • 灰度平台/ABtest等等


  • 职场生存必备软技能




最后的最后,还是回到业务, 个人离开来业务可以存活,公司离开了业务是活不了的,一般的业务是重后端的,这里只说下前端有哪些可以驱动业务的地方(也就是业务代码之外你的价值体现)

  • 提效

    • 业务组件库,业务代码中可直接开箱即用,这种组件库一般不通用,因为包含了业务属性了,每个业务线可能都有自己的封装

    • 丝般顺滑的开发体验(对开发构建工具,业务脚手架,打包发布流程,多端开发一致性都有要求,这里有很多东西可以搞)

    • 可视化搭建系统,从最基础的表单可视化搭建到系统级的procode和lowcode

    • 前后端一致的协作规范(文档,api管理等)

    • 业务工具集(一般都是些小工具,解决某块业务的特定问题)

    • 新技术的引进,这个一定要评估好目前开发的痛点再考虑引入,如hooks,TS,graphql

  • 性能优化

  • 可视化工具

    • 各种BI工具,如报表拖拽平台

    • 大屏可视化

  • 各种监控系统

    • 这个已经被做烂了

  • 端侧数据采集及分析

    • 可视化埋点

    • 全埋点

    • 数据分析,业务报表制作,业务方向牵引

  • BFF架构

    • 这块需要和后端商量好,首先是先有痛点,再去引入BFF层

      以上内容我已经打包好了在小助理这可以获取