JavaScript！十個強到離譜的API，90%的人都不知道
作者：Springboot實戰案例錦集
在Web開發中，JavaScript 已成為構建動態、交互式應用的核心工具。隨著瀏覽器能力不斷擴展，開發者已不再局限于基礎DOM操作，而是能通過豐富的原生API實現復雜功能。從實時通信的Web Sockets到離線存儲的IndexedDB等等，這些API覆蓋了網絡請求、性能優化等關鍵場景。
環境：SpringBoot3.4.2
1. 簡介
在Web開發中，JavaScript 已成為構建動態、交互式應用的核心工具。隨著瀏覽器能力不斷擴展，開發者已不再局限于基礎DOM操作，而是能通過豐富的原生API實現復雜功能。從實時通信的Web Sockets到離線存儲的IndexedDB等等，這些API覆蓋了網絡請求、性能優化等關鍵場景。
本篇文章精選了10個神級API，涵蓋頁面生命周期管理、跨標簽通信、數據可視化優化等前沿需求，將幫助開發者突破傳統開發邊界，以更簡潔的代碼實現更強大的功能。
2.實戰案例
2.1 頁面可見性
當用戶切換標簽頁時，自動暫停視頻播放或停止后臺輪詢任務，以節省資源。
HTML頁面
<div class="api-section">
<h2>1. Page Visibility API</h2>
<p>當頁面隱藏時自動暫停視頻播放</p>
<div class="video-container">
<video id="myVideo" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
您的瀏覽器不支持HTML5視頻
</video>
</div>
<div class="info">狀態: <span id="visibilityStatus">頁面可見</span></div>
</div>JavaScript實現
const video = document.querySelector('#myVideo')
const visibilityStatus = document.querySelector('#visibilityStatus')
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
video.pause();
visibilityStatus.textContent = '頁面隱藏 - 視頻已暫停'
} else {
video.play();
visibilityStatus.textContent = '頁面可見 - 視頻已播放'
}
});最終效果
圖片
當我們將頁面最小化后或者切換標簽頁時，這里的播放會自動暫停，切換回來時會自動的播放。
2.2 Web共享API
調用系統原生分享對話框，允許用戶一鍵分享當前頁面內容至社交平臺或郵件，無需依賴第三方庫，簡化移動端分享流程。
HTML頁面
<div class="api-section">
<h2>2. Web Share API</h2>
<p>調用系統原生分享對話框</p>
<button id="shareBtn" class="btn">分享本頁面</button>
<div id="shareOutput" class="output"></div>
</div>JavaScript實現
document.getElementById('shareBtn').addEventListener('click', async () => {
const output = document.querySelector('#shareOutput');
if (navigator.share) {
try {
await navigator.share({
title: '現代瀏覽器API演示',
text: '查看這些強大的瀏覽器API示例',
url: window.location.href,
});
output.textContent = '分享成功!';
} catch (err) {
output.textContent = '分享取消或出錯: ' + err.message;
}
} else {
output.textContent = '您的瀏覽器不支持Web Share API';
}
});最終效果
圖片
圖片
2.3 跨標簽頁通信
實現跨標簽頁實時通信，通過統一頻道發送和接收消息，適用于多標簽頁協同操作（如購物車同步），無需輪詢或復雜后端支持。
HTML頁面
<!-- 發送消息頁面index.html -->
<div class="api-section">
<h2>3. Broadcast Channel API</h2>
<p>跨標簽頁通信 (打開多個標簽頁測試)</p>
<button id="sendBroadcastBtn" class="btn">發送廣播消息</button>
<div id="broadcastOutput" class="output">等待接收消息...</div>
</div>
<!--接收消息頁面-->
<div class="message"></div>JavaScript實現
// 發送消息頁面index.html
const broadcastChannel = new BroadcastChannel('demo_channel');
const broadcastOutput = document.querySelector('#broadcastOutput');
document.querySelector('#sendBroadcastBtn').addEventListener('click', () => {
const message = `選擇了《Spring Boot 3實戰案例200講》電子書`;
broadcastChannel.postMessage(message);
broadcastOutput.textContent = `已發送: ${message}`;
});
// 接收消息頁面message.html
const broadcastChannel = new BroadcastChannel('demo_channel');
const message = document.querySelector('.message');
broadcastChannel.onmessage = (e) => {
message.textContent = `已接收: ${e.data}`;
};最終效果
圖片
圖片
2.4 數字格式化
國際化數字格式化工具，支持貨幣、百分比等格式本地化顯示（如千位分隔符、貨幣符號），確保數字在不同語言環境下正確呈現。
HTML頁面
<div class="api-section">
<h2>4. Intl.NumberFormat</h2>
<p>數字和貨幣格式化</p>
<button id="formatNumberBtn" class="btn">格式化數字</button>
<button id="formatCurrencyBtn" class="btn">格式化貨幣</button>
<div id="numberFormatOutput" class="output"></div>
</div>JavaScript實現
document.querySelector('#formatNumberBtn').addEventListener('click', () => {
const number = 1234567.89
const formatted = new Intl.NumberFormat('en-US').format(number)
document.querySelector('#numberFormatOutput').textContent = `格式化結果: ${formatted}`
});
document.querySelector('#formatCurrencyBtn').addEventListener('click', () => {
const number = 1234567.89;
const formatted = new Intl.NumberFormat('zh-CN', {
style: 'currency',
currency: 'CNY'
}).format(number)
document.querySelector('#numberFormatOutput').textContent = `貨幣格式化結果: ${formatted}`
});最終效果
2.5 監聽元素與可視窗口
高效監聽元素與視口的交叉狀態，實現圖片懶加載或廣告曝光統計，替代傳統滾動事件監聽，減少性能損耗并優化頁面加載速度。
HTML頁面
<div class="api-section">
<h2>5. IntersectionObserver</h2>
<p>圖片懶加載 (向下滾動查看效果)</p>
<div style="height: 100px;"></div>
<img data-src="https://picsum.photos/600/400?random=1" alt="Lazy Image 1">
<img data-src="https://picsum.photos/600/400?random=2" alt="Lazy Image 2">
<img data-src="https://picsum.photos/600/400?random=3" alt="Lazy Image 3">
<div style="height: 100px;"></div>
<div id="lazyLoadOutput" class="output">等待圖片進入視口...</div>
</div>JavaScript實現
const lazyLoadObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target
img.src = img.dataset.src
lazyLoadObserver.unobserve(img)
document.querySelector('#lazyLoadOutput').textContent += `\n已加載圖片: ${img.alt}`
}
})
})
document.querySelectorAll('img[data-src]').forEach(img => {
lazyLoadObserver.observe(img)
})最終效果
圖片
2.6 觀察元素大小變化
HTML實現
<div class="api-section">
<h2>6. ResizeObserver</h2>
<p>監聽元素尺寸變化 (拖動右下角調整大小)</p>
<div id="box">調整我的大小</div>
<div id="resizeOutput" class="output">尺寸: 等待調整...</div>
</div>JavaScript實現
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const { width, height } = entry.contentRect
document.querySelector('#resizeOutput').textContent =
`尺寸: ${width.toFixed(0)}px × ${height.toFixed(0)}px`
}
})
resizeObserver.observe(document.querySelector('#box'))最終效果
圖片
2.7 異步剪貼板操作
異步讀寫剪貼板內容，支持無權限提示的文本復制（如優惠券代碼），替代傳統document.execCommand，提供更安全可靠的剪貼板操作。
HTML頁面
<div class="api-section">
<h2>7. Clipboard API</h2>
<p>復制文本到剪貼板</p>
<div class="coupon-container">
<input type="text" id="coupon" value="COUPON2025" readonly>
<button id="copyBtn" class="btn">復制</button>
</div>
<div id="clipboardOutput" class="output"></div>
</div>JavaScript實現
document.getElementById('copyBtn').addEventListener('click', async () => {
const output = document.querySelector('#clipboardOutput')
try {
await navigator.clipboard.writeText(document.getElementById('coupon').value)
output.textContent = '已復制到剪貼板!'
} catch (err) {
output.textContent = '復制失敗: ' + err.message
}
})最終效果
圖片
2.8 URL查詢字符串解析
簡化URL查詢參數解析與構建，支持動態增刪改查參數（如分頁、篩選條件），無需手動拼接字符串，提升前端路由和API調用效率。
HTML頁面
<div class="api-section">
<h2>8. URLSearchParams</h2>
<p>解析和構建URL查詢字符串</p>
<button id="parseUrlBtn" class="btn">解析當前URL參數</button>
<button id="buildUrlBtn" class="btn">構建新URL</button>
<div id="urlOutput" class="output"></div>
</div>JavaScript實現
document.querySelector('#parseUrlBtn').addEventListener('click', () => {
const params = new URLSearchParams(window.location.search)
const output = document.querySelector('#urlOutput')
if (params.toString() === '') {
output.textContent = '當前URL沒有查詢參數'
} else {
let result = '解析結果:\n'
params.forEach((value, key) => {
result += `${key}: ${value}\n`
});
output.textContent = result
}
});
document.querySelector('#buildUrlBtn').addEventListener('click', () => {
const params = new URLSearchParams()
params.append('page', '2')
params.append('sort', 'desc')
params.append('q', '瀏覽器API')
const url = `${window.location.origin}${window.location.pathname}?${params.toString()}`
document.querySelector('#urlOutput').textContent = `構建的URL: ${url}`
});最終效果
2.9 終止異步操作
中止異步操作（如fetch請求），通過信號對象統一管理取消邏輯，避免資源浪費，適用于搜索建議、實時數據流等可中斷場景。
HTML頁面
<div class="api-section">
<h2>9. AbortController</h2>
<p>中止fetch請求</p>
<button id="fetchBtn" class="btn">發起請求</button>
<button id="abortBtn" class="btn btn-secondary">中止請求</button>
<div id="fetchOutput" class="output"></div>
</div>JavaScript實現
let fetchController;
document.querySelector('#fetchBtn').addEventListener('click', async () => {
const output = document.querySelector('#fetchOutput')
fetchController = new AbortController()
try {
output.textContent = '請求中...'
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
signal: fetchController.signal
})
const data = await response.json()
output.textContent = `請求成功: ${JSON.stringify(data).substring(0, 100)}...`
} catch (err) {
if (err.name === 'AbortError') {
output.textContent = '請求已被中止'
} else {
output.textContent = '請求出錯: ' + err.message
}
}
});
document.querySelector('#abortBtn').addEventListener('click', () => {
if (fetchController) {
fetchController.abort()
}
});最終效果
圖片
2.10 空閑時間執行任務
利用瀏覽器空閑期執行低優先級任務（如日志上報、預加載），避免阻塞主線程，優化頁面響應速度，提升用戶交互流暢度。
HTML頁面
<div class="api-section">
<h2>10. requestIdleCallback</h2>
<p>在瀏覽器空閑時執行任務</p>
<button id="idleTaskBtn" class="btn">安排空閑任務</button>
<div id="idleOutput" class="output"></div>
</div>JavaScript實現
const tasks = ['任務1', '任務2', '任務3', '任務4', '任務5']
document.querySelector('#idleTaskBtn').addEventListener('click', () => {
const output = document.getElementById('idleOutput')
output.textContent = '已安排空閑任務...'
function executeTasks(deadline) {
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
const task = tasks.pop()
output.textContent += `\n執行: ${task}`
// 模擬任務耗時
const start = performance.now()
while (performance.now() - start < 50) {}
}
if (tasks.length > 0) {
requestIdleCallback(executeTasks, { timeout: 1000 })
} else {
output.textContent += '\n所有任務完成!'
}
}
requestIdleCallback(executeTasks, { timeout: 1000 })
})最終效果
責任編輯：武曉燕
來源：
Springboot全家桶實戰案例
