Blog

个人实践，并深入分析之后总结
本地开发神器

1. parcel：支持入口文件 html，快速启动一个本地服务。用于自己写的 js 库快速调试，或者启动包含第三方库的单文件 vue 组件 （踩坑：parcel 自动安装依赖不完整，比如对 scss, postcss 的依赖安装就有问题，0配置跑不起来，非常依赖用户自己安装正确依赖）
2. vue-cli：快速开发 vue 相关项目，也支持单体 .vue 文件打包成 lib 库。内部使用 webpack 实现
3. webpack：灵活配置，支持大型项目、lib库

抓包工具：chrome-dev-tool、whistle、wireshark

• html
  • ✔ 深入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
  • electron-自定义构建
  • ✔ c++ - 基础
  • python - 基础
• 微前端
  • ✔ 微前端基础知识
• 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: 中文官网
• 可视化
  • ✔ 可视化实现方案 4种可视化实现方案
  • zRender 源码分析
  • 流程图实现方案探索 jsplumb
• 性能优化
  • 系统性能衡量及优化 系统性能如何衡量、如何优化、chrome-dev-tool
  • 性能优化 - webVitals chrome 90 版本推出 web vitals 可视化衡量
  • 性能优化 - vue 专栏 vue 专类优化，包括函数式组件、keep-alive 优化等
• pwa
  • ✔ webWorkers 亮点技能 - pwa
  • ✔ pwa构建 -- 体验
• git
  • ✔ 常见问题及答案
  • ✔ 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
• 用户体验
  • 字体优化
• 人工智能
  • 人工智能入门
  • python入门

注：没有链接的表示待发展、学习的技术

1 运营

目标 + 决策 + 资源配置

目标：清晰明确的目标，知道带来的收益，目标倒推、精细拆解、环环相接
决策：决定下一刻需要立即做的事情，不做哪些事情
资源配置：老板给的资源合理利用

2 lowcode 思考

最近了解到的 lowcode, nocode, 前端智能等，对近期火热技术做个了解，看看前端未来的发展路线。
lowcode: 目的是解放前端生产力，让后端、产品、设计都能使用，甚至可以零代码搭建一套系统，提升研发速度。对比组件库 antd, elementui 来说，lowcode 的组件库提供的更完整，可以任意开发一个组件放上去。
包含模块: 从设计端到开发端，形成完整的链路。包含脚手架、可视化交互设计工具、物料库

2022-02-07 12:24:23
混沌工程：提高分布式、云计算系统的服务高可用工程手段，主要是实现故障注入演练、任务编排、指标分析、系统评分等，常用工具有阿里开源的 chaosblade 等工具

3 个人发展

个人成长、长期积累、平缓心态、不能临时抱佛脚影响心态

3.1 最近具体发展事项

思考事项

1. 职业发展
2. 技术学习 80% + 广度学习 20%

技术学习方向: vue3 + esmodule + ts + vite 实践
广度学习：宏观关注前端整体发展方向，前端职业给企业带来的价值、在企业的地位，考虑就业形式、投入产出比。学习个人综合实例提升点，为不断突破做准备

方向：

1. serverless
2. 低代码平台
3. 大前端flutter
4. 音视频
5. 服务端开发 nodejs
6. 可视化 canvas
7. webxr 元宇宙

解析

1. 通用的基础能力有哪些自己还欠缺的？

空闲时可做的

1. 修复 vite 等开源项目 issue，提 pr
2. 阅读书籍：提高个人综合能力
3. 思考人生，自己在做什么，有什么意义，应该做什么

3.2 一些原则

工作怎么做：

1. 主动原则：主动做事、改掉被动接受信息，尽快完成业务开发，就有时间去思考更多信息；主动思考业务效果、拿运营数据、跟各负责人沟通、处理更复杂任务，获取更多信息，不断完善、改善自身能力
2. 成长原则：业务任务和学习成长衡量，一边做事，一边挖掘成长点。征战沙场的马比拉磨的马则更有能力。不断复盘
3. 价值原则：产出价值的技术，才能得到实践

升级原则：

1. 在当前级别，做下一级别的事情
2. 做好当前级别事情

学习：

1. 碎片化时间，系统学习，而不是碎片化时间碎片化学习
2. 心态勇敢：不需要完全准备好才去做，而是边做边学，在日常生活、学校学习、知识竞赛、工作技术挑战等都是一样的

体现工作能力：

1. 工作量评估：任务拆分为更细小的，然后通过经验拍脑袋估时；保留一定 buffer
2. 负责端到端的任务
3. 多引用新技术

参考资料

1. 阿里飞冰