作為前端開發(fā)者，你是不是也常遇到重復(fù)操作耗時(shí)間、調(diào)試麻煩的問題？今天分享11個(gè)前端大佬私藏的JS神級(jí)API，復(fù)制粘貼就能用，分分鐘提升效率，摸魚時(shí)間都變多！

1. 一鍵復(fù)制文本：告別手動(dòng)選中的麻煩

場(chǎng)景：調(diào)試時(shí)想復(fù)制接口返回的長JSON，以前得用console.log→手動(dòng)選中→復(fù)制，經(jīng)常復(fù)制不全?，F(xiàn)在用navigator.clipboard.writeText API，一行代碼直接復(fù)制到剪貼板！

// 復(fù)制任意文本
function copyText(text) {
  navigator.clipboard.writeText(text);
}

// 用法
copyText("這串?dāng)?shù)據(jù)太長了，直接復(fù)制走！");

案例：封裝一個(gè)按鈕，點(diǎn)擊就能復(fù)制接口返回的data：

復(fù)制數(shù)據(jù)

這一下就能省下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)沒輸入=停手
});

公司內(nèi)部搜索功能加了這個(gè)，接口請(qǐng)求量直接降了80%，服務(wù)器壓力都小了！

3. 監(jiān)聽頁面可見性：后臺(tái)不做無用功

場(chǎng)景：用戶切到其他軟件，頁面不可見時(shí)，別再瘋狂刷新數(shù)據(jù)。用visibilitychange事件就能檢測(cè)頁面是否在后臺(tái)！

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('用戶切后臺(tái)了，暫停輪詢');
    // 暫停輪詢、視頻、動(dòng)畫
  } else {
    console.log('用戶回來了，繼續(xù)干活');
    // 恢復(fù)輪詢
  }
});

后臺(tái)管理系統(tǒng)的實(shí)時(shí)訂單刷新用這個(gè)，切后臺(tái)就暫停，回來再恢復(fù)，既省電又省服務(wù)器資源～

4. 檢測(cè)網(wǎng)絡(luò)狀態(tài)：避免用戶誤操作

場(chǎng)景：用戶進(jìn)地鐵沒網(wǎng)，點(diǎn)提交沒反應(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('沒網(wǎng)啦！先檢查網(wǎng)絡(luò)再操作～');
});

我們做的表單提交功能加了這個(gè)，斷網(wǎng)時(shí)按鈕變灰提示，用戶體驗(yàn)直接拉滿！

5. 檢測(cè)滾動(dòng)到底部：輕松實(shí)現(xiàn)無限加載

場(chǎng)景：做商品列表、文章列表時(shí)，想實(shí)現(xiàn)上拉加載更多？用scroll事件+scrollTop就能搞定！

window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  
  if (scrollTop + clientHeight >= scrollHeight - 5) {
    console.log('到底了，加載下一頁');
    // 調(diào)用加載接口
  }
});

公司商品列表頁用這個(gè)，50行代碼就實(shí)現(xiàn)了無限滾動(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ì)來事”～

8. 檢測(cè)設(shè)備類型：適配手機(jī)/PC更簡單

場(chǎng)景：手機(jī)端想隱藏復(fù)雜功能，PC端才顯示？不用解析UA字符串，看屏幕寬度更靠譜！

function isMobile() {
  return window.innerWidth <= 768;
}

// 用法
if (isMobile()) {
  document.getElementById('complex-feature').style.display = 'none';
}

這樣適配手機(jī)/PC，比寫一堆UA判斷簡單多了！

9. DOM加載完成再執(zhí)行：避免“找不到元素”報(bào)錯(cuò)

場(chǎng)景：JS執(zhí)行時(shí)DOM還沒加載完，報(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)頁面再開又要重新調(diào)？用localStorage就能記住用戶偏好！

// 存偏好
localStorage.setItem('theme', 'dark');
localStorage.setItem('fontSize', '16px');

// 取偏好
const theme = localStorage.getItem('theme'); // 'dark'
const size = localStorage.getItem('fontSize'); // '16px'

// 頁面加載時(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ā)問題，讓團(tuán)隊(duì)效率翻倍！

如果您有開發(fā)需求，歡迎聯(lián)系徐先生：18665003093（微信號(hào)同手機(jī)號(hào)），隨時(shí)為您解答！