personal blog

JackySummer 的個人博客

✍️ 個人技術學習記錄、隨筆、總結、雜記

關注前端發展，學習前沿技術，深入分析原理，努力寫好代碼和優質文章

注：文章均屬原創，版權歸屬JackySummer 賬號所有，商業轉載請聯繫筆者獲得授權，非商業轉載請註明出處。

? 狀態

博客會持續更新，希望和你一起努力，共勉? ...

? 我的技術社區

• 掘金主頁
• segmentfault 主頁
• 個人博客

深入理解JavaScript 系列目錄

1. 深入理解JavaScript 之執行上下文和執行棧
2. 深入理解JavaScript 之執行上下文和變量對象
3. 深入理解JavaScript 之變量提升
4. 深入理解JavaScript 之由一道題思考閉包
5. 深入理解JavaScript 之原型與原型鏈
6. 深入理解JavaScript 之作用域鏈與閉包
7. 深入理解JavaScript 之new 原理及模擬實現
8. 深入理解JavaScript 之實現繼承的7 種方式
9. 深入理解JavaScript 之call, apply, bind 方法
10. 深入理解JavaScript 之手寫call, apply, bind 方法
11. 深入理解JavaScript 之手寫淺拷貝和深拷貝
12. 深入理解JavaScript 之事件循環(Event Loop)

ES6 系列

1. ES6 系列之let 和const 與var 的區別
2. ES6 系列之變量的解構賦值
3. ES6 系列之模板字符串
4. ES6 系列之箭頭函數全解析
5. ES6 系列之一文徹底弄懂Iterator
6. ES6 系列之Generator 生成器全解析
7. ES6 系列之Promise 題合集
8. ES6 系列之手寫Promise
9. ES6 系列之Proxy

TypeScript 系列

1. TypeScript 入門知識點總結
2. TypeScript 進階經驗總結

React 系列

1. 用React+Antd 封裝Axios 實現全局Loading 效果
2. React 函數this 綁定的原因及四種綁定方式對比
3. 淺談React 的Context API
4. 實現createElement 和render 方法
5. 手寫模擬實現React Hooks
6. 實現一個迷你Redux（基礎版）
7. 實現一個Redux（完善版）
8. 帶你實現react-redux
9. 理解redux-thunk 源碼
10. 手寫實現MobX 的observable 和autorun 方法
11. 手把手帶你入門Gatsby
12. 手把手帶你入門Next.js
13. 談談對React 新舊生命週期的理解
14. 深入React 的setState 機制
15. 淺談對React Fiber 的理解
16. 淺析requestIdleCallback
17. React 的狀態管理庫—— Recoil
18. 升級React Router v6 指南
19. 一文解讀React 17 與React 18 的更新變化
20. 深入React Context 源碼與實現原理
21. 深入React 合成事件機制源碼與原理
22. 深入React 源碼render 階段的beginWork 流程
23. 深入React 源碼render 階段的completeWork 流程

解讀ahooks 源碼系列

1. 【解讀ahooks 源碼系列】（開篇）如何獲取和監聽DOM 元素
2. 【解讀ahooks 源碼系列】DOM 篇（一）
3. 【解讀ahooks 源碼系列】DOM 篇（二）
4. 【解讀ahooks 源碼系列】DOM 篇（三）
5. 【解讀ahooks 源碼系列】DOM 篇（四）
6. 【解讀ahooks 源碼系列】Dev 篇——useTrackedEffect 和useWhyDidYouUpdate
7. 【解讀ahooks 源碼系列】Advanced 篇
8. 【解讀ahooks 源碼系列】State 篇（一）
9. 【解讀ahooks 源碼系列】State 篇（二）
10. 【解讀ahooks 源碼系列】Effect 篇（一）
11. 【解讀ahooks 源碼系列】Effect 篇（二）

Vue 系列

1. 實現Vue 中EventBus 通信方式
2. 手寫簡易的Vuex
3. 手寫簡易的Vue Router
4. 帶你入門體驗Vue3

日常總結

1. 獲取數組中的最大值方法
2. 原生JavaScript DOM 操作常見匯總
3. 總結JavaScript 數組方法
4. 手寫防抖與節流函數
5. 前端跨域解決方案歸納整理
6. 基於SSR/SSG + Gatsby 的前端SEO 優化
7. escape、encodeURI、encodeURIComponent 區別
8. 前端安全-XSS 和CSRF
9. 原生MediaRecorder API 錄屏學習記錄
10. 基於WebRTC 視頻流實現前端錄屏
11. Web Worker 學習
12. 一文詳解WebRTC 基礎
13. lerna 與yarn 上手筆記

前端工程化

1. 由零開始使用Webpack 來搭建React 項目
2. 如何編寫一個Webpack Loader
3. 如何編寫一個Webpack Plugin
4. Webpack Sourcemap 回顧
5. 一文帶你了解Jest 單元測試
6. 手把手帶你入門Travis 自動化部署
7. 搭建Next.js + TS + Antd + Redux + Storybook 企業級項目腳手架
8. 升級Webpack5 實踐
9. Vite 2.0 + React + TypeScript + Antd 搭建簡單腳手架
10. 梳理Webpack 知識體係與學習資源推薦
11. 結合實踐解讀深入package.json

性能優化

1. Webpack 動態導入react-toastify
2. 淺析Chrome Devtools 的Performance 面板
3. 我的前端性能優化體系總結
4. 梳理Web Worker 及實戰場景

HTTP 系列

1. 動手搞懂HTTP 緩存機制
2. HTTP 和HTTPS 協議
3. 回顧HTTP1.0-HTTP1.1-HTTP2.0 區別

瀏覽器

1. 搞懂瀏覽器渲染原理（重排與重繪）

CSS 系列

1. 頁面內容不足鋪滿屏幕高度和有滾動條時，footer 始終保持底部顯示
2. 自定義checkbox 樣式
3. 一文匯總CSS 兩列佈局和三列佈局
4. 完全搞懂BFC
5. CSS 水平垂直居中回顧總結

開發遇到的小問題合集

1. sessionStorage 和localStorage 用法總結
2. 移動端之開啟和禁止頁面滾動
3. Vue 實現星級評價效果
4. 封裝axios 攔截器實現用戶無感刷新access_token
5. 解決使用輸入法輸入在React input 框中的問題

插件系列

1. swiper 自定義分頁器
2. vue-awesome-swiper 修改輪播圖pagination 的顏色
3. swiper 父級元素處於隱藏狀態滾動效果失效問題

後語

如果喜歡或者有所啟發，歡迎star，你的鼓勵是我持續創作的動力?