原创 輕量化流程圖開發，比 X6 清爽太多 —— React Flow 實戰（一）

需求千千萬，流程圖常在 沒想到多年以後，我再次遇到一個關於流程圖開發的需求 以前少不更事，頭鐵用 GG-Editor 搞了一次流程圖《在 React 項目中引入 GG-Editor 編輯可視化流程》，差點把自己給埋了 這次再遇到類似的需求，

2021-10-21 13:27:46 1

原创 添零佔位 —— 快速生成N個0的六種辦法

做報表的時候偶爾會遇到這種需求： 爲了補齊長度，在一個數字字符串前面添加 N 個 0 佔位 舉個例子： 單元格需要展示 6 位數字，如 '123456' 但後端返回的數字是 123，這時候就要在前面補 0，得到 '000123'，使其長度爲

2021-10-12 13:27:46

原创 使用 dumi 打包 React 組件庫並生成文檔站點

對於前端團隊來說，公共組件庫是必須的，緊接着就是完善組件庫的文檔 社區裏關於快速生成文檔的工具有很多，如 StoryBook、Docz、Gatsby 在調研了幾種文檔工具之後，最終我選擇了 umi 家族的另一個成員：dumi 因爲它集成了

2021-09-24 13:27:47 25

原创 從零開始搭建前端腳手架

一、功能設計 每個前端小組都會有自己的獨特的業務場景，從這些業務場景從提取公共部分，並打造一個前端項目模版，是非常有必要的 爲了能夠基於這個項目模版快速創建一個新項目，就需要腳手架工具登場 所以這裏至少有兩個項目倉庫：前端模版項目、腳手架工

2021-08-03 13:27:43 1

原创 JavaScript 一維數組轉二維數組

問題描述： 有如下結構的一維數組： const list = [ {grade: '小學', city: '北京', count: 18}, {grade: '小學', city: '上海', count: 12},

2021-07-02 13:27:43

原创 JS 格式化數字（每三位加逗號）

問題描述： 處理數字，從各位開始，每三位添加一個逗號 function formatNum() { // ... } formatNum(123) // "123" formatNum(123.456) //

2021-07-01 13:27:55 1

原创 Umi 小白紀實（四）—— 在 Umi 3.x 中使用 dva

公司的新項目用到了 Umi，之前用過 Umi 1.x 版本，而現在已經來到了 3.x 時代 相對低版本來說，Umi 3.x 的整體的設計沒有什麼大變化，但在細節上還是有着不小的改變 比如 model，除了兼容以前的 connect 寫法之外

2021-06-12 13:27:39 43

原创 JavaScript 遍歷文檔生成目錄結構

一、需求描述 在 Word 中編輯文檔的時候，可以在視圖中打開導航窗格來查看目錄樹 類似的，現在需要基於頁面上的文章，渲染出一個這樣的目錄結構   在網頁上這些標題都是通過 <h1> 這樣的標籤渲染的，而且段落與標題之間是兄弟節點的關係 所

2021-05-30 13:27:43

原创 前端面試(螞蟻金服筆試) - 手寫事件總棧 EventBus

最近參加了一次螞蟻金服的面試，其中有兩道筆試題，分別是手寫事件總棧和手寫模板引擎 手寫模板引擎比較複雜，除了需要識別 {{data.name}} 這種基本情況之外， 還要兼顧 {{data.info[1]}}、{{data.others["

2021-05-17 13:28:04

原创 計算DOM節點相對於某個特定DOM節點的 offsetTop

問題描述： 頁面中有這樣的結構： <main> <section> <p>long time no see</p> <p>long time no see</p> </section> <table>

2021-05-09 13:27:36

原创 CKEditor 5 摸爬滾打（五）—— 圖片的插入與編輯

這篇文章將以插入圖片爲例，介紹如何在 CKEditor5 中插入塊級元素，以及在塊級元素上添加工具欄 最終的效果如下：       一、定義 Schema 和 Conversion 和之前的加粗插件、超鏈接插件不同，圖片在編輯器中是以塊級元

2021-04-13 13:28:24 2

原创 CKEditor 5 摸爬滾打（四）—— 開發帶有彈窗表單的超鏈接插件

前面的幾篇文章已經介紹了 CKEditor5 插件的構成，並開發了一個加粗插件 這篇文章會用一個超鏈接插件的例子，來介紹怎麼在 CKEditor5 中開發帶有彈窗表單的插件     一、設計轉換器 Conversion 開發 CKEdit

2021-04-03 13:27:40 8

原创 CKEditor 5 摸爬滾打（一）—— 從零構建定製化工程項目

最近需要將項目中的編輯器從 CKeditor 4 升級到  CKeditor 5 原以爲只是換個內核，然後稍微調整一下自定義插件的代碼，沒想到進了一個大坑 在經過一個月的摸爬滾打之後，終於完成升級內核的工作，同時也算摸清了 CK5 的基本玩

2021-03-22 18:35:21 239

原创 說起來你可能不信，一個正則就能讓頁面卡死

某個陽光明媚的下午，我正悠閒的品着剛買的滇紅，測試小姐姐突然急匆匆的找到我： “快看一下羣裏，文章編輯器出問題了！” 我手中的滇紅瞬間不香了，抓了抓所剩無幾的頭髮，開始了漫長的 Debug 環節 經過排查，發現問題的根源居然是一段正則表達式

2021-01-24 13:27:48

原创 2020 年終總結 & 2021 年度計劃

工作和生活終於到了圖窮匕見的時候  《2019 年終總結 & 2020 年度計劃》   2020 年度計劃完成情況：   1. 健身時間不少於300天：  達標 只有年初疫情期間懈怠了幾天，終於能看出八塊腹肌了 PS. 飲食比鍛鍊重要多了

2020-12-30 13:27:52