原创 強大的抓包工具 Whistle —— 不僅僅是抓包

抓包是開發調試移動端項目的必備技能，相應的工具有很多，比如 Fiddler, Charles, Tcpdump, Wireshark最近有同事推薦另外一款工具：Whistle，接觸了一下還挺好用，比較符合我自身的需求，比如：   一、安裝

2022-07-22 12:51:19

原创 在 ARM Mac 上通過 nvm 安裝 node.js 失敗

背景： M1 芯片的 MacBook Pro，通過 homebrew 安裝了 nvm，再通過 nvm 安裝 node v15 時報錯   問題一： 報錯信息： xcrun: error: invalid active developer

2022-07-14 12:51:16

原创 TypeScript —— 枚舉類型 enum 的紅與黑

TypeScript 設計的初衷是 JavaScript + Types，所有 TypeScript 的特性不改變運行時的行爲 反過來說，如果在 TS 代碼中去掉靜態類型，應該得到一份完整有效的 JS 代碼 這樣的好處在於，我們可以通過 E

2022-06-15 12:51:17 2

原创 使用 localeCompare 對數組排序時順序錯亂

問題描述： 使用 localeCompare 對一個字符串數組按名稱排序 const arr = ['我', 'B', 'c', 'C', 'b', '幹活', '233', '1024', '211', '喫飯']; arr.sort

2022-06-12 12:51:22

原创 七種通過 CSS 實現的按鈕 Hover 特效

最近寫了太多的邏輯代碼，寫幾行 CSS 換換腦子     一、一閃而過 很常見的效果，其實就是一個傾斜長條平移了一段距離而已 要點在於給 button 設置 overflow: hidden; 以及確保長條的初始位置和結束位置在按鈕區域外

2022-05-17 12:51:15

原创 關於幫老婆在前端導數據這件小事

一個普通的晚上，普通的我聽着普通disco回到普通的家，不普通的老婆讓我做一件普通的事情：導數據 因爲種種原因，只能在前端通過控制檯腳本導數據，而且有這幾種類型的數據： 1. 查詢列表接口，並導出一個 Excel 表格； 2. 查詢列表接口

2022-04-26 12:51:23

原创 使用 Husky + Commitlint + Lint-staged 約束每一次 Git 提交

每一名開發人員都有自己獨特的代碼風格。但對於多人協作項目，保持統一的風格有利於項目維護。 我們可以在項目中引入 ESLint、Prettier 來規範代碼，但這無法約束 Git commit message 這時候可以藉助 Husky 等工

2022-04-08 12:51:16 2

原创 Umi 小白紀實（五）—— 結合有道翻譯 API 實現 i18n 多語言功能

多語言（國際化）是一個很常見的需求，Umi 對多語言也有很好的支持   一、簡單實現 Umi 基於 react-intl 封裝了多語言插件 @umijs/plugin-locale 不過並不需要單獨引入，只需要在配置文件（.umirc.js

2022-03-16 12:51:11 1

原创 Vite 配置環境變量 import.meta.env 時出現 ts 錯誤

問題描述： 使用 Vite 2.x 構建項目時，在 .evn 文件中創建了自定義環境變量 VITE_BASE_URL 但在項目中使用時出現 Typescript 錯誤：     分析原因： 這是因爲沒有引入 ImportMeta 的類型聲

2022-03-06 12:51:20

原创 Svelte 迷途求索（四） —— 路由的兩種解決方案

Svelte 沒有提供官方的路由工具，這恰好促進了 router 的百家爭鳴 目前有三個 svelte router 項目獲得更多開發者的認同：svelte-spa-router、routify、svelte-routing 其中 svel

2022-02-26 12:51:21 2

原创 Svelte 迷途求索（二） —— 組件傳參和狀態管理

一、簡單體驗 Svelte 的開發體驗和 Vue 3 很類似 在 Svelte 組件中也是將 JS 寫在 <script> 標籤中，將 CSS 寫在 <style> 中 稍微不同的點在於，DOM 模板不需要寫在 <template> 中，而

2022-01-28 12:51:20 4

原创 Svelte 迷途求索（一） —— 構建第一個 Svelte 應用

Svelte 是一個全新的響應式框架，在開發體驗上比較接近 Vue，具體的介紹可以參考尤雨溪大佬的評價   一、創建應用 Svelte 提供了模板項目，可以通過 degit 拉取到本地 npx degit sveltejs/templat

2022-01-13 12:51:20 2

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

時光的長河緩緩流淌，滋養出一份小小的幸福   《2020 年終總結 & 2021 年度計劃》   2021 年度計劃完成情況：   1. 健身時間不少於330天：  達標 一天不擼鐵，就會有一種深深的負罪感   2. 至少每個月看一本書：

2022-01-11 12:51:22

原创 React Flow 實戰（三）—— 使用 React.context 管理流程圖數據

前面兩篇關於 React Flow 的文章已經介紹瞭如何繪製流程圖 而實際項目中，流程圖上的每一個節點，甚至每一條連線都需要維護一份獨立的業務數據 這篇文章將介紹通過 React.context 來管理流程圖數據的實際應用     項目結

2021-12-07 13:29:25 4

原创 React Flow 實戰（二）—— 拖拽添加節點

上一篇 《React Flow 實戰》介紹了自定義節點等基本操作，接下來就該擼一個真正的流程圖了     一、ReactFlowProvider React Flow 提供了兩個 Hooks 來處理畫布數據： import { u

2021-11-17 13:28:17 58