个人实践,并深入分析之后总结
本地开发神器
- parcel:支持入口文件 html,快速启动一个本地服务。用于自己写的 js 库快速调试,或者启动包含第三方库的单文件 vue 组件 (踩坑:parcel 自动安装依赖不完整,比如对 scss, postcss 的依赖安装就有问题,0配置跑不起来,非常依赖用户自己安装正确依赖)
- vue-cli:快速开发 vue 相关项目,也支持单体 .vue 文件打包成 lib 库。内部使用 webpack 实现
- webpack:灵活配置,支持大型项目、lib库
抓包工具:chrome-dev-tool、whistle、wireshark
- html
- css
- ✔ cssModule :global、:local、composes继承
- ✔ 深入css-flex布局
- 深入css-grid布局
- ✔ 深入css-fixed、absolute、float
- ✔ 深入css-block、inline、inline-block
- ✔ 深入css-选择器及权重
- ✔ 深入css-vertical-align
- ✔ 居中实现的n种方法
- ✔ 响应式图片
- 常见知识归纳 包含了 css 一些常用知识点:盒子模型、选择器、字体使用、rem等
- 预处理器-less
- css 工具-postcss
- transform 动画
- animate 动画
- 动画-flip flip技术让过渡动画更流畅
- javascript
- ✔ es2015-解构赋值
- ✔ es2015-decorator
- ✔ es2015-模板字符串
- ✔ es2015-Symbol
- ✔ es2015-promise
- ✔ es2015-proxy
- ✔ es2015-set和map
- ✔ es2015-generator
- ✔ es2015-async
- ✔ es2015-class
- ✔ es2015-模块化 import export 关系
- ✔ 深入js-编码规则
- ✔ 深入js-词法作用域
- ✔ 深入js-语句与表达式
- ✔ 深入js-基本类型 包含了数值、函数、对象的关键点总结
- ✔ 深入js-原型与继承
- ✔ 深入js-执行上下文
- ✔ 深入js-闭包
- ✔ 深入js-正则表达式
- ✔ 深入js-内存管理与垃圾回收
- 深入js-this 说明了 this 指向问题
- 深入js-一些功能模拟实现
- ✔ typescript浅尝 ts 基础总结
- nodejs
- node-模块化 模块加载缓存、包装器
- node-process 当前进程属性、方法
- node-cluster 多进程
- node-crypto OpenSSL 加解密实现
- node-threads 工作线程,用于 cpu 密集计算,不适用于 i/o 密集
- node-fs 文件系统
- ✔ node-调试 debugger 能力
- node-error 错误对象
- node-全局对象
- node-http http, http2, https 系列总结
- node-socket net 实现 tcp | ipc 功能,dgram 实现 udp 功能
- node-path 路径解析、拼装
- node-repl 用户交互,需要时再查看 api,一般使用 commander 之类的库实现
- node-buffer 二进制操作工具,同时包含 string_decoder 解码 buffer 为字符串
- node-tls nodejs 对 tls/ssl 的实现,包括密钥、证书等
- node-url URL 的处理与解析
- node-vm 解析和执行 javascript 代码,基于 v8
- node-zlib 提供了对 gzip, deflate/inflate, brotli 的压缩实现
- node-stream 流的原理,包含 readline 逐行读取、实现 stream 的类统计
- node-timer 定时器与事件循环
- ✔ cli工具
- ✔ npm发包
- ✔ koaAPI koa 实现了 http 服务器方面功能,包括 response, request, context 3大api
- koa 进阶 学习 koa 如何使用
- pm2 使用 pm2 管理 nodejs 服务,实现集群模式、监控、日志、热重启等
- 编辑器图片处理与 pdf 生成 图片上传对象存储 + puppeteer 生成 pdf
- 浏览器
- ✔ 深入浏览器-dom
- ✔ 深入浏览器-bom
- ✔ 深入浏览器-浏览器
- ✔ 深入浏览器-事件循环 学习 chrome event loop,包括 macrotask, microtask, gc task, render task
- web 存储
- ✔ 跨域实现的几种方法
- ✔ 浏览器安全 常见 xss 攻击及防御,csrf 攻防
- ✔ 利用无头浏览器实现ui自动化测试 亮点技能 - ui 自动化测试
- 关于前端监控的几点思考
- webComponents webComponents,自定义元素,shadow dom 实现样式隔离
- electron
- 微前端
- ✔ 微前端基础知识
- builder
- ✔ npm基础
- ast的思考
- ✔ webpack基础
- ✔ webpack-模块化
- ✔ vue-cli 源码分析
- ✔ webpack 源码分析-核心流程
- webpack源码分析-热更新原理
- webpack 源码分析-插件 插件工作原理
- webpack 源码分析-tapable
- ✔ webpack-plugin plugin 开发方式
- ✔ webpack-loader loader 开发方式及原理
- vite vite 基本原理
- ✔ vite源码分析-核心流程 vite源码分析-核心流程 dev 完整流程,依赖预构建、按需编译文件
- ✔ babel plugin
- ✔ sourcemap原理 mappings 单元行列映射
- monorepo基础 monorepo 基础学习
- ✔ esbuild 基本功能总结 极速构建工具 esbuild,vite 核心依赖
- 框架
- mvvm 都在用 mvvm ,到底什么 mvvm 是什么?
- 源码解读-antd
- react
- ✔ 源码解读-dva
- ✔ 源码解读-redux
- ✔ 源码解读-react-redux
- ✔ 源码解读-react-router
- ✔ 源码解读-history
- 源码解读-connected-react-router
- ✔ 源码解读-redux-saga
- 源码解读-setState
- ✔ 深入理解virtualDOM
- ✔ 基本使用-react 官网 api + 使用技巧
- ✔ 基本使用-react-router :react-router 4
- ✔ vue vs react : 可以直接参考 vue 及 react 相关知识点
- vue
- ✔ vue生态 router vue-router, 路由使用,路由配置,路由守卫,静态路由,动态路由
- ✔ vue生态 vuex vue 状态管理及其实现原理
- ✔ vue生态 vue-cli vue-cli 插件原理
- ✔ vue 组件通信 vue 组件间的 10 种通信方式
- ✔ vue 组件复用 vue 组件优化:10 种复用方式
- ✔ vue 目录规范 vue 目录规范
- vue2 深入
- ✔ vue深入 - vue代码架构组织分析 vue 代码架构组织分析
- ✔ vue深入 - 响应式系统 vue 响应式系统
- ✔ vue深入 - 数据驱动 vue 数据驱动 vnode
- ✔ vue深入 - 组件化 vue 组件化原理,函数式组件和普通组件的对比
- ✔ vue深入 - keepAlive组件原理 源码解读-keepAlive,来看看它的缓存实现原理
- ✔ vue深入 - 插槽渲染原理 源码解读-插槽渲染,来看看插槽是如何渲染的,为什么说它是类似高阶组件
- ✔ vue深入 - ref注册原理 源码解读-ref,来看看 ref 是如何注册到父组件的,而不是当前 coding 的组件
- vue深入 - compiler vue compiler 编译原理 ast
- ✔ vue vs react vue 基本知识点
- ✔ vue2 边角知识
- ✔ vue3 功能总结
- vue3 深入
- ✔ vue3 compiler vue3 编译流程
- ✔ vue3 响应式系统 track and trigger
- ✔ vue3 渲染流程 核心点在于 createVnode, createComponentInstance, setupComponent, setRenderEffect
- ✔ vue3 setup setup 啥时候执行的?内部属性怎么被 template 访问到的?
- ✔ vue3 状态管理工具 pinia 原理 为什么 composition api 可以直接使用全局共享状态数据?看看 pinia store 利用 esm 能力
- ✔ vue3 组件编码规范
- ✔ vue3 组件ref绑定
- 校验:eslint
- 测试:mocha, karma, jest, enzyme 需要注意的有:注释规范、命名规范、语法规范、文件组织结构规范、接口文档规范、设计文档规范等
- 模拟: mock
- Rxjs: 中文官网
- 可视化
- 性能优化
- 系统性能衡量及优化 系统性能如何衡量、如何优化、chrome-dev-tool
- 性能优化 - webVitals chrome 90 版本推出 web vitals 可视化衡量
- 性能优化 - vue 专栏 vue 专类优化,包括函数式组件、keep-alive 优化等
- pwa
- ✔ webWorkers 亮点技能 - pwa
- ✔ pwa构建 -- 体验
- git
- 设计模式、技巧
- 高阶组件
- Observer模式
- mediator
- 工厂
- 规范
- W3C标准
- ES规范
- 计算机基础
- ✔ 计算机组成原理
- ✔ vultr 搭梯子 科学上网,你懂的
- 操作系统
- 计算机网络
- ✔ http专题 http1, http2, http3
- ✔ 常见 http 状态码、解释及解决方案
- ✔ 七层协议
- ✔ 网络抓包 wireshark
- ✔ nginx 与 反向代理
- 数据结构与算法
- ✔ 冒泡排序
- 二进制
- ✔ 二进制负数表示
- 技术方向
- webGL: 3D
- svg svg 入门学习
- canvas2d: 2D
- webRTC: 实时通信技术
- docker基础: 容器技术
- webAssembly: 提升项目运行效率,能在浏览器中跑的另一种语言
- flutter: 移动应用开发,替代 android ios
- GraphQL: vs restful
- 用户体验
- 人工智能
注:没有链接的表示待发展、学习的技术
目标 + 决策 + 资源配置
目标:清晰明确的目标,知道带来的收益,目标倒推、精细拆解、环环相接
决策:决定下一刻需要立即做的事情,不做哪些事情
资源配置:老板给的资源合理利用
最近了解到的 lowcode, nocode, 前端智能等,对近期火热技术做个了解,看看前端未来的发展路线。
lowcode: 目的是解放前端生产力,让后端、产品、设计都能使用,甚至可以零代码搭建一套系统,提升研发速度。对比组件库 antd, elementui 来说,lowcode 的组件库提供的更完整,可以任意开发一个组件放上去。
包含模块: 从设计端到开发端,形成完整的链路。包含脚手架、可视化交互设计工具、物料库
2022年02月07日 12:24:23
混沌工程:提高分布式、云计算系统的服务高可用工程手段,主要是实现故障注入演练、任务编排、指标分析、系统评分等,常用工具有阿里开源的 chaosblade 等工具
个人成长、长期积累、平缓心态、不能临时抱佛脚影响心态
思考事项
- 职业发展
- 技术学习 80% + 广度学习 20%
技术学习方向: vue3 + esmodule + ts + vite 实践
广度学习:宏观关注前端整体发展方向,前端职业给企业带来的价值、在企业的地位,考虑就业形式、投入产出比。学习个人综合实例提升点,为不断突破做准备
方向:
- serverless
- 低代码平台
- 大前端flutter
- 音视频
- 服务端开发 nodejs
- 可视化 canvas
- webxr 元宇宙
解析
- 通用的基础能力有哪些自己还欠缺的?
空闲时可做的
- 修复 vite 等开源项目 issue,提 pr
- 阅读书籍:提高个人综合能力
- 思考人生,自己在做什么,有什么意义,应该做什么
工作怎么做:
- 主动原则:主动做事、改掉被动接受信息,尽快完成业务开发,就有时间去思考更多信息;主动思考业务效果、拿运营数据、跟各负责人沟通、处理更复杂任务,获取更多信息,不断完善、改善自身能力
- 成长原则:业务任务和学习成长衡量,一边做事,一边挖掘成长点。征战沙场的马比拉磨的马则更有能力。不断复盘
- 价值原则:产出价值的技术,才能得到实践
升级原则:
- 在当前级别,做下一级别的事情
- 做好当前级别事情
学习:
- 碎片化时间,系统学习,而不是碎片化时间碎片化学习
- 心态勇敢:不需要完全准备好才去做,而是边做边学,在日常生活、学校学习、知识竞赛、工作技术挑战等都是一样的
体现工作能力:
- 工作量评估:任务拆分为更细小的,然后通过经验拍脑袋估时;保留一定 buffer
- 负责端到端的任务
- 多引用新技术
参考资料