- 博客(120)
- 收藏
- 关注
RSS订阅原创 Monorepo 項目管理方案：lerna + yarn workspace / pnpm
Monorepo 項目管理方案：lerna + yarn workspace / pnpm前言正文什麼是 Monorepo？Lerna安裝初始化項目創建 npm 包增加模塊依賴發布依賴包管理monorepo 實踐技術方案lerna + yarn workspace搭建環境清理環境依賴管理項目構建發布pnpmpnpm VS lerna + yarn workspace建立 monorepo workspace依賴管理配置啟動命令結語前言會寫這篇是因為這幾天開始了畢業設計的相關工作，然後跟著一個同學加入了一
2021-10-15 23:26:11
4178
2
原创 前端編譯 : Babel 基礎入門
前端編譯 : Babel 基礎入門前言正文什麼是 Babel ?Babel 模塊介紹babel-cli從項目中運行 Babel CLIbabel-registerbabel-nodebabel-core配置 Babel.babelrcbabel-preset-es2015babel-preset-react執行 Babel 生成的代碼babel-polyfillbabel-runtimepresets vs pluginsplugins 選項結語參考資料前言在寫這篇前一樣先來說說為什麼要寫這篇，也算是做
2021-10-08 23:53:27
522
原创 React 源碼解析 - Hooks 系列
React 源碼解析 - Hooks 系列前言正文調用 React Hook 到底背後發生了什麼？初探 Hooks 源碼DispatcheruseState HookHook 的實現Hook 在 Mount 階段(useState)mountWorkInProgressHook() - 存儲 Hook 的數據結構 - 循環鏈表整個 Hook 鏈表保存在哪裡useState 怎麼處理 state 更新觸發組件更新(重新渲染)使組建達到 Update 階段Hook 在 Update 階段做了什麼？useStat
2021-09-24 00:59:41
2123
原创 前端開發 - 淺談時間戳
前端開發 - 淺談時間戳前言正文先從 timestamp 開始談起儲存時間的標準格式JavaScript 中的時間處理getYeargetMonthgetHours日期時間需注意的地方ISO 8601 vs RFC3339時區的顯示把時間傳到後端去結語參考前言時間戳這個東西，其實一直以來我都知道有這個東西大概能幹嘛，反正就是跟時間有關的東西啦，但一直都沒有去深入的系統學習，因為實際在開發時，有關時間的一切在項目中都沒有想太多，也沒有做過多的思考和處理。直到最近在實習時，因應需求加上 mentor 的提點
2021-09-04 01:00:50
986
原创 Next.js 個人博客項目總結
Next.js 個人博客項目總結項目總結Next.js + Ant-design 配置項目總結關於 Next.js 博客練手項目開發部分大致上完成，所涉及到的技術棧如下：前端Next.jsReact.jsAnt designMarkdown 相關組件庫Axioscookie後端Node.jsExpressJWT數據庫Mysql關於本項目過程以及學習知識點的總結，分為本文檔以及另外三份文檔，鏈接如下：Next.js 基礎入門總結Next.js
2021-08-02 19:42:30
148
原创 前端 Next.js 國際化應用
前端 Next.js 國際化應用前言正文準備工作next-i18next.config.jsnext.config.jspublic/localesserverSideTranslationsuseTranslation結語前言國際化對於很多場景來說都是挺常見的，舉凡稍微有點知名度的網站，其實全部都提供了國際化的功能。最近因為需要開始學習使用，本文檔就來總結一下在 Next.js 中實現國際化的過程以及涉及到的技術棧。正文準備工作Next.js 中實踐國際化，首先安裝一個庫：npm instal
2021-08-02 18:03:12
2353
1
原创 Next.js 路由守衛應用
Next.js 路由守衛應用前言正文需求背景錯誤示範HOC 輪子redirect結語前言這篇文檔要來總結的是關於在項目中實踐對於 Next 路由守衛、身份認證等機制的實現方法，以及在 Next 中具體要如何使用，和一些自己的採坑紀錄。正文需求背景在我的項目中，需求其實也很常見。對於登陸，我使用的是 JWT token 的認證方式，並且存儲於前端 cookie 瀏覽器中。需求就是希望可以在用戶登陸前檢查 cookie 的 token，如果有 token 才可以允許所有路由放行，如果無 token 則
2021-07-29 15:03:52
3334
3
原创 Next.js 基礎入門總結
Next.js 基礎入門總結前言正文創建 Next 項目Headpages靜態路由LinkuseRouter動態路由\_app.js\_document.js獲取數據getServerSidePropsgetStaticPropsgetStaticPaths小結結語參考前言之前幾天總結了關於 SSR 的基礎應用以及相關概念，並且也針對了騰訊雲國際站官網的首頁詳細了解了關於其 SSR 和 React 的應用及實現。這邊要來總結的是關於 Next.js 基本的入門使用，因為其實之前並沒有接觸過 SSR，也就
2021-07-28 20:15:01
429
原创 理解 React + SSR 整體架構
理解 React + SSR 整體架構前言正文客戶端渲染服務端渲染同構Why SSR ?SSR 架構SSR 與 VDOM 的關係SSR 客戶端渲染 vs 服務端渲染服務端路由客戶端路由Node 只是一個中間層結語前言隨著前端技術發展更新的越來越快，這幾年陸續推出了許多新框架，像是 Vue, React 等等，此外，也對於前端性能上越來越重視其性能、資源消耗等。本篇文章要來介紹關於 SSR 這個技術，為什麼有 SSR 德出現，適用場景以及原理。正文SSR 的全稱是 Server Side Render
2021-07-11 19:54:32
733
4
原创 React 源碼解析 - Fiber/Reconcile 系列：Fiber 與 Diff
React 源碼解析 - Fiber/Reconcile 系列：Fiber 與 Diff前言正文從 DOM 到 Fiber 對象DOMVDOMReact 元素(React Element)Fiber 對象Side EffectsEffects listReact 架構關於 ReconcilerStack ReconcilerFiber Reconciler深入 Reconciliation 工作流程找出兩棵 React element tree 差異三大策略React Diff 算法具體過程對比不同 typ
2021-06-25 02:06:04
1146
4
原创 Java 設計模式 － 享元模式
Java 設計模式 － 享元模式享元模式前言模式概述模式結構模式具體應用優缺點享元模式前言在面向對象程序設計過程中，有時會面臨要創建大量相同或相似對象實例的問題。創建那麽多的對象將會耗費很多的系統資源，它是系統性能提高的一個瓶頸。例如，圍棋和五子棋中的黑白棋子，教室裏的桌子和凳子等。這些對象有很多相似的地方，如果能把它們相同的部分提取出來共享，則能節省大量的系統資源，這就是享元模式的產生背景。模式概述享元（Flyweight）模式的定義：運用共享技術來有效地支持大量細粒度對象的復用。它通過共享
2021-06-20 15:31:22
109
2
原创 Java 設計模式 - 外觀模式
Java 設計模式 - 外觀模式外觀模式前言模式概述模式結構模式具體應用優缺點外觀模式前言在現實生活中，常常存在辦事較復雜的例子，如辦房產證或註冊一家公司，有時要與多個部門聯系，這時要是有一個綜合部門能解決一切手續問題就好了。軟件設計也是這樣，當一個系統的功能越來越強，子系統會越來越多，客戶對系統的訪問也變得越來越復雜。這時如果系統內部發生改變，客戶端也要跟著改變，這違背了“開閉原則”，也違背了“迪米特法則”。所以有必要為多個子系統提供一個統一的接口，從而降低系統的耦合度，這就是外觀模式的目標。模式
2021-06-19 11:39:11
106
原创 Java 設計模式 - 裝飾器模式
Java 設計模式 - 裝飾器模式裝飾器模式前言模式概述模式結構模式具體應用優缺點裝飾器模式前言上班族大多都有睡懶覺的習慣，每天早上上班時間都很緊張，於是很多人為了多睡一會，就會用方便的方式解決早餐問題。有些人早餐可能會吃煎餅，煎餅中可以加雞蛋，也可以加香腸，但是不管怎麽“加碼”，都還是一個煎餅。在現實生活中，常常需要對現有產品增加新的功能或美化其外觀，如房子裝修、相片加相框等，都是裝飾器模式。在軟件開發過程中，有時想用一些現存的組件。這些組件可能只是完成了一些核心功能。但在不改變其結構的情況下，可以
2021-06-19 00:06:27
107
原创 Java 設計模式 - 橋接模式
Java 設計模式 - 橋接模式橋接模式前言模式概述模式結構模式具體應用優缺點橋接模式前言在現實生活中，某些類具有兩個或多個維度的變化，如圖形既可按形狀分，又可按顏色分。如何設計類似於 Photoshop 這樣的軟件，能畫不同形狀和不同顏色的圖形呢？如果用繼承方式，m 種形狀和 n 種顏色的圖形就有 m*n 種，不但對應的子類很多，而且擴展困難。當然，這樣的例子還有很多，如不同顏色和字體的文字、不同品牌和功率的汽車、不同性別和職業的男女、支持不同平臺和不同文件格式的媒體播放器等。如果用橋接模式就能很好
2021-06-18 01:02:17
100
5
原创 Java 設計模式 - 組合模式
Java 設計模式 - 組合模式組合模式前言模式概述模式結構透明式安全式模式具體應用透明式安全式優缺點組合模式前言在現實生活中，存在很多“部分-整體”的關系，例如，大學中的部門與學院、總公司中的部門與分公司、學習用品中的書與書包、生活用品中的衣服與衣櫃、以及廚房中的鍋碗瓢盆等。在軟件開發中也是這樣，例如，文件系統中的文件與文件夾、窗體程序中的簡單控件與容器控件等。對這些簡單對象與復合對象的處理，如果用組合模式來實現會很方便。模式概述組合（Composite Pattern）模式的定義：有時又叫作
2021-06-16 16:47:40
106
1
原创 Java 設計模式 - 適配器模式
Java 設計模式 - 適配器模式適配器模式前言模式概述模式結構模式具體應用類適配器模式對象適配器模式優缺點適配器模式前言在現實生活中，經常出現兩個對象因接口不兼容而不能在一起工作的實例，這時需要第三者進行適配。例如，講中文的人跟講英文的人對話時需要一個翻譯，用直流電的筆記本電腦接交流電源時需要一個電源適配器等。在軟件設計中也可能出現：需要開發的具有某種業務功能的組件在現有的組件庫中已經存在，但它們與當前系統的接口規範不兼容，如果重新開發這些組件成本又很高，這時用適配器模式能很好地解決這些問題。模式
2021-06-15 02:04:39
520
原创 Java 設計模式 - 模板方法模式
Java 設計模式 - 模板方法模式模板方法模式前言模式概述模式結構模式具體應用優缺點模板方法模式前言在面向對象程序設計過程中，我們常常會遇到這種情況：設計一個系統時知道了算法所需的關鍵步驟，而且確定了這些步驟的執行順序，但某些步驟的具體實現還不知道，或者說某些步驟的實現與具體的環境相關。例如，去銀行辦理業務一般要經過以下 4 個流程：取號、排隊、辦理具體業務、對銀行工作人員進行評分。其中取號、排隊和對銀行工作人員進行評分的業務對每個客戶是一樣的，可以在父類中實現，但是辦理具體業務卻因人而異，也因不同
2021-06-14 15:55:01
1110
1
原创 Java 設計模式 - 中介者模式
Java 設計模式 - 中介者模式模式概述模式結構模式適用場景模式具體應用優缺點模式概述在實際開發中，有可能建了很多個類，而這些類又需要互相引用，當項目變得龐大時，很容易造成引用關係過於複雜的情況。這時候我們就可以應用上中介者模式。中介者模式中，所有的相關對象都通過中介者對象來通信，而不是直接互相引用，所以當一個對象發生改變時，只需要通知中介者對象即可，不會造成太多的影響，因為沒有把直接的類引用直接硬編碼在其他類當中。模式結構中介者模式下通常會包含以下角色:角色描述抽象中介者
2021-06-13 23:34:52
145
原创 JavaScript 中的正則表達式 RegExp
JavaScript 中的正則表達式 RegExp前言正文什麼是正則表達式？創建正則表達式元字符代表特殊含義的元字符代表次數 - 量詞元字符特殊情況正則的特性正則方法str.search(reg)reg.test(str)reg.exec(str)str.match(reg)str.replace(reg, [newStr, function])結語參考前言正則表達式這個東西一直都有聽過的，不管在學習什麼語言都有正則表達式的學習，無奈本人之前學習都有點不求甚解，所以對於正則表達式這個東西一直沒有很正文
2021-06-13 10:10:44
382
2
原创 React 源碼解析 - API 系列 - React.createContext
React 源碼解析 - API 系列 - React.createContext前言正文Context 概念Context APIReact.createContextContext.ProviderClass.contextTypeContext.consumerReact.createContext 源碼分析源碼分析context$$typeof_currentValue_threadCountProviderConsumer總結結語前言這篇只有一個重點，就是 react 中的 context。個
2021-06-10 18:18:21
648
1
原创 完全理解 Git 到底是什麼
完全理解 Git 到底是什麼前言正文關於版本控制DVCSGit 工作流程工作區 / Workspace暫存區 / Index本地倉庫 / Repository遠程倉庫 / Remote小結HEADaddcommitbranchmergerebasemerge vs rebaseresetpush其他命令Git 常用命令結語前言其實這個東西大家一定都知道了，一般使用上也都應該使用過，大一點點的項目都會要求要有個代碼倉庫共同開發，首選就是 git。不過我自己個人用歸用，實際上對於很多指令以及 git 本身的
2021-06-05 10:48:33
513
4
原创 React 源碼解析 - API 系列 - React.createRef/forwardRef
React 源碼解析 - API 系列 - React.createRef/forwardRef前言正文關於 refref 的由來string refcallback refcreateRefuseRefforwardRefuseImperativeHandleReact.createRef源碼分析RefObjectReact.forwardRef源碼分析結語前言這篇一樣繼續來分析 react 中的 createRef() 以及 forwardRef() 這兩個 api，首先也會先說說 ref 的概念以
2021-05-31 15:08:58
1002
原创 React 源碼解析 - API 系列 - React.Component/PureComponent
React 源碼解析 - API 系列 - React.Component/PureComponent前言正文React.Component源碼分析invariantReactNoopUpdateQueuesetStateforceUpdate小結React.PureComponent什麼是 PureComponent源碼分析創建 PureComponentObject.assign()結語前言這篇繼續解析 react 源碼，接續上一篇延續 API 系列，這篇要了解的是 react 源碼的 React.
2021-05-30 00:03:01
489
4
原创 淺談 TypeScript 泛型 Generic
淺談 TypeScript 泛型 Generic前言正文什麼是泛型？函數泛型接口泛型React + TS 泛型jsx 泛型組件結語參考前言也是最近除了 react 之外之外因應實習的技術棧要求，所以也在學習 ts 相關東西。這篇來說說對於 ts 泛型的一些比較基本，常用的用法吧！常常在看一些源代碼像是 react 源碼時，都會看到這樣的用法，但都不明所以，趁此機會補補下這方面的東西。正文什麼是泛型？在軟件開發中，我們不僅要創建一致的、定義良好的 API，同時也要考慮可重用性。我們希望組件不僅要能夠
2021-05-27 01:21:15
483
2
原创 React 源碼解析 - API 系列 - React.createElement/ReactElement
React 源碼解析 - API 系列 - React.createElement 與 ReactElement前言正文jsx 轉換 jsReact.createElement()源碼分析hasValidRef()hasValidKey()childrenreturnReactElement()源碼分析小結結語前言本人最近就在學習 react，其實也還不能算是非常熟練 react，但是總是算是有了一點點基礎。其實以前也寫過一點 vue，但是總是感覺一知半解，所以學習 react 決定對於一些比較重要的地
2021-05-25 17:44:12
596
4
原创 關於 ES7 提案 Decorator
關於 ES7 提案 Decorator前言正文decorators 準備工作類的修飾方法的修飾函數的修飾core-decorators.js@autobind@readonly@override@deprecate (别名@deprecated)@suppressWarningsMixin 應用decorators 總結結語參考前言會寫這篇是因為這陣子正在學習 react，因此也學了一個 react 協助狀態管理的庫 MobX，而在 MobX 中就有一個東西叫做 decorators(裝飾器)，覺得這個
2021-05-25 00:56:51
277
3
原创 React + MobX - 完全上手指南
React + MobX - 完全上手指南前言正文MobX 準備工作MobX 基本使用Store + Action組件中 MobX 生效MobX DecoratorsMobX Decorators 準備工作使用 MobX Decorators@observable@action@computedStore 代碼Provider@inject@observerMobX 異步MobX vs Redux結語參考前言之前在學習 react 的狀態管理時當然第一個學到的就是 redux，關於 redux 如果有興
2021-05-17 16:40:35
3424
5
原创 React 系列 : Redux + TypeScript
React 系列 : Redux + TypeScript前言正文StoreActions基本同步 actions異步 actions + TSThunkAction 類型TReturnTypeTStateTExtraThunkArgTBasicActioninner functionReducerReact + ReduxTodoApp 效果展示結語參考前言前幾天寫過一篇關於 react + TS 的簡單入門，大致上就是說說 TS 的強大以及基本怎麼跟 react 配合起來，若不清楚歡迎先去看看 Re
2021-05-16 02:28:58
885
原创 React 搭配 TypeScript 新手入門
React 搭配 TypeScript 新手入門前言正文關於 TS創建 React + TS 項目TS 應用Props + TSHooks + TSuseStateuseRefuseReducerRender Props + TS結語前言這篇的主要焦點會放在如何在 react 項目中使用 ts，以及一些 ts 搭配 react 的基礎技巧以及好處，比單純用 js 好在哪，當然中間也會附上一些例子。寫這篇主要是因為暑假實習貌似要使用到的技術棧就是 react + ts，而且聽了 ts 也一陣子，也只知道
2021-05-14 10:12:38
2019
14
原创 關於 React 中的 Hooks - 完全上手指南
關於 React 中的 Hooks - 完全上手指南前言正文什麼是 Hooks?useState自定義 HooksuseEffectuseRefuseLayoutEffectuseCallbackuseMemouseReduceruseContext結語參考前言這篇要來討論關於 react 的 hooks。學過 react 的人肯定都知道什麼是 hooks，也就是說 hooks 可以說是 react 必會的東西，所幸通過這篇我來整理下關於 hooks 的知識點以及一些個人理解。這篇應該會很長，不過整體來
2021-05-13 02:39:17
1051
6
原创 Redux 中間件以及異步 action
Redux 中間件以及異步 action前言正文中間件(middleware)中間件概念applyMiddleware()redux-logger異步 actionredux-thunk結語前言前幾天寫過一篇關於 redux 基礎的使用以及概念，若不清楚可以先去看看 淺析 React Redux 的概念以及使用，但是其實會發現，那篇裡面的 action 都是同步的。本篇就要來談談 redux 的異步 action。正文在進入 redux 的異步 action 之前，先來說說中間件，因為這是進入異步
2021-05-10 00:54:02
224
2
原创 React 中使用 render props
React 中使用 render props前言正文結語前言這篇也是紀錄了關於學習 react 的過程，起因是因為開始學習 hooks，但是發現好像有些坑比較重要但卻被我跳過了，像是 render props, HOC 等等。這篇就是來補一下 render props 這部分，本篇也相對簡單，所以不會太長就是紀錄一下而已，不過還是算是比較重要的。正文官方文檔是這樣給 render props 解釋的：术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop
2021-05-08 16:11:43
430
2
原创 淺析 React Redux 的概念以及使用
淺析 React Redux 的概念以及使用前言正文為什麼需要 Redux?Redux 準備Redux 工作流程StoreActionAction CreatorReducer基本概念使用 Object.assign()拆分 reducer計數器完整代碼結語參考前言學習 react 的過程中，就一直看到什麼 redux，後來稍微了解一點點之後，如果你跟我一樣有一點點使用過 vue 的經驗的話，我自己感覺和 vuex 的作用有點類似，所以個人認為是必須要學會的東西。然而發現 redux 其實是一塊有點難咬
2021-05-07 18:10:40
632
6
原创 深入理解 React 的 setState
深入理解 React 的 setState前言參考正文setState 到底是同步還是異步的？setState 原理結語前言這篇來探討一個 react 中很基本的東西，setState，探討這個一方面其實也是打好 react 的基礎，另一方面是因為我自己拿來練手的 side-project 確實用到 setState，但是卻遇到了一個 bug，我思索應該就是 setState 的問題，沒有理解透徹。因此趕緊來學習這個東西，好掌握這個知識點。前情提要一下，這篇真的頗長，沒耐心地趕緊換篇看，不過對於認真看完
2021-05-06 18:25:12
278
2
原创 關於 React 組件生命週期
關於 React 組件生命週期前言參考正文組件初始化(initial)constructor()componentWillMount()render()componentDidMount()更新狀態(Updating State)shouldComponentUpdate()componentWillUpdate()componentDidUpdate()更新屬性(Updating Props)componentWillReceiveProps卸載(Unmounting)componentWillUnmou
2021-05-06 00:55:37
543
5
原创 JavaScript 函數式編程
JavaScript 函數式編程什麼是函數式編程概念純函數高階函數柯里化(Currying)什麼是函數式編程函數式編程英文是 functional programming，其實指的是一種編程範式(programming paradigm)，也就是一套寫代碼的方法。其實主要的編程反式有三種：命令式編程聲明式編程函數式編程其實一般我們寫程序大多是命令式編程。函數式編程相比命令式編程來說，更加強調程序執行的結果而非執行的過程，通常是通過若干簡單的函數，或是說簡單的執行單元，讓計算結果不斷推進，一
2021-05-02 14:29:05
228
3
原创 Java 設計模式 - 命令模式
Java 設計模式 - 命令模式模式概述模式結構模式適用場景模式具體應用模式概述在軟件系統中，系統中，“行為請求者” 與 “行為實現者” 往往呈現一種緊耦合的關係，但是在某些場合，比如希望對事務做撤銷，或是重做等操作，那麼這種緊耦合的結構是不合適的。命令模式就是為了因應這種需求，將 “行為請求者” 與 “行為實現者” 解耦，將一組行為抽象成對象，實現二者之間的松耦合。模式結構命令模式下通常會包含以下角色:角色職責抽象命令類(AbstractCommand)定義命令的接口，執
2021-04-30 15:44:16
104
1
原创 Axios 如何取消重複請求
Axios 如何取消重複請求前言參考正文如何取消請求如何判斷重複請求如何取消重複請求定義輔助函數設置請求攔截器設置響應攔截器測試代碼 + 效果結語前言在 Web 項目的開發過程中，我們常常會遇到重複請求的場景，而如果系統不對重複的請求進行處理，是有可能導致系統出現各種問題的。比如說，如果出現重複的 POST 請求就有可能導致服務端產生兩筆相同的紀錄，也就是一種冗余。那到底重複請求是怎麼產生的呢？這邊舉個例子感覺一下：假設頁面中有一個 button，用戶點擊之後會發出一個 Ajax 請求。如果沒有對該
2021-04-30 11:05:48
496
4
原创 純前端 - 原生自定義加載動畫
純前端 - 原生自定義加載動畫參考核心原理html 代碼css 代碼Step1Step2Step3Step4Step5Step6效果展示參考參考鏈接「HTML+CSS」–自定义加载动画【007】https://cloud.tencent.com/developer/article/1811548CSS3 animation（动画） 属性https://www.runoob.com/cssref/css3-pr-animation.html核心原理其實這個功能相對很簡
2021-04-25 11:03:59
141
1
原创 理解虛擬 DOM 原理以及簡單實現
理解虛擬 DOM 原理以及簡單實現前言參考正文什麼是 VDOM為什麼操作 DOM 開銷這麼大？DOM 解析過程js 操作 DOM 的真實代價VDOM 的好處VDOM 原理與流程用 JavaScript 模擬 DOM 樹並渲染到頁面上diff 算法比較新老 DOM 得到差異對象把差異對象反映到渲染的 DOM 樹結語前言會寫這篇的原因還是因為遭受毒打hhh，當時投了騰訊前端的實習生崗位，在一面時被問到了瞭不瞭解 vdom，結果只能說不太清楚，雖然後來一面是通過了，但還是覺得自己太菜了。後來問了一個前端大老同
2021-04-24 14:17:14
456
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人