Blog
个人实践，并深入分析之后总结
本地开发神器
- 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 基本原理
✔ babel plugin✔ sourcemap原理 mappings 单元行列映射- monorepo基础 monorepo 基础学习
- 框架
- 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 响应式系统 track and trigger
- vue3 渲染流程
- 校验：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
- 用户体验
- 人工智能
注：没有链接的表示待发展、学习的技术
1 运营
目标 + 决策 + 资源配置
目标：清晰明确的目标，知道带来的收益，目标倒推、精细拆解、环环相接
决策：决定下一刻需要立即做的事情，不做哪些事情
资源配置：老板给的资源合理利用
2 lowcode 思考
最近了解到的 lowcode, nocode, 前端智能等，对近期火热技术做个了解，看看前端未来的发展路线。
lowcode: 目的是解放前端生产力，让后端、产品、设计都能使用，甚至可以零代码搭建一套系统，提升研发速度。对比组件库 antd, elementui 来说，lowcode 的组件库提供的更完整，可以任意开发一个组件放上去。
包含模块: 从设计端到开发端，形成完整的链路。包含脚手架、可视化交互设计工具、物料库
3 个人发展
个人成长、长期积累、平缓心态、不能临时抱佛脚影响心态
3.1 最近具体发展事项
思考事项
- 职业发展
- 技术学习 80% + 广度学习 20%
技术学习方向: vue3 + esmodule + ts + vite 实践
广度学习：宏观关注前端整体发展方向，前端职业给企业带来的价值、在企业的地位，考虑就业形式、投入产出比。学习个人综合实例提升点，为不断突破做准备
方向：
- serverless
- 低代码平台
- 大前端flutter
- 音视频
- 服务端开发 nodejs
- 可视化 canvas
- webxr 元宇宙
解析
- 通用的基础能力有哪些自己还欠缺的？
3.2 一些原则
工作怎么做：
- 主动原则：主动做事、改掉被动接受信息，尽快完成业务开发，就有时间去思考更多信息；主动思考业务效果、拿运营数据、跟各负责人沟通、处理更复杂任务，获取更多信息，不断完善、改善自身能力
- 成长原则：业务任务和学习成长衡量，一边做事，一边挖掘成长点。征战沙场的马比拉磨的马则更有能力。不断复盘
- 价值原则：产出价值的技术，才能得到实践
升级原则：
- 在当前级别，做下一级别的事情
- 做好当前级别事情
学习：
- 碎片化时间，系统学习，而不是碎片化时间碎片化学习
- 心态勇敢：不需要完全准备好才去做，而是边做边学，在日常生活、学校学习、知识竞赛、工作技术挑战等都是一样的
体现工作能力：
- 工作量评估：任务拆分为更细小的，然后通过经验拍脑袋估时；保留一定 buffer
- 负责端到端的任务
- 多引用新技术
参考资料