【乾貨】私藏的這些高級工具函數，你擁有幾個?

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！javascript

前言

不少功能，其實內置的Web API已支持，css

好比基於URLSearchParams或者URL的queryString獲取和生成
好比基於btoa,atob的base64的編碼和解碼
好比基於sendBeacon的數據上報
好比基於 Array.from的序列生成
好比基於canvas的視頻截圖
好比基於URL的UUID生成

咱們用精簡的代碼來實現相對複雜的功能，沒有第三方庫，你也能秀得飛起。html

本文收錄在 基礎進階 專欄，歡迎關注和收藏, 往期經典：前端

目錄(方便移動端閱讀)java

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修改啊，不會影響存儲的數量。 可是鍵的長度，會影響存儲的數量。git

代碼github

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

複製代碼

示例web

localStorage.clear();
localStorage.a = "啊";
console.log(getLSUsedSpace()); // 2
複製代碼

溢出測試：chrome

key的值爲長度爲10的 kkkkkkkkkk:
輸出結果： Max: 5242880 value Length: 5242870
當你把key修改長度爲1的k:
輸出結果：Max: 5242880 value Length: 5242879typescript

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)
}
複製代碼

注意

超過存儲上線是會報錯的：

如何捕獲錯誤,能夠參考 MDN testing_for_availability

大體是對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
what-is-the-max-size-of-localstorage-values
Test of localStorage limits/quota

帶圖帶事件的桌面通知

網頁也能夠以桌面彈框的形式進行通知，先看個效果圖：
有頭像，有標題，有文本，點擊消息通知還能讓窗體聚焦，真帥。

代碼

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
使用 Web Notifications

原生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
CanIUse兼容性: URLSearchParams: 95.63%
Polyfill: url-search-params-polyfill

基於`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, btoa
CanIUse兼容性: btoa 99.68%
Polyfill: MDN Polyfill
Base64

非正則替換的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或者Crypto.getRandomValues

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
collisions-when-generating-uuids-in-javascript

基於`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 異步地向服務器發送數據，同時不會延遲頁面的卸載或影響下一導航的載入性能。

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
複製代碼

寫在後面

寫做不易，你的一讚一評，就是我前行的最大動力。