js代码段

• 简易时间格式化工具函数
• 设备检测
• 性能分析
• base64 数据的文件下载
• 图片转换为 base64

---

工具函数

简易时间格式化工具函数

/**
 * @param {string} format - 规定的时间格式
 * @param {number} timestamp - 时间戳
 * @return {string}
 */
function formatDate(format = "Y-M-D h:m", timestamp = Date.now()) {
    let date = new Date(timestamp);
    let dateInfo = {
        Y: date.getFullYear(),
        M: date.getMonth() + 1,
        D: date.getDate(),
        h: date.getHours(),
        m: date.getMinutes(),
        s: date.getSeconds(),
    };
    let formatNumber = (n) => (n > 10 ? n : "0" + n);
    let res = format
        .replace("Y", dateInfo.Y)
        .replace("M", dateInfo.M)
        .replace("D", dateInfo.D)
        .replace("h", formatNumber(dateInfo.h))
        .replace("m", formatNumber(dateInfo.m))
        .replace("s", formatNumber(dateInfo.s));
    return res;
}

设备检测

function os() {
    var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
        isPc = !isPhone && !isAndroid && !isSymbian;
    return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc,
        isMobile: isPhone || isAndroid || isTablet,
    };
}

性能分析

window.onload = function () {
    setTimeout(() => {
        let t = performance.timing,
            m = performance.memory;
        console.table({
            DNS查询耗时: (t.domainLookupEnd - t.domainLookupStart).toFixed(0),
            TCP链接耗时: (t.connectEnd - t.connectStart).toFixed(0),
            request请求耗时: (t.responseEnd - t.responseStart).toFixed(0),
            解析dom树耗时: (t.domComplete - t.domInteractive).toFixed(0),
            白屏时间: (t.responseStart - t.navigationStart).toFixed(0),
            domready时间: (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0),
            onload时间: (t.loadEventEnd - t.navigationStart).toFixed(0),
            js内存使用占比: m ? ((m.usedJSHeapSize / m.totalJSHeapSize) * 100).toFixed(2) + "%" : undefined,
        });
    });
};

base64 数据的文件下载

适用于 canvas 的图片下载

/**
 * @param {string} filename - 下载时的文件名
 * @param {string} data - base64字符串
 */
function downloadFile(filename, data) {
    let downloadLink = document.createElement("a");
    if (downloadLink) {
        document.body.appendChild(downloadLink);
        downloadLink.style = "display: none";
        downloadLink.download = filename;
        downloadLink.href = data;
        if (document.createEvent) {
            let downloadEvt = document.createEvent("MouseEvents");
            downloadEvt.initEvent("click", true, false);
            downloadLink.dispatchEvent(downloadEvt);
        } else if (document.createEventObject) {
            downloadLink.fireEvent("onclick");
        } else if (typeof downloadLink.onclick == "function") {
            downloadLink.onclick();
        }
        document.body.removeChild(downloadLink);
    }
}

图片转换为 base64

/**
 *
 * @param url 图片路径
 * @param ext 图片格式
 * @param callback 结果回调
 */
function getImageBase64(url, ext, callback) {
    var canvas = document.createElement("canvas"); //创建canvas DOM元素
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = url;
    img.onload = function () {
        canvas.height = 60; //指定画板的高度,自定义
        canvas.width = 85; //指定画板的宽度，自定义
        ctx.drawImage(img, 0, 0, 60, 85); //参数可自定义
        var dataURL = canvas.toDataURL("image/" + ext);
        callback.call(this, dataURL); //回掉函数获取Base64编码
        canvas = null;
    };
}