私藏的这些高级工具函数，你拥有几个?

发表于 3年以前 | 总阅读数：299 次

前言

很多功能，其实内置的Web API已支持，

比如基于URLSearchParams或者URL的queryString获取和生成
比如基于btoa,atob的base64的编码和解码
比如基于sendBeacon的数据上报
比如基于 Array.from的序列生成
比如基于canvas的视频截图
比如基于URL的UUID生成

我们用精简的代码来实现相对复杂的功能，没有第三方库，你也能秀得飞起。

目录(方便移动端阅读)

localStorage的已使用空间
带图带事件的桌面通知
原生30行代码实现视频截图
基于URLSearchParams获取queryString的值
基于atob和btoa的base64编码和解码
非正则替换html代码encode和decode
相对地址转换为绝对地址
基于URL或者Crypto.getRandomValues生成UUID
基于Array.from的序列生成器
基于sendBeacon的安全的数据上报
基于toLocaleString千分位
Promise顺序执行
延时执行delay
进度值映射
滑滚动页面到顶部
禁止选择和复制
禁止图片拖拽
自增长ID

localStorage的已使用空间

在较新的chrome上测试，localStorage的存储是按照字符个数来算的。包含键和值的。所以在测试代码中，你把a修改啊，不会影响存储的数量。但是键的长度，会影响存储的数量。

代码

function getLSUsedSpace() {
    return Object.keys(localStorage).reduce((total, curKey) => {
        if (!localStorage.hasOwnProperty(curKey)) {
            return total;
        }
        total += localStorage[curKey].length + curKey.length;
        return total;
    }, 0)
}

复制代码

示例

localStorage.clear();
localStorage.a = "啊";
console.log(getLSUsedSpace()); // 2
复制代码

溢出测试：

key的值为长度为10的 kkkkkkkkkk: 输出结果：Max: 5242880 value Length: 5242870 当你把key修改长度为1的k: 输出结果：Max: 5242880 value Length: 5242879


localStorage.clear();
let valLength = 0
try {
    let str = Array.from({ length: 5242800 }, () => "啊").join("");
    valLength = str.length;
    for (let i = 0; i < 10000000000000; i++) {
        str += "a"
        valLength += 1;
        localStorage.setItem(`kkkkkkkkkk`, str);
    }

} catch (err) {
    console.error("存储失败", err);
    console.log("Max:", getLSUsedSpace(), " value Length:", valLength)
}
复制代码

image.png

注意

超过存储上线是会报错的：

image.png

2 . 如何捕获错误,可以参考 MDN testing\_for\_availability[6]

大致是对Error的错误码和name进行判断

e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);

复制代码

参考引用 calculating-usage-of-localstorage-space[7] what-is-the-max-size-of-localstorage-values[8] Test of localStorage limits/quota[9]

带图带事件的桌面通知

网页也可以以桌面弹框的形式进行通知，先看个效果图：有头像，有标题，有文本，点击消息通知还能让窗体聚焦，真帅。

image.png

代码

function doNotify(title, options = {}, events = {}) {
    const notification = new Notification(title, options);
    for (let event in events) {
        notification[event] = events[event];
    }
}

function notify(title, options = {}, events = {}) {
    if (!("Notification" in window)) {
        return console.error("This browser does not support desktop notification");
    }
    else if (Notification.permission === "granted") {
        doNotify(title, options, events);
    } else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(function (permission) {           
            if (permission === "granted") {
                doNotify(title, options, events);
            }
        });
    }
}
复制代码

示例 tag还可以用去重消息。

     notify("中奖提示", {
            icon: "https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image",
            body: "恭喜你，掘金签到一等奖",
            tag: "prize"
        }, {
            onclick(ev) {
                console.log(ev);
                ev.target.close();
                window.focus();
            }
        })
复制代码

参考引用 notification[10] 使用 Web Notifications[11]

原生30行代码实现视频截图

基本原理就是把视频画到Canvas里面，然后调用toDataURL或者toBlob，再利用a标签模拟点击，download属性指定名字。

看一下效果：

代码

     function captureVideo(videoEl) {
            let canvasEl;
            let dataUrl;
            try {
                const cps = window.getComputedStyle(videoEl);
                const width = +cps.getPropertyValue("width").replace("px", "");
                const height = +cps.getPropertyValue("height").replace("px", "");

                canvasEl = document.createElement("canvas");
                canvasEl.style.cssText = `position:fixed;left:-9999px`;
                canvasEl.height = height;
                canvasEl.width = width;

                document.body.appendChild(canvasEl);

                const ctx = canvasEl.getContext("2d");
                ctx.drawImage(videoEl, 0, 0, width, height);
                // const image = canvas.toDataURL("image/png");
                dataUrl = canvasEl.toDataURL();

                document.body.removeChild(canvasEl);
                canvasEl = null;
                return dataUrl;
            } finally {
                if (canvasEl) {
                    document.body.removeChild(canvasEl);
                }
                if (dataUrl) {
                    return dataUrl;
                }
            }
        }

复制代码

示例注意添加crossorigin="anonymous"，不然转为图片会失败。


  <video id="videoEL" controls autoplay crossorigin="anonymous"
        src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4" width="500"></video>

function download(url) {
    const aEl = document.createElement("a");
    aEl.href = url;
    aEl.download = "视频.png";
    aEl.click();
}


function doCaptureVideo() {
    const url = captureVideo(videoEL);
    download(url);
}

doCaptureVideo()
复制代码

基于`URLSearchParams`或`URL`获取queryString的值

常用的方式是使用正则或者split方法，其实不然，URLSearchParams和URL都能很好的实现功能。

代码

const urlSP = new URLSearchParams(location.search);
function getQueryString(key){
    return urlSP.get(key)
}

const urlObj = new URL(location.href);
function getQueryString(key){
    return urlObj.searchParams.get(key)
}

复制代码

示例

测试地址： /index.html?pid=10

const log = console.log;
getQueryString

log("pid", getQueryString("pid"));  // pid 10
log("cid", getQueryString("cid"));  // cid null

复制代码

参考引用 MDN文献：URLSearchParams-MDN[12] CanIUse兼容性: URLSearchParams: 95.63\%[13] Polyfill: url-search-params-polyfill[14]

基于`atob`和`btoa`的base64编码和解码

浏览器内置了base64编码和解码的能力，第三方库，不需要的。

代码

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}
复制代码

示例

utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
复制代码

参考引用 MDN文献：atob[15], btoa[16] CanIUse兼容性: btoa 99.68\%[17] Polyfill: MDN Polyfill[18] Base64[19]

非正则替换的html代码encode和decode

常规的方式是使用正则替换，这里是另外一种思路。

代码

function htmlencode(s){
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(s));
    var result = div.innerHTML;
    div = null;
    return result;
}
function htmldecode(s){
    var div = document.createElement('div');
    div.innerHTML = s;
    var result = div.innerText || div.textContent;
    div = null;
    return result;
}
复制代码

示例

htmlencode("<div>3>5 & 666</div>"); // &lt;div&gt;3&gt;5 &amp; 666&lt;/div&gt;
htmldecode("&lt;div&gt;3&gt;5 &amp; 666&lt;/div&gt;") // <div>3>5 & 666</div>
复制代码

相对地址转换为绝对地址

基于当前页面的相对地址转换为绝对地址。

代码

function realativeToAbs(href) {
    let aEl = document.createElement("a");
    aEl.href = href;    

    const result = aEl.href;
    aEl = null;
    return result;
}
复制代码

示例

console.log("realativeToAbs", realativeToAbs("../a/b/b/index.html"));
// realativeToAbs http://127.0.0.1:5500/a/b/b/index.html
复制代码

基于`URL`或者`Crypto.getRandomValues`生成UUID

基于URL.createObjectURL[20]或者Crypto.getRandomValues[21]

URL.createObjectURL 产生的地址为 blob:https://developer.mozilla.org/cb48b940-c625-400a-a393-176c3635020b, 其后部分就是一个UUID

代码方式一：

function genUUID() {
    const url = URL.createObjectURL(new Blob([]));
    // const uuid = url.split("/").pop();
    const uuid = url.substring(url.lastIndexOf('/')+ 1);
    URL.revokeObjectURL(url);
    return uuid;
}

genUUID() // cd205467-0120-47b0-9444-894736d873c7

复制代码

方式二：

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
}

uuidv4() // 38aa1602-ba78-4368-9235-d8703cdb6037
复制代码

参考引用 generating-uuids-at-scale-on-the-web-2877f529d2a2[22] collisions-when-generating-uuids-in-javascript[23]

基于`Array.from`的序列生成器

造有序数据，无序数据，等等。

代码

const range = (start, stop, step) => Array.from(
    { length: (stop - start) / step + 1}, 
    (_, i) => start + (i * step)
);
复制代码

示例

range(0, 4, 1); // [0, 1, 2, 3, 4]
range(0, 9, 3); // [0, 3, 6, 9]
range(0, 8, 2.5) // [0, 2.5, 5, 7.5]
复制代码

基于`sendBeacon`的安全的数据上报

sendBeacon[24] 异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。

function report(url, data) {
    if (typeof navigator.sendBeacon !== "function") {
        return console.error("sendBeacon不被支持");
    }
    navigator.sendBeacon(url, data);
}
复制代码

示例

window.addEventListener('unload', logData, false);
function logData() {
   report("/log", "被卸载了");
}
复制代码

基于`toLocaleString`千分位

正则？遍历？不需要的。内置函数就解决。当然，如果是超大的数，可能是会有问题的。

代码

function formatMoney(num){
    return (+num).toLocaleString("en-US");
}
复制代码

示例

console.log(formatMoney(123456789));  // 123,456,789
console.log(formatMoney(6781)) // 6,781
console.log(formatMoney(5)) // 5

超大的数
formatMoney(19999999933333333333333) // 19,999,999,933,333,333,000,000
复制代码

Promise顺序执行

让Promise顺序的执行，并支持初始化参数和结果作为参数传递。

代码

function runPromises(promiseCreators, initData) {
    return promiseCreators
        .reduce((promise, next) => promise
                .then((data) => next(data))
            , Promise.resolve(initData));
}
复制代码

示例

var promise1 = function (data = 0) {
    return new Promise(resolve => {
        resolve(data + 1000);
    });
}
var promise2 = function (data) {
    return new Promise(resolve => {
        resolve(data -500);
    });
}

runPromises([promise1, promise2], 1).then(res=>console.log(res));
复制代码

延时执行delay

延时执行某函数，且只会执行一次。

代码

function delay(fn = () => { }, delay = 5000, context = null) {
    let ticket = null;
    let runned = false;
    return {
        run(...args) {
            return new Promise((resolve, reject) => {
                if (runned === true) {
                    return;
                }
                runned = true;
                ticket = setTimeout(async () => {
                    try {
                        const res = await fn.apply(context, args);
                        resolve(res);
                    } catch (err) {
                        reject(err)
                    }
                }, delay)
            })
        },
        cancel: () => {
            clearTimeout(ticket);
        }
    }
}
复制代码

示例

delay(function () {
    console.log("你们好");
}).run();

const { run, cancel } = delay(function (name) {
    console.log("你好：", name);
});

run("吉他");
run("吉他");

// 你们好
// 你好： 吉他


复制代码

进度值映射

进度映射，比较只有 10%的进度，确要显示50%的进度的场景。

代码

function adjustProgress(progress: number, mapping: { real: number; target: number }[] = []) {
    if (progress < 0) {
        return 0;
    }
    if (!mapping || mapping.length <= 0) {
        return progress;
    }
    // 第一个
    const f = mapping[0];
    if (progress <= f.real) {
        return progress * (f.target / f.real);
    }
    // 最后一个
    const l = mapping[mapping.length - 1];
    if (progress >= l.target) {
        return l.target;
    }
    const curIndex = mapping.findIndex(m => m.real >= progress);
    if (!curIndex) {
        return progress;
    }
    const cur = mapping[curIndex];
    const pre = mapping[curIndex - 1];
    //     原基数     +   实际进度/最大实际进度 * 期望间距
    return pre.target + (progress - pre.real) / (cur.real - pre.real) * (cur.target - pre.target);
}

复制代码

示例

const mapping = [{
    real: 0,
    target: 0,
}, {
    real: 30,
    target: 50
}, {
    real: 60,
    target: 80
}, {
    real: 100,
    target: 100
}];


console.log("15", adjustProgress(15, mapping));  // 15 25
console.log("25", adjustProgress(25, mapping)); // 25 41.66666666666667
console.log("50", adjustProgress(50, mapping)); // 50 70
console.log("60", adjustProgress(60, mapping)); // 60 80
console.log("100", adjustProgress(100, mapping)); // 100 100
复制代码

滑滚动页面到顶部

代码

PC端滚动的根元素是document.documentElement, 移动端滚动的的根元素是document.body, 有一个更好的属性document.scrollingElement能自己识别文档的滚动元素，其在PC端等于document.documentElement, 其在移动端等于document.body

// smooth 选项在Safari上支持不好
function scrollToTop(){
    window.scrollTo({
        left: 0,
        top: 0,
        behavior: 'smooth
    })
}

function scrollToTop() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, scrollTop - scrollTop / 8);
    }
};

复制代码

禁止选择和复制

代码

['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
    document.addEventListener(ev, function(ev){
        ev.preventDefault();
        ev.returnValue = false;
    })
});
复制代码

当然也有CSS方案

body {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
复制代码

禁止图片拖拽

代码

['dragstart'].forEach(function(ev){
    document.addEventListener(ev, function(ev){
        ev.preventDefault();
        ev.returnValue = false;
    })
});

复制代码

自增长ID

自己生产自增长的ID值，当然可以更复杂一些。

代码

let id = 0;
function getId() {
    return id++;
}
复制代码

示例

console.log(getId()); // 1
console.log(getId()); // 2
复制代码

本文由哈喽比特于3年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/mTt0PJgtu7VuTM9qIIstaQ

扫码在手机上访问

为您提供高质量的文档

Android插件化方案 5年以前 | 237231次阅读

前端录屏 + 定位源码，帮你快速定位线上 bug 1年以前 | 27777次阅读

飞书里面给链接生成一个预览是怎么做到的？ 3年以前 | 10014次阅读

vscode超好用的代码书签插件Bookmarks 2年以前 | 8065次阅读

raw.githubusercontent.com被污染的解决办法 4年以前 | 7881次阅读

私藏的这些高级工具函数，你拥有几个?

前言

localStorage的已使用空间

带图带事件的桌面通知

原生30行代码实现视频截图

基于`URLSearchParams`或`URL`获取queryString的值

基于`atob`和`btoa`的base64编码和解码

非正则替换的html代码encode和decode

相对地址转换为绝对地址

基于`URL`或者`Crypto.getRandomValues`生成UUID

基于`Array.from`的序列生成器

基于`sendBeacon`的安全的数据上报

基于`toLocaleString`千分位

Promise顺序执行

延时执行delay

进度值映射

滑滚动页面到顶部

禁止选择和复制

禁止图片拖拽

自增长ID

刘强东夫妇：“移民美国”传言被驳斥

博主曝三大运营商，将集体采购百万台华为Mate60系列

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

威马CDO：中国每百户家庭仅17户有车

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

千万级抖音网红秀才账号被封禁

亚马逊股东起诉公司和贝索斯，称其在购买卫星发射服务时忽视了 SpaceX

苹果上线AppsbyApple网站，以推广自家应用程序

特斯拉美国降价引发投资者不满：“这是短期麻醉剂”

光刻机巨头阿斯麦：拿到许可，继续对华出口

马斯克与库克首次隔空合作：为苹果提供卫星服务

𝕏（推特）调整隐私政策，可拿用户发布的信息训练 AI 模型

荣耀CEO谈华为手机回归：替老同事们高兴，对行业也是好事

AI操控无人机能力超越人类冠军

AI生成的蘑菇科普书存在可致命错误

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

国产扫地机器人热销欧洲，国产割草机器人抢占欧洲草坪

罗永浩吐槽iPhone15和14不会有区别，除了序列号变了

私藏的这些高级工具函数，你拥有几个?

前言

localStorage的已使用空间

带图带事件的桌面通知

原生30行代码实现视频截图

基于URLSearchParams或URL获取queryString的值

基于atob和btoa的base64编码和解码

非正则替换的html代码encode和decode

相对地址转换为绝对地址

基于URL或者Crypto.getRandomValues生成UUID

基于Array.from的序列生成器

基于sendBeacon的安全的数据上报

基于toLocaleString千分位

Promise顺序执行

延时执行delay

进度值映射

滑滚动页面到顶部

禁止选择和复制

禁止图片拖拽

自增长ID

登录后可以享受更多权益

基于`URLSearchParams`或`URL`获取queryString的值

基于`atob`和`btoa`的base64编码和解码

基于`URL`或者`Crypto.getRandomValues`生成UUID

基于`Array.from`的序列生成器

基于`sendBeacon`的安全的数据上报

基于`toLocaleString`千分位