代码片段

2024-11-27
作者雨辰
~9.57K 字
条评论

此文章记录javascript常用的代码片段。

防抖函数

介绍

在短时间内多次触发，只执行一次。一般用于搜索框，输入框等场景。

const debounce = (callback, delay) => {
    let timer = null;
    return (...args)=>{
        clearTimeout(timer);
        timer = setTimeout(()=>{
            callback.apply(null,args)
        }, delay)
    }
}

使用

const handle = debounce((e)=>{
    console.log(e);
}, 500)
window.addEventListener('mousemove', ()=>{
    handle("防抖")
})

节流函数

介绍

在固定时间内只执行一次。一般用于滚动事件等场景。

const throttle = (callback, delay) => {
    let timer = null;
    return (...args)=>{
        if(!timer){
            timer = setTimeout(()=>{
                callback.apply(null,args)
                timer = null;
            }, delay)
        }
    }
}

使用

const handle = throttle((e)=>{
    console.log(e);
})
window.addEventListener('scroll', ()=>{
    handle("节流")
})

生成随机数

介绍

给定一个最大值和最小值，类型为整数，生成这个区间的随机数，且为整数。

1
2
3

const getRandom = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
}

使用

1 2	const num = getRandom(1, 10); // 生成1到10的随机数 console.log(num);

生成随机字符串

介绍

生成固定长度的随机字符串

function generateRandomString(length) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
}

使用

1 2	const str = generateRandomString(10); console.log(str);

网页全屏

介绍

操作网页的全屏，浏览器直接提供了接口 requestFullscreen() 和 exitFullscreen()，我们唯一需要注意就是解决一些边缘问题，例如浏览器的兼容，解决全屏背景色等问题。

function requestFullscreen(doc) {
    if (doc.mozRequestFullScreen) {
        doc.mozRequestFullScreen();
    } else if (doc.webkitRequestFullScreen) {
        doc.webkitRequestFullScreen();
    } else if (doc.msRequestFullscreen) {
        doc.msRequestFullscreen();
    } else {
        doc.requestFullscreen();
    }
}
function exitFullScreen() {
    if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else {
        document.exitFullscreen();
    }
}
function addFullscreenchangeListener(doc, callback) {
    doc.addEventListener('fullscreenchange', callback);
    doc.addEventListener('mozfullscreenchange', callback);
    doc.addEventListener('webkitfullscreenchange', callback);
    doc.addEventListener('msfullscreenchange', callback);
}
function removeFullscreenchangeListener(doc, callback) {
    doc.removeEventListener('fullscreenchange', callback);
    doc.removeEventListener('mozfullscreenchange', callback);
    doc.removeEventListener('webkitfullscreenchange', callback);
    doc.removeEventListener('msfullscreenchange', callback);
}

全屏样式

1
2
3

:not(:root):fullscreen::backdrop{
    background-color: #fff;
}

使用

addFullscreenchangeListener(document.body, ()=>{
    console.log("全屏状态改变");
})
document.body.addEventListener('click', ()=>{
    requestFullscreen(document.body);
})

移动端禁止双指缩放

介绍

当移动端触摸屏幕时，双指触碰可进行页面的放大和缩小，运用该方法可禁止移动端双指缩放。

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, {
    passive: false
});

根据XPath获取元素

介绍

XPath是定位节点的一种方法，通过XPath可以定位到文档中的任意节点，从而实现对文档的查询、修改等操作。

function getElementsByXPath(xpath, contextNode = document, element = null) {
    const snapshot = contextNode.evaluate(
        xpath,
        element || contextNode,
        null,
        XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
        null
    );
    return Array.from({ length: snapshot.snapshotLength }, (_, i) => snapshot.snapshotItem(i));
}

使用

1	getElementsByXPath('//div[@class="container"]');

javascript书签工具

在浏览器中添加书签，名称随意，网址粘贴以下提供的代码。选择对应的网址，点击书签即可执行对应的功能。

获取元素XPath路径

当需要获取网页元素的XPath路径时，使用该脚本获取对应元素的XPath路径。

javascript:(function () {
    const style = document.createElement('style');
    style.textContent = `
  .element-highlight-border {
    position: absolute;
    pointer-events: none;
    border-radius: 4px;
    z-index: 99999999;
    animation: highlight-pulse 1.5s infinite ease-in-out;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.8),
                inset 0 0 0 2px rgba(74, 144, 226, 0.8);
  }
  
  @keyframes highlight-pulse {
    0%, 100% {
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.8),
                  inset 0 0 0 2px rgba(74, 144, 226, 0.8),
                  0 0 20px 5px rgba(74, 144, 226, 0.4);
    }
    50% {
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 1),
                  inset 0 0 0 3px rgba(74, 144, 226, 1),
                  0 0 30px 10px rgba(74, 144, 226, 0.6);
    }
  }
  
  .click-feedback {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    background: #4a90e2;
    color: white;
    border-radius: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }
  
  .click-feedback.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
`;
    document.head.appendChild(style);

    const border = document.createElement('div');
    border.className = 'element-highlight-border';
    document.body.appendChild(border);

    const feedback = document.createElement('div');
    feedback.className = 'click-feedback';
    feedback.textContent = '✓ XPath已复制';
    document.body.appendChild(feedback);

    function getXPath(element) {
        if (!element || element.nodeType !== 1) return '';

        const siblings = element.parentNode ? Array.from(element.parentNode.children) : [];
        const sameTagSiblings = siblings.filter(e => e.tagName === element.tagName);

        if (sameTagSiblings.length === 1) {
            return `${getXPath(element.parentNode)}/${element.tagName.toLowerCase()}`;
        }

        const index = sameTagSiblings.indexOf(element) + 1;
        return `${getXPath(element.parentNode)}/${element.tagName.toLowerCase()}[${index}]`;
    }

    let currentElement = null;

    function updateHighlight(element) {
        if (!element || element === document.documentElement) {
            border.style.display = 'none';
            return;
        }

        const rect = element.getBoundingClientRect();
        border.style.display = 'block';
        border.style.width = `${rect.width}px`;
        border.style.height = `${rect.height}px`;
        border.style.left = `${rect.left + window.scrollX}px`;
        border.style.top = `${rect.top + window.scrollY}px`;
    }

    function showFeedback() {
        feedback.classList.add('show');
        setTimeout(() => {
            feedback.classList.remove('show');
        }, 2000);
    }

    document.addEventListener('mousemove', (e) => {
        const element = document.elementFromPoint(e.clientX, e.clientY);
        if (element !== currentElement) {
            currentElement = element;
            updateHighlight(element);
        }
    });

    document.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();

        if (currentElement) {
            const xpath = getXPath(currentElement);
            navigator.clipboard.writeText(xpath).then(() => {
                showFeedback();
            }).catch(err => {
                feedback.textContent = '✗ 复制失败，请检查控制台';
                console.log('XPath:', xpath);
                showFeedback();
            });
        }
    }, true);

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            document.head.removeChild(style);
            document.body.removeChild(border);
            document.body.removeChild(feedback);

            document.removeEventListener('mousemove', arguments.callee);
            document.removeEventListener('click', arguments.callee, true);
            document.removeEventListener('keydown', arguments.callee);

            console.log('元素选择器已关闭');
        }
    });

    alert('元素选择器已激活！\n\n🖱️ 鼠标悬停选择元素\n📋 点击复制XPath\n⎋ 按ESC退出\n 退出时请刷新浏览器。');
})()

雨辰枫司的小栈