11個(gè)JS神級(jí)API，前端效率翻倍
作為前端開發(fā)者，你是不是也常遇到重復(fù)操作耗時(shí)間、調(diào)試麻煩的問(wèn)題？今天分享11個(gè)前端大佬私藏的JS神級(jí)API，復(fù)制粘貼就能用，分分鐘提升效率，摸魚時(shí)間都變多！
1. 一鍵復(fù)制文本：告別手動(dòng)選中的麻煩
場(chǎng)景：調(diào)試時(shí)想復(fù)制接口返回的長(zhǎng)JSON，以前得用console.log→手動(dòng)選中→復(fù)制，經(jīng)常復(fù)制不全。現(xiàn)在用navigator.clipboard.writeText API，一行代碼直接復(fù)制到剪貼板！
// 復(fù)制任意文本
function copyText(text) {
navigator.clipboard.writeText(text);
}
// 用法
copyText("這串?dāng)?shù)據(jù)太長(zhǎng)了，直接復(fù)制走！");
案例：封裝一個(gè)按鈕，點(diǎn)擊就能復(fù)制接口返回的data：
這一下就能省下30秒，夠刷半條抖音了～
2. 檢測(cè)用戶輸入狀態(tài)：減少不必要的請(qǐng)求
場(chǎng)景：搜索框輸入時(shí)，不想每敲一個(gè)字就發(fā)請(qǐng)求，想等用戶停手再查。用input事件+setTimeout組合就能解決！
let typingTimer;
const input = document.getElementById('search');
input.addEventListener('input', () => {
clearTimeout(typingTimer);
typingTimer = setTimeout(() => {
console.log('用戶打完了，去請(qǐng)求吧');
// 調(diào)搜索接口
}, 500); // 500毫秒內(nèi)沒(méi)輸入=停手
});
公司內(nèi)部搜索功能加了這個(gè)，接口請(qǐng)求量直接降了80%，服務(wù)器壓力都小了！
3. 監(jiān)聽頁(yè)面可見(jiàn)性：后臺(tái)不做無(wú)用功
場(chǎng)景：用戶切到其他軟件，頁(yè)面不可見(jiàn)時(shí)，別再瘋狂刷新數(shù)據(jù)。用visibilitychange事件就能檢測(cè)頁(yè)面是否在后臺(tái)！
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
console.log('用戶切后臺(tái)了，暫停輪詢');
// 暫停輪詢、視頻、動(dòng)畫
} else {
console.log('用戶回來(lái)了，繼續(xù)干活');
// 恢復(fù)輪詢
}
});
后臺(tái)管理系統(tǒng)的實(shí)時(shí)訂單刷新用這個(gè)，切后臺(tái)就暫停，回來(lái)再恢復(fù)，既省電又省服務(wù)器資源～
4. 檢測(cè)網(wǎng)絡(luò)狀態(tài)：避免用戶誤操作
場(chǎng)景：用戶進(jìn)地鐵沒(méi)網(wǎng)，點(diǎn)提交沒(méi)反應(yīng)還以為代碼有bug？用online和offline事件就能實(shí)時(shí)檢測(cè)網(wǎng)絡(luò)狀態(tài)！
window.addEventListener('online', () => {
alert('網(wǎng)絡(luò)恢復(fù)啦，可以繼續(xù)操作！');
});
window.addEventListener('offline', () => {
alert('沒(méi)網(wǎng)啦！先檢查網(wǎng)絡(luò)再操作～');
});
我們做的表單提交功能加了這個(gè)，斷網(wǎng)時(shí)按鈕變灰提示，用戶體驗(yàn)直接拉滿！
5. 檢測(cè)滾動(dòng)到底部：輕松實(shí)現(xiàn)無(wú)限加載
場(chǎng)景：做商品列表、文章列表時(shí)，想實(shí)現(xiàn)上拉加載更多？用scroll事件+scrollTop就能搞定！
window.addEventListener('scroll', () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 5) {
console.log('到底了，加載下一頁(yè)');
// 調(diào)用加載接口
}
});
公司商品列表頁(yè)用這個(gè)，50行代碼就實(shí)現(xiàn)了無(wú)限滾動(dòng)，產(chǎn)品經(jīng)理都夸專業(yè)！
6. 獲取用戶地理位置：打卡簽到so easy
場(chǎng)景：做打卡、簽到、本地服務(wù)推薦時(shí)，需要獲取用戶位置？用navigator.geolocation.getCurrentPosition API就行！
function getLocation() {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`緯度: ${latitude}, 經(jīng)度: ${longitude}`);
// 傳給后端判斷是否在范圍內(nèi)
},
(error) => {
console.log('獲取位置失?。?, error.message);
}
);
}
// 調(diào)用
getLocation();
注意：瀏覽器會(huì)彈授權(quán)框，用戶可能拒絕，記得做容錯(cuò)處理～
7. 全屏顯示：演示時(shí)逼格拉滿
場(chǎng)景：給老板演示系統(tǒng)、嵌PPT時(shí)，想全屏展示？用requestFullscreen和exitFullscreen API就能一鍵全屏！
// 開啟全屏
function openFullscreen() {
const elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
}
// 退出全屏
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
匯報(bào)時(shí)點(diǎn)一下全屏，領(lǐng)導(dǎo)都夸“這小伙子會(huì)來(lái)事”～
8. 檢測(cè)設(shè)備類型：適配手機(jī)/PC更簡(jiǎn)單
場(chǎng)景：手機(jī)端想隱藏復(fù)雜功能，PC端才顯示？不用解析UA字符串，看屏幕寬度更靠譜！
function isMobile() {
return window.innerWidth <= 768;
}
// 用法
if (isMobile()) {
document.getElementById('complex-feature').style.display = 'none';
}
這樣適配手機(jī)/PC，比寫一堆UA判斷簡(jiǎn)單多了！
9. DOM加載完成再執(zhí)行：避免“找不到元素”報(bào)錯(cuò)
場(chǎng)景：JS執(zhí)行時(shí)DOM還沒(méi)加載完，報(bào)錯(cuò)“找不到元素”？用DOMContentLoaded事件就能解決！
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM加載完了，可以操作元素了');
// 初始化組件、綁定事件
});
它比window.onload快多了——window.onload要等所有資源（圖片、CSS）加載完，而DOMContentLoaded只等HTML結(jié)構(gòu)加載完！
10. 本地存儲(chǔ)：記住用戶偏好設(shè)置
場(chǎng)景：用戶調(diào)了主題色、字體大小，關(guān)頁(yè)面再開又要重新調(diào)？用localStorage就能記住用戶偏好！
// 存偏好
localStorage.setItem('theme', 'dark');
localStorage.setItem('fontSize', '16px');
// 取偏好
const theme = localStorage.getItem('theme'); // 'dark'
const size = localStorage.getItem('fontSize'); // '16px'
// 頁(yè)面加載時(shí)應(yīng)用
document.body.className = theme;
document.body.style.fontSize = size;
公司后臺(tái)系統(tǒng)用這個(gè)，用戶換膚后下次登錄自動(dòng)記住，省得再調(diào)～
11. 結(jié)構(gòu)化打印數(shù)據(jù)：console.table()更清晰
場(chǎng)景：用console.log看數(shù)組數(shù)據(jù)，眼睛都花了？用console.table()就能以表格形式展示，清晰多了！
const users = [
{ name: '張三', age: 25, job: '前端' },
{ name: '李四', age: 30, job: '后端' },
{ name: '王五', age: 28, job: '設(shè)計(jì)' }
];
console.table(users);
一行代碼，數(shù)據(jù)結(jié)構(gòu)一目了然，調(diào)試時(shí)省了超多時(shí)間！
以上11個(gè)JS神級(jí)API，每一個(gè)都是前端開發(fā)中常用的，復(fù)制粘貼就能用，分分鐘提升效率。其實(shí)，除了這些小技巧，專業(yè)的開發(fā)工具和系統(tǒng)能更全面提升團(tuán)隊(duì)效率——比如火貓網(wǎng)絡(luò)的業(yè)務(wù)，涵蓋網(wǎng)站開發(fā)、小程序開發(fā)、智能體工作流開發(fā)，幫你解決從前端到后端的各種開發(fā)問(wèn)題，讓團(tuán)隊(duì)效率翻倍！
如果您有開發(fā)需求，歡迎聯(lián)系徐先生：18665003093（微信號(hào)同手機(jī)號(hào)），隨時(shí)為您解答！