林恆 -
記錄--JavaScript 中有趣的 9 個常用編碼套路
這裏給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
1️⃣ set對象：數組快速去重
常規情況下，我們想要篩選唯一值，一般會想到遍歷數組然後逐個對比，或者使用成熟的庫比如lodash之類的。
不過，ES6帶來了一個新玩意兒！它引入了一個全新的對象類型：Set！而且，如果結合上...展開運算符，我們可以超級快速地創建一個已經去重的全新數組！😎
const arr = [
jquery
,
前端
林恆 -
如何判斷一個元素是否在可視區域中？
一、用途
可視區域即我們瀏覽網頁的設備肉眼可見的區域，如下圖
在日常開發中，我們經常需要判斷目標元素是否在視窗之內或者和視窗的距離小於一個值（例如 100 px），從而實現一些常用的功能，例如：
圖片的懶加載
列表的無限滾動
計算廣告元素的曝光情況
可點擊鏈接的預加載
二、實現方式
判斷一個元素是否在可視區域，我們常用的有三種辦法：
offsetTop、scrollTop
jquery
,
前端
林恆 -
記錄：瀑布流最佳實現方案
傳統實現方式
當前文章的gif文件較大，加載的時長可能較久
這裏我拿小紅書的首頁作為分析演示
可以看到他們的實現方式是傳統做法，把每個元素通過獲取尺寸，然後算出left、top的排版位置，最後在每個元素上設置偏移值，思路沒什麼好説的，就是算元素座標。那麼這種做法有什麼缺點？請看下面這張圖的操作
容器尺寸每發生一次變化，容器內部所有節點都需要更新一次樣式設置，當頁面元素
jquery
,
前端
林恆 -
記錄---前端實現倒計時為什麼會存在誤差呢
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
1. 前端倒計時為何不準？
1.1 JavaScript的“單線程陷阱”
JavaScript是單線程語言，所有任務（包括定時器回調）都在同一個線程中排隊執行。當主線程被耗時任務（如複雜計算、網絡請求）阻塞時，定時器回調只能“望隊興嘆”，導致實際執行時間遠晚於預期時間。就像一家只有一個收銀台的超市，即使定時
前端
,
Javascript
林恆 -
記錄---一篇文了解qiankun的代碼隔離原理
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
隨着前端業務的快速發展，微前端架構已經被廣泛採用，其中qiankun作為主流解決方案也越來越受到關注。前幾天面試時，我就被問到了一個高頻問題：qiankun 是如何實現 JS 和 CSS 隔離的？
qiankun 的JS 沙箱
qiankun 的微前端場景是：主應用加載多個子應用，不同子應用可能依賴不同版本的庫、全
前端
,
Javascript
林恆 -
記錄---啊！！！Blob 居然這麼強大！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
啊！！！Blob 居然這麼強大！
在前端開發的世界裏，我們每天都在和各種 API、對象和數據打交道。然而，有一個對象，常常被我們忽視，卻又在背後默默支撐着許多關鍵功能 —— 它就是 Blob。
Blob（Binary Large Object）聽起來像是一個“冷門”對象，但實際上，它幾乎無處不在：文件上傳、下載、視頻
Css
,
HTML
,
前端
,
Web
林恆 -
記錄---瀏覽器指紋-探究前端如何識別用户設備
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
什麼是瀏覽器指紋？
瀏覽器指紋，是用來唯一標識你瀏覽器的一組“特徵值”。它不是我們理解中的那種真實指紋，而是通過收集瀏覽器、操作系統、設備分辨率、字體、插件等信息，組合成的一個獨特 ID。
和傳統的 Cookie 不同，瀏覽器指紋不需要在用户設備上存儲任何東西，完全是“讀取現有信息”來識別用户。
使用背景
在最近的項目
Css
,
HTML
,
前端
,
Web
林恆 -
記錄---基於uniapp，編寫一個自定義的日期組件
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
環境配置
系統：windows10
平台：HBuilderX4.76
語言：vue、javascript
庫：uni
概述
本文是基於uniapp，編寫的自定義日期選擇器組件，大致效果如下：
1、組件簡介
這是一個日期選擇器，即可以選擇年、月、日的組件，所以，組件的功能是很簡單的，組件的效果就是如上面的效果圖所
Css
,
HTML
,
前端
,
Web
林恆 -
CSS3 超實用屬性:pointer-events (可穿透圖層的鼠標事件)
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
CSS3pointer-events屬性：實現可穿透圖層的鼠標事件
在網頁開發中，我們通常會遇到多個元素重疊的情況。在這種情況下，如何使得被遮擋的元素仍然能夠響應鼠標事件呢？CSS3 引入了pointer-events屬性，允許開發者控制元素是否能夠接收鼠標事件。通過合理使用pointer-events，可以使得圖層下的元素“穿透”上
前端
林恆 -
【前端效率工具】：告別右鍵另存，不到 50 行代碼一鍵批量下載網頁圖片
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
先看效果：在素材網站一鍵批量保存所有圖片
廢話不多説，直接上手！
項目結構
image-downloader-extension
├── manifest.json # 擴展的"身份證"
└── background.js # 插件後台腳本
創建文件夾image-downloader-exten
前端
林恆 -
移動端h5適配方案
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
em + PostCSS插件
使用PostCSS插件將項目中的px單位自動轉換為rem，搭配JS動態設置根字體大小（監聽window.resize）。
vite配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import
前端
林恆 -
棄用 html2canvas！快 93 倍的截圖神器
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
在前端開發中，網頁截圖是個常用功能。從前，html2canvas是大家的常客，但隨着網頁越來越複雜，它的性能問題也逐漸暴露，速度慢、佔資源，用户體驗不盡如人意。
好在，現在有了SnapDOM，一款性能超棒、還原度超高的截圖新秀，能完美替代html2canvas，讓截圖不再是麻煩事。
什麼是 SnapDOM
SnapDO
前端
