博客 / 列表

林恆 - 普通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 文檔流 一切佈局的起點

前端

林恆 - 用 10 行代碼就能當 “服務器老闆”+“網絡小偷”+“文件管家”?Node.js:別不信!

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前言 當你叩開 Node.js 的大門,會發現它的內核邏輯恰似一套精密的 “後端工具鏈”:http模塊是搭建服務的 “基建腳手架”,以極簡代碼就能拉起可被瀏覽器訪問的 Web 端點;https模塊是對接外部世界的 “數據導管”,能安全拉取遠程接口的資源流;而fs模塊則是連接本地存儲的 “文件算子”,實現磁盤內容的讀寫調度

前端

林恆 - 甲方嫌棄,項目首頁加載太慢

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 有一天,甲方打開一個後台管理的項目,説有點卡,不太滿意,項目經理叫我優化,重新打包一下。 從輸入地址 到 展示 首屏,最佳時間在 3秒內,否則,甲方掛臉,咱就有可能有被裁的風險,understand? 廢話不多説,先來看一下怎麼個優化法吧。 優化 ✅ cdn 分析 用We

前端

林恆 - JS 裏的 “變量租房記”:閉包是咋把變量 “扣” 下來的?

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前言 你有沒有過這種疑惑: 明明在 “出租屋”(函數)裏放的 “行李”(變量),房東都退房了,這行李咋還能拿出來用?或者循環裏的變量總 “串房間”,明明住 1 號房,結果跑到 6 號房去了?在函數裏定義的變量,出了函數居然還能用? 這背後其實藏着作用域、作用域鏈的 “小九九”,而最終的 “幕後BOSS” 就是 —

前端

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

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前端性能優化實戰:ECharts地圖渲染12萬+數據動態動畫方案 本文記錄了在實際項目中,使用ECharts地圖組件渲染12萬+設備安裝數據的性能優化實戰經驗,包含完整的技術方案和代碼實現。 項目背景 公司需要將全年設備安裝量通過旗幟的形式展示在全國地圖上,實現數據可視化大屏。主要技術挑戰:

前端

林恆 - 微信朋友圈圖片佈局

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 在朋友圈中,除了普遍的一行三列的佈局外,一張、二張、四張圖片時的佈局是不一樣的。一張圖片時,按圖片原有寬高顯示。 兩張圖片,並行展示,圖片會偏大一些。 四張圖片時,一行顯示兩個。 三張、及四張以上時,按一行三列排序。 實現 這裏結合naive ui組件實現圖片展示。頁面獲取到 圖片數據(Array[Object])後通

前端

林恆 - async/await 到底要不要加 try catch?我來給你整明白!

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前言 現在寫異步代碼,基本上就是 Promise 和 async/await 兩種寫法。雖然這倆都能幹同樣的活,但 async/await 寫起來更像同步代碼,讀起來更順眼,所以很多人都説它是"異步編程的終極方案"。 不過有個問題挺讓人糾結的:用 async/await 的時候,到底要不要加 try catch 來抓

前端

林恆 - Uni-app 性能天坑:為什麼 v-if 刪不掉 DOM 節點

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 在開發自定義 Swiper 或長列表組件時,為了優化性能,我們通常會給每一項加上懶加載邏輯: view class="item" template v-if="shouldRender" slot :name="'slot-' + index" / /template /view 神奇的事情發生了: 哪

前端

林恆 - 前端拖拽,看似簡單,其實處處是坑

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 拖拽功能是前端開發裏最常見的交互之一: 從 百度網盤的文件拖拽,到 Figma 的畫布操作,都離不開拖拽能力。 很多人會覺得——拖拽不就是 mousedown + mousemove + mouseup 嗎?三行代碼就能搞定! 但當你真正落地到生產環境時,坑點就會接踵而來: PC 和移動端事

前端

林恆 - ES6 這 8 個隱藏外掛,知道 3 個算我輸!

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 “代碼寫得少,Bug 自然少。”——魯迅(並沒有説) 今天不聊 React、不聊 Vue,回到語言層,挖一挖那些“官方早就給了,但我們總自己造輪子”的 ES6 冷門 API。 它們每一個都經過瀏覽器真·原生實現,無 polyfill 也能跑,一句頂五句,看完直接複製粘貼就能讓同事驚呼“還有這種

前端 , Javascript

林恆 - 用這 9 個 API,我把頁面性能幹到了 90+

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 最近項目上線,用户一多,頁面就卡得不行。首屏加載 3 秒起,滾動掉幀,手機發燙……被 QA 喊去聊了好幾次。 沒辦法,只能低頭研究性能優化。翻了一圈文檔和實戰案例,發現現代瀏覽器其實給了我們很多“外掛”——那些你可能聽過但一直沒用起來的高級 API。 真正用上去之後,頁面流暢度提升非常明顯。今天就來分享我

前端