鴻蒙應用開發---語音轉文本
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 一、工具 二、開發步驟 將一段中文音頻轉換為文本 1.在使用語音識別時，將實現語音識別相關的類添加至工程。 import { speechRecognizer } from '@kit.CoreSpeechKit'; import { BusinessError } from '@kit.BasicServicesKit';
林恆 Blog
Stories
List
記錄---瀏覽器多窗口通信有效實踐總結
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 如何跨越不同窗口通信 在現代 Web 開發中，多個窗口或標籤頁之間的通信成為了越來越常見的需求，尤其是在應用需要同步數據、共享狀態或進行實時更新的場景中。不同窗口間的通信方式有很多種，選擇合適的方式可以大大提高開發效率和用户體驗。本文將詳細介紹幾種常見的瀏覽器多窗口通信技術，並結合實際代碼示例，分析它們的優缺點及兼容性。
B站首頁的 Banner 這麼好看，我讓你直接用到你的項目！
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 寫在前面 我最開始是用 Angular 去實現了B站的 Banner ，那時候還沒有人做這東西，可以看到下面那一長串 Bannet 圖片的第一個圖是好幾年以前的了。然後隨着逐步完善，在這幾年偶爾也看到有人發過這東西的實現方法。 但我為什麼要寫這篇文章？因為我打算用原生 JS 和三大框架都去實現一遍，以滿足所有人的需求
如何進行頁面前端監控
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前端監控主要分三個方向 前端性能（用户體驗優化） 異常監控 業務指標跟 下面我來分別介紹三類指標如何獲取 1）前端性能指標： 一、用户體驗相關的： 頁面加載時間（Page Load Time） ： 定義：從用户請求頁面到頁面完全加載的時間。
記錄---讓網頁像現實世界一樣“拿起來，放進去”
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 引言 2025年，我們早已習慣用手指滑動屏幕、拖動文件。而這一切流暢體驗的背後，HTML5 的拖拽（Drag and Drop）功能功不可沒。它讓網頁不再只是“點一點”，而是可以“拖一拖、放一放”，大大提升了交互的直觀性和用户體驗。 為什麼拖拽如此重要？ 回想一下 iPad 為何能迅速風靡全球？一個重要原因就是它的操作“傻
記錄--JavaScript 中有趣的 9 個常用編碼套路
這裏給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1️⃣ set對象：數組快速去重 常規情況下，我們想要篩選唯一值，一般會想到遍歷數組然後逐個對比，或者使用成熟的庫比如lodash之類的。 不過，ES6帶來了一個新玩意兒！它引入了一個全新的對象類型：Set！而且，如果結合上...展開運算符，我們可以超級快速地創建一個已經去重的全新數組！😎 const arr = [
如何判斷一個元素是否在可視區域中？
一、用途 可視區域即我們瀏覽網頁的設備肉眼可見的區域，如下圖 在日常開發中，我們經常需要判斷目標元素是否在視窗之內或者和視窗的距離小於一個值（例如 100 px），從而實現一些常用的功能，例如： 圖片的懶加載 列表的無限滾動 計算廣告元素的曝光情況 可點擊鏈接的預加載 二、實現方式 判斷一個元素是否在可視區域，我們常用的有三種辦法： offsetTop、scrollTop
記錄：瀑布流最佳實現方案
傳統實現方式 當前文章的gif文件較大，加載的時長可能較久 這裏我拿小紅書的首頁作為分析演示 可以看到他們的實現方式是傳統做法，把每個元素通過獲取尺寸，然後算出left、top的排版位置，最後在每個元素上設置偏移值，思路沒什麼好説的，就是算元素座標。那麼這種做法有什麼缺點？請看下面這張圖的操作 容器尺寸每發生一次變化，容器內部所有節點都需要更新一次樣式設置，當頁面元素
記錄---前端實現倒計時為什麼會存在誤差呢
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 1. 前端倒計時為何不準？ 1.1 JavaScript的“單線程陷阱” JavaScript是單線程語言，所有任務（包括定時器回調）都在同一個線程中排隊執行。當主線程被耗時任務（如複雜計算、網絡請求）阻塞時，定時器回調只能“望隊興嘆”，導致實際執行時間遠晚於預期時間。就像一家只有一個收銀台的超市，即使定時
記錄---一篇文了解qiankun的代碼隔離原理
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 隨着前端業務的快速發展，微前端架構已經被廣泛採用，其中qiankun作為主流解決方案也越來越受到關注。前幾天面試時，我就被問到了一個高頻問題：qiankun 是如何實現 JS 和 CSS 隔離的？ qiankun 的JS 沙箱 qiankun 的微前端場景是：主應用加載多個子應用，不同子應用可能依賴不同版本的庫、全
記錄---npm link 詳解：本地包開發與測試的利器
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 npm link 詳解：本地包開發與測試的利器 什麼是 npm link？ npm link 是 npm 提供的一個強大功能，它允許你在本地開發環境中創建符號鏈接，將本地開發的包鏈接到其他項目中進行測試和使用。這個功能特別適合在開發自己的 npm 包時進行本地調試和測試。 核心概念 符號鏈接（Symbolic
記錄---從零開始編寫 useWindowSize Hook
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 在 React 開發中，我們經常需要根據窗口大小來調整組件的行為。今天我們將從最簡單的實現開始，逐步優化，最終構建出一個高性能的useWindowSizeHook。 第一步：最簡單的實現 讓我們從最基礎的版本開始： import { useState, useEffect } from 'react' function useW
記錄---啊！！！Blob 居然這麼強大！
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 啊！！！Blob 居然這麼強大！ 在前端開發的世界裏，我們每天都在和各種 API、對象和數據打交道。然而，有一個對象，常常被我們忽視，卻又在背後默默支撐着許多關鍵功能 —— 它就是 Blob。 Blob（Binary Large Object）聽起來像是一個“冷門”對象，但實際上，它幾乎無處不在：文件上傳、下載、視頻
記錄---瀏覽器指紋-探究前端如何識別用户設備
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 什麼是瀏覽器指紋？ 瀏覽器指紋，是用來唯一標識你瀏覽器的一組“特徵值”。它不是我們理解中的那種真實指紋，而是通過收集瀏覽器、操作系統、設備分辨率、字體、插件等信息，組合成的一個獨特 ID。 和傳統的 Cookie 不同，瀏覽器指紋不需要在用户設備上存儲任何東西，完全是“讀取現有信息”來識別用户。 使用背景 在最近的項目
記錄---基於uniapp，編寫一個自定義的日期組件
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 環境配置 系統：windows10 平台：HBuilderX4.76 語言：vue、javascript 庫：uni 概述 本文是基於uniapp，編寫的自定義日期選擇器組件，大致效果如下： 1、組件簡介 這是一個日期選擇器，即可以選擇年、月、日的組件，所以，組件的功能是很簡單的，組件的效果就是如上面的效果圖所
記錄---前端微服務框架深度對比：無界（Momentum）與乾坤（Qiankun）實戰指南
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 一、引言：為何選擇微前端？ 在傳統單體前端架構中，隨着業務複雜度增加，代碼臃腫、協作困難、部署效率低等問題愈發突出。微前端通過將項目拆分為多個獨立自治的微應用，解決了這些問題： 技術棧無關：支持 Vue、React、Angular 等框架混合開發 獨立部署：各團隊可獨立開發、測試、發佈 漸進升級：允許逐步重構舊系統 動態加載
記錄---window.close()失效 + Chrome瀏覽器調試線上代碼
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 情況説明 主系統單點登錄點擊觸發window.open()打開本系統。 是發佈生產後的新需求：要求退出登錄後直接關閉當前系統頁面。 本地運行增加了window.close()方法實現功能，點擊退出後頁面沒反應。 排查過程 官方解析中説明，window.close() 方法只能關閉由window.open()或者瀏覽器直接輸入
記錄---圖文並茂講解nginx中http升級https（部署SSL證書）知識點總結
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 為何網站要升級為https 原因有以下幾點: 1. 避免瀏覽器的不安全的警告 瀏覽器對於http的網站會在地址欄明確標記【不安全】字樣 這樣直接降低用户對網站的信任度 造成用户流失 甚至可能被用户誤認為是釣魚網站 如下圖，是筆者的網站沒有升級https證書的時候的樣子 升級後的 2. 加密傳輸數據，防止數據泄露
CSS3 超實用屬性:pointer-events (可穿透圖層的鼠標事件)
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 CSS3pointer-events屬性：實現可穿透圖層的鼠標事件 在網頁開發中，我們通常會遇到多個元素重疊的情況。在這種情況下，如何使得被遮擋的元素仍然能夠響應鼠標事件呢？CSS3 引入了pointer-events屬性，允許開發者控制元素是否能夠接收鼠標事件。通過合理使用pointer-events，可以使得圖層下的元素“穿透”上
【前端效率工具】：告別右鍵另存，不到 50 行代碼一鍵批量下載網頁圖片
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 先看效果：在素材網站一鍵批量保存所有圖片 廢話不多説，直接上手！ 項目結構 image-downloader-extension ├── manifest.json # 擴展的"身份證" └── background.js # 插件後台腳本 創建文件夾image-downloader-exten
棄用 html2canvas！快 93 倍的截圖神器
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 在前端開發中，網頁截圖是個常用功能。從前，html2canvas是大家的常客，但隨着網頁越來越複雜，它的性能問題也逐漸暴露，速度慢、佔資源，用户體驗不盡如人意。 好在，現在有了SnapDOM，一款性能超棒、還原度超高的截圖新秀，能完美替代html2canvas，讓截圖不再是麻煩事。 什麼是 SnapDOM SnapDO