林恆 -
面試官：説説看，用户登錄後拿到的 Token，你應該怎麼存？存哪裏？
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
開篇：一個經典的面試題
“説説看，用户登錄後拿到的 Token，前端應該怎麼存？”
這個問題看似簡單，卻能清晰地分辨出一個前端開發者對安全的理解深度。是存到 localStorage？sessionStorage？還是 Cookie？又或者是內存裏？不同的選擇背後，是截然不同的安全考量。
今天，來聊一聊 Toke
前端
林恆 -
拒絕 rem 計算！Vue3 大屏適配，我是這樣做的
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
最近公司又接了個數據可視化大屏的需求，設計稿是標準的1920 x 1080。 拿到設計稿的那一刻，我的內心是拒絕的... 🤯
大家都知道，做大屏適配最煩的就是還原設計稿座標。 以前我嘗試過各種方案：
rem / vw: 每一個 px 都要轉換，寫 css 的時候旁邊還得開個計算器，太累。
前端
林恆 -
Vue開發三年，我才發現依賴注入的TypeScript正確打開方式
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
你是不是也遇到過這樣的場景？
在Vue項目裏，為了跨組件傳遞數據，你用provide和inject寫了一套祖孫通信邏輯。代碼跑起來沒問題，但TypeScript編輯器總給你畫紅線，要麼是“類型any警告”，要麼就是“屬性不存在”的錯誤提示。
你看着一片飄紅的代碼區，心裏想着：“功能能用就行，類型標註太麻煩了。”於是，
前端
林恆 -
徹底弄懂KeepAlive
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
前言
開發過Vue應用的同學對KeepAlive功能應該都不陌生了，但是大家對它的理解是隻停留在知道怎麼用的階段 還是説清晰的知道它內部的實現細節呢，在項目中因KeepAlive導致的的Bug能第一時間分析出來原因並且找到解決方法呢。這篇文章的目的就是想結合Vue渲染的核心細節來重新認識一下KeepAlive這個功能。
文章是
前端
林恆 -
Electron 的西天取經
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
我本身是做 Web 開發的，最近需要寫個小工具，調用一些系統 API，就選擇了比較成熟的 Electron。結果業務代碼寫了三小時，環境配置、鏡像、文件引用、打包路徑、體積過大、文件被鎖定……各種問題卻折騰了將近三天。寫下這篇筆記，記錄這一路的坎坷。
第一難：官方文檔搭不起項目
按照官方説明初始化項目：
前端
林恆 -
12個JS核心，搞懂這些直接起飛！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
你是不是也遇到過這樣的場景？面試官拋出一個閉包問題，你支支吾吾答不上來；團隊代碼review時，看到同事用的Promise鏈一臉懵逼；明明功能實現了，性能卻總是差那麼一點...
別慌！今天我整理了12個JavaScript核心概念，這些都是2024年各大廠面試的高頻考點，也是日常開發中真正實用的硬核知識。搞懂它
前端
林恆 -
【Vue3】我用 Vue 封裝了個 ECharts Hooks
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
前言
在前端開發中，ECharts 作為數據可視化的利器被廣泛使用，但每次使用都要重複處理初始化、容器獲取、事件綁定、窗口 resize 等邏輯，不僅繁瑣還容易出錯。最近我封裝了一個useEchartHooks，徹底解決了這些痛點，今天就來分享一下實現思路和使用技巧。
為什麼需要這個 Hooks？
前端
林恆 -
前端技巧：檢測到省略號文本自動顯示 Tooltip
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
前言
在前端開發中，我們經常會遇到接口返回的文本內容過長，無法完全顯示的問題。為了處理這一問題，通常會設置固定的寬度並使用省略號樣式（text-overflow: ellipsis）來隱藏超出的文本。然而，有時產品需求還希望用户能夠通過懸停查看完整內容，這時就需要引入 Tooltip 進行展示。（沒被省略的時候不
前端
林恆 -
説一下 localhost 和127.0.0.1 的區別
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
localhost是主機名（域名） ，屬於應用層概念；
127.0.0.1是IPv4 迴環地址，屬於網絡層概念。
兩者都用於訪問本機服務，但localhost必須通過解析才能映射到具體 IP（默認是127.0.0.1或 IPv6 的::1），而127.0.0.1是直接的網絡層標識，無需解析。
一、本質定義與協
前端
林恆 -
神級JS API，誰用誰好用
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
1. ResizeObserver
ResizeObserver 是一個瀏覽器原生的 JavaScript API，用於監聽 DOM 元素尺寸的變化。它類似於 MutationObserver，但專門用於觀察元素的大小（寬高）變化，而無需依賴 window.resize 事件（後者只對視口變化有效）。
🧩 基本用法
前端
林恆 -
在 Web 前端實現流式 TTS 播放
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
🧠 在 Web 前端實現流式 TTS 播放：從卡頓雜音到絲滑順暢的演進之路
在做前端實時語音合成（TTS）時，很多人都會遇到同樣的問題：
播放出來的語音一頓一頓的，很卡頓
聲音中夾雜“咔嗒”聲、雜音、斷裂
明明音頻格式是 MP3，也無法做到“接收到就播放”
本文將帶你走一遍真實的排坑過
前端
林恆 -
總結 Next.js 中的 Server Actions
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
我們知道，Next.js 最核心的特性便是 支持靜態生成（SSG）和服務端渲染（SSG），這也就意味着我們可以以部署 Node 服務的方式，將其部署在服務器上，用請求後端接口類似的形式來請求頁面文件。換句話説，我們其實可以直接把 Next.js 看成一個特殊的 Node 後端服務。
既然是在服務端進行運行，那麼它在數據庫
前端
林恆 -
使用自定義API接入OpenAI CodeX配置教程
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
Codex 是OpenAI 推出的一系列人工智能編碼工具，通過將任務委託給強大的雲端和本地編碼代理，幫助開發人員提升工作效率。支持原生終端、vscode插件、cursor插件等場景使用。
官網網站openai.com/codex/
系統要求
步驟一：安裝Codex CLI
選擇一種安裝方式即可。
npm（通用）
npm i
前端
林恆 -
VUE3大屏自適應佈局
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
1. 視口單位佈局 (Viewport Units)
使用vw和vh單位來實現響應式佈局：
.full-screen {
width: vw(1920);
height: vh(1080);
padding: vh(5) vw(5) vh(5) vw(5);
}
.header-title {
font-size
前端
林恆 -
uni-app 無法實現全局 Toast？這個方法做到了！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
大家好，我是不如摸魚去，wot-ui的主要維護者，歡迎來到我的 uni-app 分享專欄。
在 uni-app 開發中，我們經常遇到需要在任何地方（如網絡請求攔截器、路由守衞等）顯示 Toast 提示的需求。然而，uni-app 的組件化架構使得全局 Toast 的實現變得複雜。本文將介紹一套完整的解決方案，讓你輕鬆實現
前端
林恆 -
為什麼你的JavaScript代碼總是出bug？這5個隱藏陷阱太坑了！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
你是不是經常遇到這樣的情況：明明代碼看起來沒問題，一運行就各種報錯？或者測試時好好的，上線後用户反饋bug不斷？更氣人的是，有時候改了一個小問題，結果引出了三個新問題……
別擔心，這絕對不是你的能力問題。經過多年的觀察，我發現大多數JavaScript開發者都會掉進同樣的陷阱裏。今天我就來幫你揪出這些隱藏的bug製造機，讓你的代
前端
林恆 -
JavaScript性能優化：我從50ms降到5ms的7個關鍵技巧
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
引言
在現代Web開發中，性能優化是一個永恆的話題。隨着前端應用的複雜度不斷提升，JavaScript的執行效率直接影響用户體驗。我曾面臨一個關鍵功能的性能瓶頸——初始實現需要50ms完成的任務，通過一系列優化手段成功降至5ms。本文將分享這7個關鍵技巧，涵蓋從代碼層面到運行時優化的全方位實踐。
主體
1. 減少DOM操作：批量
前端
林恆 -
鴻蒙應用開發---語音轉文本
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
一、工具
二、開發步驟
將一段中文音頻轉換為文本
1.在使用語音識別時，將實現語音識別相關的類添加至工程。
import { speechRecognizer } from '@kit.CoreSpeechKit';
import { BusinessError } from '@kit.BasicServicesKit';
harmonyos
林恆 -
記錄---瀏覽器多窗口通信有效實踐總結
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
如何跨越不同窗口通信
在現代 Web 開發中，多個窗口或標籤頁之間的通信成為了越來越常見的需求，尤其是在應用需要同步數據、共享狀態或進行實時更新的場景中。不同窗口間的通信方式有很多種，選擇合適的方式可以大大提高開發效率和用户體驗。本文將詳細介紹幾種常見的瀏覽器多窗口通信技術，並結合實際代碼示例，分析它們的優缺點及兼容性。
前端
,
html5
林恆 -
如何跨標籤頁通信
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
開篇小劇場：為什麼標籤頁要"聊天"？
想象你在網上商城：
標籤1：瀏覽商品頁
標籤2：開着購物車
當你在標籤1點擊"加入購物車"，標籤2的購物車數字應該立即+1！這就是標籤頁通信的魔力啦！✨
🎨 方案1：BroadCast Channel（對講機頻道）
🛠️ 方案2：Service Worker（隱形郵差）
📦 方案3
前端
,
html5
林恆 -
B站首頁的 Banner 這麼好看，我讓你直接用到你的項目！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
寫在前面
我最開始是用 Angular 去實現了B站的 Banner ，那時候還沒有人做這東西，可以看到下面那一長串 Bannet 圖片的第一個圖是好幾年以前的了。然後隨着逐步完善，在這幾年偶爾也看到有人發過這東西的實現方法。
但我為什麼要寫這篇文章？因為我打算用原生 JS 和三大框架都去實現一遍，以滿足所有人的需求
前端
,
html5
林恆 -
如何進行頁面前端監控
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
前端監控主要分三個方向
前端性能（用户體驗優化）
異常監控
業務指標跟
下面我來分別介紹三類指標如何獲取
1）前端性能指標：
一、用户體驗相關的：
頁面加載時間（Page Load Time） ：
定義：從用户請求頁面到頁面完全加載的時間。
前端
,
html5
林恆 -
記錄---讓網頁像現實世界一樣“拿起來，放進去”
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
引言
2025年，我們早已習慣用手指滑動屏幕、拖動文件。而這一切流暢體驗的背後，HTML5 的拖拽（Drag and Drop）功能功不可沒。它讓網頁不再只是“點一點”，而是可以“拖一拖、放一放”，大大提升了交互的直觀性和用户體驗。
為什麼拖拽如此重要？
回想一下 iPad 為何能迅速風靡全球？一個重要原因就是它的操作“傻
前端
,
html5
