原创 TS 泛型推斷好難啊，看看你能寫出來不

前言 最近做東西都在用ts，有時候寫比較複雜的功能，如果不熟悉，類型寫起來還是挺麻煩的。有這樣一個功能，在這裏，我們就不以我們現有的業務來舉例了，我們還是已Animal舉例，來說明場景。通過一個工廠來創建不同的動物實例。在這裏我們藉助泛型來

2022-08-17 14:39:57 15

原创 pnpm 的 workspace 實現 monorepo 工程

前言 前端多個包管理的的方式一般都是採用monorepo的方式去管理，之前都是使用的lerna的workspace去管理。這段時間包管理切換到了pnpm上，它也有worksapce,可以支持monorepo。 monorepo 有的小夥伴可

2022-08-12 14:34:14 24

原创 React重新渲染指南

前言 老早就想寫一篇關於React渲染的文章，這兩天看到一篇比較不錯英文的文章，翻譯一下(主要是谷歌翻譯，手動狗頭)，文章底部會附上原文鏈接。 介紹 React 重新渲染的綜合指南。該指南解釋了什麼是重新渲染，什麼是必要的和不必要的重新渲染

2022-08-11 14:33:32 2

原创 微前端（qiankun）主應用共享React組件

前言 最近需要重構一個老項目，定的方案用微前端去改造。主應用是老的項目，微應用是新的項目，由於重構時間比較緊張，子應用還需要使用父應用的一些組件。過程中遇到一些問題，記錄一下。 方案 我們知道qiankun,可以通過props通信傳遞數據，

2022-06-09 14:35:48 1

原创 nginx 部署前端資源的最佳方案

前言 最近剛來一個運維小夥伴，做線上環境的部署的時候，前端更新資源後，總是需要清緩存才能看到個更新後的結果。客戶那邊也反饋更新了功能，看不到。 方案 前端小夥伴應該都知道瀏覽器的緩存策略，協商緩存和強緩存，如有不清楚的地方，可以看看這篇文章

2022-06-08 14:58:33 2

原创 測試同學問我爲什麼每次讓我清緩存（聊聊瀏覽器的緩存）

前言 最近一個好奇的測試同學問我，你們前端開發完成後，每次都讓我們清緩存或者Ctrl+f5強制刷新，我能不能每次不用強制刷新，就能看到你們更新的內容呢。我說是可以做到的，我來跟你講講瀏覽器的緩存策略。我相信應該有不少的同學在工作中都會遇到這

2022-01-22 14:32:27 3

原创 前端也要會【異或運算】

前言 在前端的日常開發當中，我們很少用到異或運算，但在一些框架源碼當中，會有用到異或運算。我們在閱讀源碼的時候，會造成代碼的不理解，今天我們介紹一下異或運算。 概念 異或，英文爲exclusive OR，縮寫成eor. 異或（eor）是一個

2021-09-28 14:01:52 1

原创 (開源)給圖片編輯器添加了輔助線

前言 上篇我們介紹了做的圖片編輯器，大部分工具類的軟件都有輔助線，方便拖拽元素的時候對齊，能讓我們快速的做出漂亮的圖片。 這兩天給編輯器加上了輔助線, 輔助線實現過程稍微有些複雜，我們一步步說下實現過程。 演示 演示地址 實現流程 原理講

2021-08-20 14:02:04 1

原创 (開源)兩個週末寫了個圖片編輯器

前言 今年計劃開始寫文章，各大平臺發佈的時候需要上傳一個封面圖，市面上有好多比較成熟的圖片編輯器。之前也做過一些偏工具類的應用，於是萌生想法，自己能不能搞一個編輯器，供掘友們使用，大概花了四五天的時間，第一版內容已經有了。 案例演示 演示

2021-08-19 14:01:57 44

原创 01 基於umi搭建React快速開發框架

介紹 基於umi搭建一個快速開發框架，react 應用框架。umi 以路由爲基礎的，支持類 next.js 的約定式路由，以及各種進階的路由功能，並以此進行功能擴展，比如支持路由級的按需加載。 我們會在基於umi的基礎上，開發出一個框架通用

2020-05-30 16:32:00

原创 React 組件庫框架搭建

前言 公司業務積累了一定程度，需要搭建自己的組件庫，有了組件庫，整個團隊開發效率會提高恨多。 做組件庫需要提供開發調試環境，和組件文檔的展示，調研了幾個比較主流的方案，如下： docz 配置簡單，功能相對來說也較完善。我們現在項目是用的u

2019-01-24 13:14:01

原创 03 基於umi搭建React快速開發框架(封裝列表增刪改查)

前言 大家在做業務系統的時候，很多地方都是列表增刪改查，做這些功能佔據了大家很長時間，如果我們有類似的業務，半個小時就能做出一套那是不是很爽呢。 這樣我們就可以有更多的時間學習一些新的東西。我們這套框架對此做了下封裝，適合的小夥伴也可以借鑑

2018-11-21 22:40:46

原创 02 基於umi搭建React快速開發框架(國際化)

前言 之前寫過一篇關於React的國際化文章，主要是用react-intl庫，雅虎開源的。react-intl是用高階組件包裝一層來做國際化。 基於組件化會有一些問題，比如在一些工具方法中需要國際化，就需要自己去實現了。在umi-react

2018-09-19 22:29:35

原创 基於umi搭建React快速開發框架 01

介紹 基於umi搭建一個快速開發框架，react 應用框架。umi 以路由爲基礎的，支持類 next.js 的約定式路由，以及各種進階的路由功能，並以此進行功能擴展，比如支持路由級的按需加載。 我們會在基於umi的基礎上，開發出一個框架通用

2018-09-06 17:56:10 6

原创 史上最全的 Redux 源碼分析

前言 用 React + Redux 已經一段時間了，記得剛開始用Redux 的時候感覺非常繞，總搞不起裏面的關係，如果大家用一段時間Redux又看了它的源碼話，對你的理解會有很大的幫助。看完後，在回來看Redux，有一種 柳暗花明又一村

2018-09-06 13:28:41