博客 / 列表

邊城 - 揭密 Vue 的雙向綁定

Vue 中需要輸入什麼內容的時候，自然會想到使用 input v-model="xxx" / 的方式來實現雙向綁定。下面是一個最簡單的示例 div id="app" h2What's your name:/h2 input v-model="name" / divHello {{ name }}/div /div new Vue({ el: "#app",

vue.js , 雙向綁定

邊城 - Loading ... done

引子 在前面界面開發的過程中，為了增強在與後端交互過程中的用户體驗，通常會顯示 Loading 動畫。Loading 動畫會在與後端交互結束的時候關閉。這是一個很常規的需求，技術實現也不復雜。 showLoading(); axios.request(...) .then(...) .finally(() = hideLoading()); Node.js 和大部分瀏覽器都在 20

loading , finally , 異步 , 前端 , Javascript

邊城 - 在前端使用 JS 進行分類彙總

最近遇到一些同學在問 JS 中進行數據統計的問題。雖然數據統計一般會在數據庫中進行，但是後端遇到需要使用程序來進行統計的情況也非常多。.NET 就為了對內存數據和數據庫數據進行統一地數據處理，發明了 LINQ (Language-Integrated Query)。其實 LINQ 語法本身沒什麼，關鍵是為了實現 LINQ 而設計的表達式樹、IEnumerable 和 IQueryable 的各種擴

lodash , 數據處理 , 前端 , Javascript

邊城 - 樹，計算父節點的值

前段時間回答了一個類似的問題，產生了寫一篇博客的想法。這個問題確實存在一些常見的的應用場景，比如一個多層組織結構中，已知每個員工的績效分，希望計算各級部門的績效分以便對部門評優。 準備 根據這個描述，準備一個試驗數據如下： { "name": "某某公司", "children": [ { "name": "生產序列",

統計 , 遍歷 , 樹形結構 , Javascript

邊城 - esbuild 構建油猴腳本

前段時間思否十週年，搞了個問答打卡活動。參與打卡活動的人需要在回答問題的結尾加一個“小尾巴”。加小尾巴本身並不難，但是由於官方沒有提供快捷方式，每次都需要自己從某個地方拷貝過去，稍嫌繁瑣。正好前不久剛裝了油猴插件，就想：自己給編輯器注入一個按鈕用來添加小尾巴如何？ 在使用油猴之前，使用過一個叫“User JavaScript and CSS”的插件，可以對特定的網頁注入腳本和樣式。不過這個插件在

插件 , esbuild , plugin , 油猴腳本 , Javascript

邊城 - Java 中模擬 C# 的擴展方法

我平時主要使用 C#、JavaScript 和 TypeScript。但是最近由於某些原因需要用 Java，不得不再撿起來。回想起來，最近一次使用 Java 寫完整的應用程序時，Java 還是 1.4 版本。 這麼多年過去，Java 確實有不少改進，像 Stream，var 之類的，我還是知道一些。但用起來感覺還是有點縛手縛腳，施展不開的感覺。這肯定是和語法習慣有關，但也不乏 Java 自身的原因

語法 , JAVA

邊城 - 考慮時區了嗎？

2023-09-17 更新，補了張截圖 前端工程師們，在拿到一個日期/時間數據的時候，你是怎麼處理的呢？有沒有考慮時區的問題呢？ 也許你會説：嗯，沒怎麼關注時區，不過我測過，沒問題。 我能怎麼説呢？可能你還沒遇到國外的用户吧！ 被偷走的一天 如果拿到一個日期字符串 "2021-11-17"，為了方便計算和處理數據，可能會先把它封成一個 Date 對象： const s = "2021-11-17

date , 時區 , Javascript

邊城 - 從列表生成樹 (JavaScript/TypeScript)

多數情況下，從服務端拿到用於樹形顯示的數據，本身是平面的，也就是列表。這是因為關係型數據庫是以“行”為單位保存數據，所以它保存了每一個節點的數據，而這個數據中包含了它與父節點之間的聯繫（比如 parentId）。 前端要以樹形顯示這樣的列表數據，需要把列表數據轉換成樹形結構數據。這個的樹形結構是指：每個節點數據中都含有其子節點集（通常是 children 屬性）。所以樹形結節的數據結構主要需要包含

隨機數 , 樹形結構 , typescript , Javascript