技能记录 | 写作认知体系

技能记录: 总结工作中的项目实践笔记

目录

# 1. 知识体系: 1-1. 知识体系

# 2. html&css: # 2-1. 基础
2-1-1. html的使用 2-1-2. css的使用 2-1-3. html居中及常用布局 2-1-4. html移动端适配 2-1-5. CSS和JS动画 2-1-6. html与js的组合使用 2-1-7. 前端跨页面通信 2-1-8. html跨tab页通信(同源跨域) 2-1-9. cookie常用操作 2-1-10. JS中对URL进行转码与解码 2-1-11. img标注热点分布 2-1-12. html中input输入数字控制 2-1-13. textarea的换行与空格问题 2-1-14. html屏幕相关 2-1-15. console实用调试技巧
# 2-2. 基础框架
2-2-1. jquery及zepto的使用
# 2-3. 安全
2-3-1. html禁止复制文字
# 2-4. pwa
2-4-1. pwa基础
# 2-5. WebComponent
2-5-1. WebComponent基础
# 2-6. 浏览器渲染
2-6-1. 浏览器渲染机制
# 2-7. 实践
2-7-1. 左侧树折叠效果
# 2-8. 优化
2-8-1. 浏览器优化 2-8-2. 浏览器渲染原理与性能优化 2-8-3. lighthouse实践及分析
# 2-9. 样式
2-9-1. 第三方ui库样式重写

# 3. js: # 3-1. 基础
3-1-1. js分类、比较及数组 3-1-2. js函数 3-1-3. js对象、class、proxy及Symbol 3-1-4. es6之变量,扩展,symbol,set,map,proxy,reflect及class 3-1-5. es6之module,iterator,promise及es6+ 3-1-6. es6中的proxy的使用 3-1-7. js异步 3-1-8. js事件循环及优化 3-1-9. js模块规范 3-1-10. 数组常用方法 3-1-11. 常用正则表达式提高效率 3-1-12. 前端异常的捕获与处理 3-1-13. ES6优化实践 3-1-14. ES6-ES12的开发技巧
# 3-2. 进价
3-2-1. v8内存管理 3-2-2. js原生方法手写实现 3-2-3. js中手写常用方法
# 3-3. 网络库
3-3-1. ajax&axios&fetch对比 3-3-2. axios分析及实践 3-3-3. axios文档使用 3-3-4. fetch处理超时
# 3-4. 常用库
3-4-1. lodashjs中节流及防抖的实现 3-4-2. puppeteer实践及分析
# 3-5. 实践
3-5-1. 数字取整问题
# 3-6. ts
3-6-1. typescript语法及实践

# 4. node: # 4-1. 基础
4-1-1. node版本及源管理 4-1-2. npm常用命令操作 4-1-3. npm发布及私服搭建 4-1-4. yarn相关总结 4-1-5. verdaccio详细设置 4-1-6. nexus布署私有npm仓库 4-1-7. npm包管理机制 4-1-8. pnpm实践及分析 4-1-9. mac下彻底卸载node和npm 4-1-10. patch-package修改依赖包 4-1-11. pnm包管理 4-1-12. bower包管理 4-1-13. npm-git-bower设置代理 4-1-14. docker下安装nodejs环境
# 4-2. node
4-2-1. index
# 4-3. express
4-3-1. express基本配置
# 4-4. koa
4-4-1. 模板引擎ejs 4-4-2. 深入浅出 Koa 的洋葱模型 4-4-3. 如何更好地理解中间件和洋葱模型
# 4-5. egg
4-5-1. eggjs中curl请求、HTTP基础及RouteCtrl实战 4-5-2. eggjs中HttpClient网络及Curl的使用 4-5-3. eggjs中Cookie与Session使用 4-5-4. eggjs中实现RESTfulAPI及Router 4-5-5. eggjs中cluster的实现原理

# 5. webpck: # 5-1. 基础
5-1-1. webpack基础入门 5-1-2. webpack的自定义实现 5-1-3. webpack的源码分析 5-1-4. webpack热更新原理 5-1-5. webpack路由懒加载的原理 5-1-6. 组件按需加载babel-plugin-component分析 5-1-7. webpack中require和import的区别 5-1-8. webpack中sourcemap详细配置 5-1-9. webpack的proxy用法 5-1-10. http-proxy-middleware 5-1-11. webpack-dll配置 5-1-12. vue-config详解及实践
# 5-2. 优化
5-2-1. webpack优化总括 5-2-2. webpack的使用及优化 5-2-3. webpack打包构建优化 5-2-4. vue-config构建优化
# 5-3. 实践
5-3-1. webpack的插件实践 5-3-2. webpack中external实践 5-3-3. webpack中TreeShaking及压缩的实践

# 6. vue: # 6-1. 基础
6-1-1. vue相关官方文档记录 6-1-2. vue的实践使用 6-1-3. vue自定义实现 6-1-4. vue源码分析 6-1-5. vue源码分析和对原理的理解 6-1-6. vue的源码分析 6-1-7. vue2、vue3及react的三种Diff算法 6-1-8. vue与react的对比及个人思考 6-1-9. vue组件通信方式及原理分析 6-1-10. vue将原生事件绑定到组件 6-1-11. vue生命周期及原理分析 6-1-12. vue常用修饰符详解 6-1-13. vue常用的自定义指令 6-1-14. vue中extend实践及分析 6-1-15. vue中filter实践及分析 6-1-16. vue中nextTick实现原理 6-1-17. vue项目优化技巧【重点】 6-1-18. vue项目权限相关 6-1-19. vue项目实践 6-1-20. vue项目刷新当前页面 6-1-21. vue中使用jsx 6-1-22. vue封装组件技巧 6-1-23. vue3相关资料整理 6-1-24. vue3新特点 6-1-25. vue3实践使用 6-1-26. vue3自定义实现 6-1-27. vue3源码分析 6-1-28. vue3与vue2组件通信方式及对比 6-1-29. vue3使用mitt 6-1-30. vue3与react的hook比较 6-1-31. vueuse实践及分析
# 6-2. vuex
6-2-1. vuex实践使用 6-2-2. vuex自定义实现 6-2-3. vuex源码分析 6-2-4. vuex4新特性 6-2-5. vuex4源码分析 6-2-6. pinia实践及分析
# 6-3. router
6-3-1. 前端路由的原理及自定义 6-3-2. vue-rouer实践使用 6-3-3. vue-router自定义实现 6-3-4. vue-router源码分析 6-3-5. vue-router4新特性
# 6-4. ssr
6-4-1. ssr实践 6-4-2. vue-ssr自定义实现 6-4-3. vue-ssr源码分析 6-4-4. nuxt实践使用
# 6-5. cli
6-5-1. vue-cli实践使用 6-5-2. vue-cli自定义实现 6-5-3. vue-cli源码分析
# 6-6. vuepress
6-6-1. vuepress主题模版及实践 6-6-2. vuepress搭建文档中心
# 6-7. 优化
6-7-1. 长列表优化
# 6-8. 实践
6-8-1. vue中pdf下载及预览
# 6-9. vite
6-9-1. 01.vite实践及分析 6-9-2. vite自定义实现 6-9-3. vite源码解析 6-9-4. vite自定义实现2 6-9-5. vue-cli迁移vite2实践小结 6-9-6. Vite2&React&AntDesign4搭建开发环境
# 6-10. 第三方库
6-10-1. antd-vue table设置rowClass
# 6-11. 组件库
6-11-1. 基于vue2环境搭建 6-11-2. 基于vue3环境搭建 6-11-3. vue3自定义组件库 6-11-4. Icon和Button组件 6-11-5. Message组件 6-11-6. Carousel组件 6-11-7. Tree组件 6-11-8. Tree组件2 6-11-9. Toast组件 6-11-10. vue组件化 6-11-11. 相关参考
# 6-12. 源码分析
6-12-1. vue源码解密分析开源项目

# 7. react: # 7-1. 基础
7-1-1. react生命周期 7-1-2. react源码解析 7-1-3. react动态添加样式 7-1-4. componentWillReceiveProps代替方案 7-1-5. react的通信方式 7-1-6. react组件通信的方式 7-1-7. react优化性能技巧
# 7-2. dva
7-2-1. dva使用实践 7-2-2. dva实现原理及自定义实现
# 7-3. router
7-3-1. react-router&dom实践使用 7-3-2. react-router&dom自定义实现 7-3-3. react-router&dom的源码分析 7-3-4. connected-react-router自定义实现
# 7-4. hooks
7-4-1. hooks实践 7-4-2. hooks自定义实现 7-4-3. hooks源码实现
# 7-5. 组件库
7-5-1. 通过storybook实现组件库 7-5-2. 组件发布相关 7-5-3. lerna&dumi组件库及文档
# 7-6. 优化
7-6-1. react性能优化 7-6-2. umi项目本地构建优化
# 7-7. antd
7-7-1. antdv3中使用DatePicker控件 7-7-2. antd从v3升级到v4 7-7-3. umi插件

# 8. 兼容性: # 8-1. IE
8-1-1. 解决TextEncoder和TextDecoder在IE下不兼容的问题 8-1-2. 解决iconfont在IE下不兼容问题

# 9. 常用库: # 9-1. 公共
9-1-1. 常用后台管理模块库
# 9-2. jspdf
9-2-1. pdf生成处理
# 9-3. dnd
9-3-1. react-dnd用法详解

# 10. 协议: 10-1. 常用网络协议关系 10-2. http协议相关 10-3. websocket的使用 10-4. mqtt的使用 10-5. websocket-over-stomp 10-6. http防御 10-7. 从url输入到返回请求的过程 10-8. websocket重连优化 10-9. iframe中cookie使用

# 11. api_权限: 11-1. 接口请求格式详解 11-2. apidoc使用实践 11-3. 前端鉴权知识

# 12. h5移动: 12-1. 文章推荐

# 13. 性能: # 13-1. 优化
13-1-1. 前端性能优化建议
# 13-2. 监控
13-2-1. 常见监控问题汇总 13-2-2. sentry实践及性能监控 13-2-3. sentry集成钉钉 13-2-4. sentry收集错误上报的原理 13-2-5. sentry部署及实践 13-2-6. 前端性能监控自己实现
# 13-3. 辅助工具
13-3-1. chrome开发者工具的使用 13-3-2. sonarqube实践及分析

# 14. 组件化: 14-1. React组件库搭建 14-2. Vue组件库搭建 14-3. Vue移动端组件库

# 15. 模块化: # 15-1. 模板
15-1-1. 管理端adm-tpl-sys模版 15-1-2. 管理端adm-tpl-sub模版 15-1-3. 管理端adm-tpl-portal模版 15-1-4. 管理端adm-tpl-part模版 15-1-5. 管理端adm-tpl-react模版 15-1-6. 管理端adm-tpl-vue模版 15-1-7. 移动端h5-tpl-vue模版 15-1-8. 管理端doc-tpl-rat模版 15-1-9. 管理端doc-tpl-bdp模版 15-1-10. 管理端adm-tpl-vue-multi模版 15-1-11. 管理端adm-tpl-egg模版
# 15-2. 微前端
15-2-1. 微前端概况 15-2-2. 微前端实践使用 15-2-3. 微前端原理实现 15-2-4. qiankun实践
# 15-3. learn
15-3-1. monorepo-lerna-yarn的实践

# 16. 可视化: # 16-1. bizchart
16-1-1. bizchart基础 16-1-2. bizchart实践
# 16-2. x6
16-2-1. x6实践

# 17. 工程化: # 17-1. 介绍
17-1-1. 介绍借鉴
# 17-2. babel
17-2-1. babel实践及配置 17-2-2. babel原理及AST
# 17-3. gulp
17-3-1. glup的使用 17-3-2. gulp搭建本地服务
# 17-4. webpack
17-4-1. webpack
# 17-5. 代码规范
17-5-1. 常用的代码规范配置 17-5-2. eslint+prettier规范与检测代码 17-5-3. cz代码提交规范的工作流 17-5-4. prettier配置
# 17-6. cli
17-6-1. 脚手架cli开发
# 17-7. 测试
17-7-1. 自动化前端测试
# 17-8. 构建
17-8-1. 前端构建OOM 17-8-2. 前端内存分析
# 17-9. uml
17-9-1. UML工具之EA用法 17-9-2. UML基于其的软件设计 17-9-3. UML基于其的需求分析 17-9-4. UML基于其的需求分析之案例分析 17-9-5. UML用法之基础之基于StarUML 17-9-6. UML用法之进阶之基于EA 17-9-7. UML之类图分析

# 18. devops: # 18-1. gitd
18-1-1. git常用命令及使用 18-1-2. git提交规范 18-1-3. git补丁patch和diff使用
# 18-2. jenkins
18-2-1. jenkins配置及使用 18-2-2. jenkins前端构建部署 18-2-3. Jenkins推送设置
# 18-3. github
18-3-1. Github Action自动打包部署 18-3-2. gitpage设置 18-3-3. Github常用自动化及发布设置 18-3-4. gitlhub&lab几个常用的API 18-3-5. github墙外
# 18-4. gitlab
18-4-1. gitlab环境及配置 18-4-2. 常用功能
# 18-5. bash
18-5-1. 前端脚本通过时间生成对应环境 18-5-2. shell脚本中变量判断 18-5-3. bash判断文件或文件夹是否存在 18-5-4. sed命令替换匹配行 18-5-5. shell中find使用 18-5-6. shell中mv&rm&cp使用 18-5-7. shell管道及并串行 18-5-8. shell参数传递与默认值 18-5-9. shell读取配置文件参数 18-5-10. shell交互式传参 18-5-11. shell中json使用 18-5-12. shell中catch使用 18-5-13. shell中后台运行
# 18-6. k8s
18-6-1. 前端实践k8s
# 18-7. ansible
18-7-1. ansible实践
# 18-8. docker
18-8-1. docker环境及配置 18-8-2. docker&compose及swarm的使用 18-8-3. docker常用脚本及工具 18-8-4. 前端常用到的docker容器 18-8-5. docker镜像源加速 18-8-6. docker搭建私有仓库registry及harbor
# 18-9. nginx
18-9-1. nginx环境设置 18-9-2. nginx常用设置及实践 18-9-3. nginx配置https-http2 18-9-4. nginx部署相关 18-9-5. nginx运维部署相关 18-9-6. nginx的重定向问题
# 18-10. ci&cd
18-10-1. jenkins构建docker镜像上传至私有镜像库Nexus 18-10-2. ci&cd通过k8s完整部署 18-10-3. gitLab搭建cicd
# 18-11. deploy
18-11-1. pm2常用命令及管理 18-11-2. pm2一键部署 18-11-3. pm2的实现原理 18-11-4. ansible部署

# 19. db: # 19-1. nedb
19-1-1. nedb的使用
# 19-2. mysql
19-2-1. mysql环境及配置 19-2-2. mysql语法相关 19-2-3. mysql类型、储存引擎 19-2-4. mysql事务 19-2-5. mysql优化 19-2-6. sequelize事务 19-2-7. mysql在win上bat脚本使用 19-2-8. sqlite的使用
# 19-3. redis
19-3-1. redis环境及配置 19-3-2. redis简介、安装及配置 19-3-3. redis数据结构、订阅及案例 19-3-4. redis持久化、缓存及淘汰策略 19-3-5. redis集群、慢查询及内存优化 19-3-6. redis事务、锁及分布式

# 20. 业务其他: # 20-1. ambari
20-1-1. ambari-admin前端二次开发 20-1-2. ambari-web前端二次开发
# 20-2. freemarker
20-2-1. freemarker基本语法 20-2-2. freemarker与vue实践
# 20-3. ember
20-3-1. ember语法 20-3-2. ember调试

# 21. go: 21-1. go环境相关配置

# 22. 系统: # 22-1. mac
22-1-1. mac中zsh配置 22-1-2. mac常用软件 22-1-3. mac上U盘及硬盘数据 22-1-4. homebrew镜像设置 22-1-5. mac开发环境配置 22-1-6. mac升级固态重装系统 22-1-7. mac打开scp功能
# 22-2. linux
22-2-1. linux系统目录结构 22-2-2. shell脚本实现取当前时间 22-2-3. linux下通过端口查看进程 22-2-4. linux用户及权限配置管理 22-2-5. linux下使用Shell脚本使用ftp 22-2-6. linux下用户管理 22-2-7. linux解压缩命令 22-2-8. 服务常用命令 22-2-9. linux安装配置sshd 22-2-10. centos7设置防火墙 22-2-11. linux写入的使用 22-2-12. centos离线安装软件 22-2-13. linux下jdk环境安装 22-2-14. linux与win格式 22-2-15. linux磁盘空间管理 22-2-16. 使用samba建立共享文件
# 22-3. win
22-3-1. 桌面上图标出现x及感叹号处理 22-3-2. Chocolatey的使用
# 22-4. pi
22-4-1. 安装MATE及配置
# 22-5. centos
22-5-1. centos安装配置注意事项 22-5-2. centos常用命令 22-5-3. centos修改国内yum源 22-5-4. centos利用createrepo制作本地yum源 22-5-5. centos安装vim及配置
# 22-6. ubuntu
22-6-1. ubuntu上安装Chrome浏览器

# 23. tool: # 23-1. 开发工具
23-1-1. vscode插件开发实践 23-1-2. vscode常用插件及设置 23-1-3. vscode推荐插件分类 23-1-4. 谷歌插件推荐
# 23-2. 命令终端
23-2-1. win终端Cmder配置及美化 23-2-2. terminus
# 23-3. 写作工具
23-3-1. Markdown For Typora 23-3-2. mdeditor完整示例 23-3-3. markdown语法指南 23-3-4. typora配合PicGo图床设置 23-3-5. 使用md语法编写在线文档
# 23-4. 系统工具
23-4-1. U盘启动盘制作工具 23-4-2. mac上创建可启动USB
# 23-5. 外部墙
23-5-1. 内网穿透

# 24. design_pattern: 24-1. 设计模式js版

# 25. algorithm: 25-1. 十大经典排序算法js版 25-2. 数据结构及常用算法 25-3. 前端算法

# 26. android: # 26-1. junior
26-1-1. Android开发环境搭建和其相关配置 26-1-2. Android开发环境搭建和其相关配之Linux 26-1-3. Android代码编程规范 26-1-4. Android网络基础 26-1-5. Android应用部署与发布 26-1-6. Android动画框架概括 26-1-7. Android动画框架基础 26-1-8. Android动画框架进阶 26-1-9. Android应用学习进阶步骤之面试参照 26-1-10. Android应用学习进阶之初级 26-1-11. Android应用市场发布流程之运营&推广 26-1-12. Android开发新规范整理 26-1-13. gradle构建脚本优化
# 26-2. intermediate
26-2-1. Android应用学习进阶之中级 26-2-2. Android通信协议简述 26-2-3. Android通讯协议之蓝牙基础 26-2-4. Android自定义控件基础之事件分发和绘制 26-2-5. Android自定义控件基础分类及示例 26-2-6. Android编译脚本比较 26-2-7. NDK开发实践之基础 26-2-8. NDK开发实践之基础之C语言 26-2-9. NDK开发实践之案例 26-2-10. NDK开发实践之进阶 26-2-11. NDK开发环境搭建及初探
# 26-3. senior
26-3-1. Andriod框架分析 26-3-2. Andriod性能分析之概括 26-3-3. Andoid内存泄露案例分析 26-3-4. Andriod性能分析之布局优化 26-3-5. Andriod性能分析之代码优化 26-3-6. Android插件化开发 26-3-7. Android内存分析及工具 26-3-8. Android热插拔式开发 26-3-9. Dagger2&Retrofit&Mvp&Rxjava使用 26-3-10. 设计模式designpattern之Android 26-3-11. Android应用学习进阶之高级 26-3-12. Android代码重构杂谈
# 26-4. frame_analysis
26-4-1. photoview框架总体类关系类图 26-4-2. photoview_gestures类图 26-4-3. photoview_scrollerproxy类图 26-4-4. photoview时序图 26-4-5. universalimageloader总体分析类图 26-4-6. universalimageloader图片显示时序图 26-4-7. volley总体分析类图 26-4-8. volley网络调用时序图
# 26-5. source_analysis
26-5-1. Activity的Window创建的过程 26-5-2. Android事件分发活动图 26-5-3. AppWidget相关类关系类图 26-5-4. AppWidget桌面小部件时序图 26-5-5. drawable的层次关系类图 26-5-6. Toast的Window创建过程 26-5-7. Window的操作过程时序图 26-5-8. 窗口视图相关类图 26-5-9. 视图相关类图 26-5-10. 总体视图组的继承结构类图 26-5-11. Notification通知栏时序图 26-5-12. Notification相关类关系类图 26-5-13. ViewGroup的绘制活动图 26-5-14. ViewGroup和View总体案例分析活动图 26-5-15. ViewGroup事件分发活动图 26-5-16. View的绘制活动图 26-5-17. View事件分发活动图 26-5-18. View中draw子流程活动图 26-5-19. 消息处理机制时序图 26-5-20. 消息处理机制相关类关系类图

上次更新: 2022/04/15, 05:41:26

面试技巧→

×