[Галантерейные товары] Сколько из этих передовых функций инструментов у вас есть?

Эта статья участвовала в приказе о созыве Haowen, нажмите, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!

предисловие

Многие функции, на самом деле, встроенный веб-API был поддержан,

например, на основеURLSearchParamsилиURLqueryString получить и сгенерировать
например, на основеbtoa,atobкодирование и декодирование base64
например, на основеsendBeaconотчетность данных
например, на основеArray.fromгенерация последовательности
например, на основеcanvasСкриншот видео
например, на основеURLГенерация UUID

Мы используем оптимизированный код для реализации относительно сложных функций, и без сторонних библиотек можно покрасоваться.

Эта статья включена вбазовый расширенныйКолонка, добро пожаловать, чтобы следовать и собирать, прошлые классики:

3000 слов, и я не написал Function.prototype.call 200+ star
Те функции, с которыми вы знакомы, но не знакомы 200 star
Вы действительно знаете разницу между этими 16 нативными функциями и свойствами? Тщательно собранные, передовые базовые знания, быстро упаковать и забрать 96 star

Оглавление (легко читается на мобильном телефоне)

Используемое пространство localStorage
с событиемуведомления на рабочем столе
Нативные 30 строк кода для получения скриншотов видео
на основеURLSearchParamsПолучить значение строки запроса
на основеatobа такжеbtoaкодирование и декодирование base64
нерегулярная заменаHTML-код кодировать и декодировать
Преобразование относительного адреса в абсолютный адрес
на основеURLилиCrypto.getRandomValuesСгенерировать UUID
на основеArray.fromгенератор последовательности для
на основеsendBeaconзащищенная отчетность данных
на основеtoLocaleStringтысячные
Обещания выполняются последовательно
Задержка выполнения задержки
карта значений прогресса
Проведите пальцем, чтобы прокрутить страницу вверх
Без выделения и копирования
Запретить перетаскивание изображений
Самоувеличивающийся идентификатор

Используемое пространство localStorage

Протестировано на более новом хроме, хранилище для 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является значением длины 10kkkkkkkkkk:
Результат вывода: Макс.: 5242880 значение Длина: 5242870
когда ты ставишьkeyИзмените длину на 1k:
Результат вывода: Макс.: 5242880 значение Длина: 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)
}

Уведомление

Если хранилище выйдет в онлайн, будет сообщено об ошибке:

Как отлавливать ошибки, вы можете обратиться к MDNtesting_for_availability

Примерно можно судить по коду ошибки и названию ошибки


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);
            }
        });
    }
}

Пример
теги также можно использовать для дедупликации сообщений.

     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
Использование веб-уведомлений

Нативные 30 строк кода для получения скриншотов видео

Основной принцип заключается в том, чтобы нарисовать видео на Canvas, а затем вызватьtoDataURLилиtoBlob, а затем используйте тег a для имитации щелчка, а атрибут загрузки указывает имя.

Взгляните на эффект:

код

     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`Получить значение строки запроса

Обычный способ - использовать обычные или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

ссылка
Литература МДН:URLSearchParams-MDN
Можно использовать совместимость: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"

ссылка
Литература МДН:atob, btoa
Можно использовать совместимость:btoa 99.68%
Polyfill: MDN Polyfill
Base64

нерегулярная заменаHTML-код кодировать и декодировать

Обычный способ - использовать регулярную замену, вот еще один способ мышления.

код

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

Обещания выполняются последовательно

Разрешить промисы выполняться последовательно и поддерживать параметры инициализации и результаты, передаваемые в качестве параметров.

код

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));

Задержка выполнения задержки

Отложить выполнение функции и выполнить ее только один раз.

код

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

Проведите пальцем, чтобы прокрутить страницу вверх

код

Корневой элемент для прокрутки на стороне ПК:document.documentElement,
Корневой элемент мобильной прокрутки —document.body,
имеет лучшее свойствоdocument.scrollingElementМожет сам идентифицировать элемент прокрутки документа, который равен стороне ПК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 может быть, конечно, сложнее.

код

let id = 0;
function getId() {
    return id++;
}

Пример

console.log(getId()); // 1
console.log(getId()); // 2

написать на обороте

Писать нелегко, ваши лайки и комментарии — самая большая мотивация для меня двигаться вперед.

предисловие

Используемое пространство localStorage

с событиемуведомления на рабочем столе

Нативные 30 строк кода для получения скриншотов видео

на основеURLSearchParamsилиURLПолучить значение строки запроса

на основеatobа такжеbtoaкодирование и декодирование base64

нерегулярная заменаHTML-код кодировать и декодировать

Преобразование относительного адреса в абсолютный адрес

на основеURLилиCrypto.getRandomValuesСгенерировать UUID

на основеArray.fromгенератор последовательности для

на основеsendBeaconзащищенная отчетность данных

на основеtoLocaleStringтысячные

Обещания выполняются последовательно

Задержка выполнения задержки

карта значений прогресса

Проведите пальцем, чтобы прокрутить страницу вверх

Без выделения и копирования

Запретить перетаскивание изображений

Самоувеличивающийся идентификатор

написать на обороте

на основе`URLSearchParams`или`URL`Получить значение строки запроса

на основе`atob`а также`btoa`кодирование и декодирование base64

на основе`URL`или`Crypto.getRandomValues`Сгенерировать UUID

на основе`Array.from`генератор последовательности для

на основе`sendBeacon`защищенная отчетность данных

на основе`toLocaleString`тысячные