博客 / 列表

林恆 - 關於地圖渲染加20w數據展示和地圖動畫怎麼做

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 項目背景 公司需要將全年設備安裝量通過旗幟的形式展示在全國地圖上，實現數據可視化大屏。主要技術挑戰： 數據量大：全年設備安裝數據約20萬條 實時更新：通過WebSocket實時接收數據 動畫效果：需要展示數據逐條添加的動態效果 性能要求：需要保持60fps的流暢動畫 一、初始實現與

前端

林恆 - Vue 表單避坑：為什麼 v-model 綁定對象屬性會偷偷修改父組件數據？

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 場景引入 在 Vue 項目裏，表單組件幾乎無處不在。為了提高複用性，我們常常會把一堆輸入框封裝成一個“大表單組件”，然後通過v-model直接綁定一個對象給外部組件： !-- App.vue -- script setup import { ref } from 'vue' import MyForm from './My

前端

林恆 - uni-app使用瓦片實現離線地圖的兩種方案

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 最近接到一個安卓App的活兒，雖然功能上不算複雜，但因為原本沒怎麼做過安卓端，所以也是"摸着石頭過河"。簡單寫一下踩過的坑和淌的水吧~ uni-app實現離線地圖主要用 leafletjs 實現，但是因為在安卓端運行，存在渲染問題，所以還要用上 renderjs。 實現方案一：web-view 因為uni-app

前端

林恆 - 探索JavaScript的秘密令牌：獨一無二的`Symbol`數據類型

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 引言 在JavaScript的廣闊世界中，數據類型構成了其最基礎的語法元素。隨着ES6的發佈，這個大家庭迎來了兩位新成員：BigInt和Symbol。如果説BigInt是為了解決大數運算的精度問題，那麼Symbol的誕生，則像是一把為對象屬性開啓“隱私空間”和“唯一命名”的神奇鑰匙。本文將帶你深入理解這個“獨一無二”的簡

前端

林恆 - Vue 3 組件通信的 4 種正確姿勢

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 上個月，我們重構一個老項目，發現一個“祖傳組件”： 父組件傳 props 給子組件 子組件再傳給孫子 孫子改了個狀態，通過 $emit 一層層往上拋 中間任意一層改名，整條鏈就斷了…… 同事苦笑：“這哪是組件通信，這是傳話遊戲。” 其實，Vue 3 早就提供了更優雅、更健壯的通信方

前端

林恆 - display: contents 詳解

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 display: contents是一個相對較新的 CSS 屬性值，它會讓元素自身不生成任何盒子，但它的子元素和偽元素仍然正常生成。簡單説：元素本身從渲染樹中消失，但它的孩子還在。 基本概念 工作原理 div class="parent" div class="child"內容/div /div /* 正常情況下

前端

林恆 - 一文讀懂：CommonJS 和 ES Module 的本質區別

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 面試官：你能説説 CommonJS 和 ES Module 的區別嗎？ 我：……（腦子裏只剩下 require 和 import） 説實話，這個問題你一定見過，而且99% 的前端都背過標準答案。 但真要往深了問一句： 為什麼 ESM 可以 Tree Shaking

前端

林恆 - 數組轉樹與樹轉數組

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 扁平數組轉樹形結構 (Array To Tree) 核心痛點 處理“數組轉樹”最直觀的思路是使用遞歸配合雙重循環：遍歷數組中的每一項，再次遍歷數組尋找其子節點。 這種做法的時間複雜度為O(n2)O(n2)當數據量nn較小時（如幾十條菜單），性能損耗尚可忽略。但當數據量達到數千條（如組織架構、行政區劃）時，計算次數呈指數級增長，會導致瀏

前端

林恆 - HTML5 自定義屬性 data-*：別再把數據塞進 class 裏了！

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前言：由於“無處安放”而引發的混亂 在 HTML5 普及之前，前端開發者為了在 DOM 元素上綁定一些數據（比如用户 ID、商品價格、狀態碼），可謂是八仙過海，各顯神通： 隱藏域流派：到處塞input type="hidden" value="123"，導致 HTML 結構像個堆滿雜物的倉庫。 Clas

前端

林恆 - 為什麼 SVG 能在現代前端中勝出？

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 如果你關注前端圖標的發展，會發現一個現象： 過去前端圖標主要有三種方案： PNG 小圖（配合雪碧圖） Iconfont SVG 到了今天，大部分中大型項目都把圖標系統全面遷移到 SVG。 無論 React/Vue 項目、

前端

林恆 - 普通Fetch和Fetch 流式的區別？

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 你想弄清楚 Fetch 流式的核心定義、工作原理和實際價值，簡單來説，Fetch 流式是 Fetch API 提供的「邊接收、邊處理」數據的能力，它讓前端不再需要等待服務端返回完整的響應數據，而是能逐塊讀取、處理數據，是前端處理大文件、實時數據的核心能力之一。 一、Fetch 流式的核心定義 Fetch 流式（

前端

林恆 - 高德地圖-物流路線

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 有些時候我們的項目只使用原生一些內容是無法實現一些功能的，所以今天我帶來了一個大家都熟悉的，也是生活中常見的一個功能，也就是大家在網購的時候，下單成功後就可以看到自己的訂單，當然也可以查看物流信息，那麼物流信息中有一個部分就是地圖部分，這部分可以讓用户看到自己購買的商品到了哪裏。那這個功能我們使用原生大概率是無法完成的，這就

前端

林恆 - 基於PDF.js的安全PDF預覽組件實現：從虛擬滾動到水印渲染

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 基於PDF.js的安全PDF預覽組件實現：從虛擬滾動到水印渲染 本文將詳細介紹如何基於Mozilla PDF.js實現一個功能完善、安全可靠的PDF預覽組件，重點講解虛擬滾動、雙模式渲染、水印實現等核心技術。 前言 在Web應用中實現PDF預覽功能是常見需求，尤其是在線教育、文檔管理等場景。然而，簡

前端

林恆 - 書架效果的實現

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 1. 對齊目標 前端想實現一個類似的書架放置書籍的效果，目標如下： 2. 思路梳理 我們使用的技術棧：vue 實現這樣的一個效果，我們需要知道以下信息： 每行可以放置多少書本？ 放下所有的書本需要多少行? 需要什麼樣的數據結構? 我們現在一個個來思考，既然我們選擇了vue來實現，秉

前端

林恆 - 老闆：能不能別手動複製路由了？我：寫個腳本自動掃描

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 起因 週五快下班，老闆過來看權限配置頁面。 "這個每次都要手動輸路徑？" "對，現在是這樣。"我打開給他看： 角色：運營專員 路由路徑：[手動輸入] /user/list 組件路徑：[手動輸入] @/views/user/List.vue "上次運營配錯了，/user/list 寫成 /user/lists，頁面打不開

前端

林恆 - THREE.js 攝像機分享

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前置代碼 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleDocument/title style

前端

林恆 - 面試官：如何解決按鈕重複點擊？這個問題掛了80%的人！

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前言 還記得上週我們團隊在招聘前端工程師，一個看起來經驗豐富的候選人坐在我對面。 "你們項目中是如何處理按鈕重複點擊的問題的？"我拋出了這個看似簡單的問題。 "這個簡單，使用防抖就可以了。"他很快回答。 然而，當我繼續追問細節時，他卻陷入了沉思... 實際上，這個問題看似簡單，但是要真正的解決好，需要考慮

前端

林恆 - 這 5 個冷門的 HTML 標籤，能讓你少寫 100 行 JS

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 大家好!😁。 Code Review 的時候，我最怕看到什麼？ 不是複雜的算法，也不是什麼正則。而是明明一個 HTML 標籤就能搞定的事，有人非要寫幾百行 JS + CSS 去重新發明輪子 。 前幾天，我看到一個新同學為了寫一個摺疊面板（Accordion），引入了一個重型的第三方庫，還寫了一堆 useStat

前端

林恆 - CSS 有什麼奇技淫巧？

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 aspect-ratio 寬高比 style div { width: 190px; /* 注意，這個數字要能容納完內容才有效 */ aspect-ratio: 16 / 9; background: tomato; } /style

前端

林恆 - Vue 中的 deep、v-deep 和 >>> 有什麼區別？什麼時候該用？

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 “你用 Element Plus 寫了個按鈕，想改下 hover 顏色，結果死活不生效！最後查了半天，發現得加個 :deep() 才行” 其實，這是 Vue 中一個非常常見的坑：樣式作用域衝突。那為什麼用 UI 庫時，加上 :deep()、::v-deep 或 後，樣式就能生效呢？ 它們是什麼？有什麼區別？什麼時候該

前端

林恆 - 拆解一個由 setTimeout 引發的“頁面假死”懸案

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 引言 靈魂拷問 你是不是也寫過這樣的代碼？ “這個動畫有點卡，加個 setTimeout 延時一下？” “這個狀態更新順序不對，給它個 100ms 緩衝？” “不知道什麼時候滾動結束？先延遲個 300ms 再説！” 在前端開發中，setTimeout 就像是一劑強效止痛藥。它能快速掩蓋邏輯上的時序衝突，讓代碼

前端

林恆 - 為什麼有些人邊框不用border屬性

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 1) border 會改變佈局（佔據空間） border會參與盒模型，增加元素尺寸。 例如，一個寬度 200px 的元素加上border: 1px solid #000，實際寬度會變成： 200 + 1px(left) + 1px(right) = 202px 如果不想影響佈局，就很麻煩。 使用 box-shado

前端

林恆 - 手把手教你實現前端郵件預覽功能

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 你是否曾經想過，在瀏覽器中直接點擊一個郵件附件，就能預覽完整的郵件內容——包括髮件人、收件人、抄送、正文甚至內嵌圖片？ 今天，我們要揭秘一個基於 Vue 3 和 Vant UI 的郵件預覽上傳組件，它不僅能上傳.eml格式的郵件文件，還能在彈窗中完整渲染郵件內容，甚至支持附件圖片的內聯展示！

前端

林恆 - 那個寫 width: 33.33% 的前端，終於被 flex: 1 拯救了

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 告別百分比計算：從文檔流到 Flex 彈性佈局的進化之路 在 CSS 的世界裏，佈局方式的演進就像是一場對“控制權”的爭奪戰。從最初順其自然的文檔流，到精打細算的inline-block，再到如今遊刃有餘的 Flexbox，我們的代碼變得越來越優雅。 一、 隨波逐流：HTML 文檔流 一切佈局的起點

前端