UNPKG

@mt-kit/utils

Version:
1,233 lines (1,124 loc) 44.3 kB
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["microUtil"] = factory(); else root["microUtil"] = factory(); })(self, function() { return /******/ (function() { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ([ /* 0 */, /* 1 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ animationFrameThrottle; } /* harmony export */ }); /** * 创建一个使用 requestAnimationFrame 的函数节流(throttle)版本 * * 函数节流的目的是限制一个函数在特定时间内的调用次数,以避免过于频繁的执行,以确保性能优化或更平滑的动画效果时 * * @param fn * @returns * * 使用场景: * * 1、滚动事件处理 * window.addEventListener('scroll', animationFrameThrottle(handleScroll)); * * 2、窗口大小改变 * window.addEventListener('resize', animationFrameThrottle(handleResize)); * * 3、动画效果 * const animatedFunction = animationFrameThrottle(updateAnimation); */ function animationFrameThrottle(fn) { let locked = false; return function (...args) { if (locked) { return undefined; } locked = true; // window.requestAnimationFrame 用于在下一次浏览器重绘之前调用指定的函数 window.requestAnimationFrame(() => { fn.apply(this, args); locked = false; }); return undefined; }; } /***/ }), /* 2 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ imageBase64ToBlob; } /* harmony export */ }); /** * 将 base64 编码的图像数据转换为 Blob 对象 * @param base64Buf base64Buf 是包含 base64 编码的图像数据的字符串 * @returns 返回一个 Blob 对象,该对象表示解码后的图像数据 */ function imageBase64ToBlob(base64Buf) { const arr = base64Buf.split(","); const [typeItem] = arr; const [, mime] = typeItem.match(/:(.*?);/) || ["", ""]; const bstr = window.atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.codePointAt(n) || 0; } return new Blob([u8arr], { type: mime }); } /***/ }), /* 3 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ imageUrlToBase64; } /* harmony export */ }); /** * 将图像 URL 转换为 base64 编码的字符串 * @param url 是要转换的图像的 URL * @param mineType 是可选参数,用于指定生成的 base64 字符串的 MIME 类型,默认为 image/png * @returns 返回一个 Promise 对象,resolve 后的值是生成的 base64 编码的字符串 */ function imageUrlToBase64(url, mineType) { return new Promise((resolve, reject) => { let canvas = document.createElement("CANVAS"); const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext("2d"); const img = new Image(); img.crossOrigin = ""; img.addEventListener("load", () => { if (!canvas || !ctx) { return reject(new Error("Canvas or context is not available")); } canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); const dataUrl = canvas.toDataURL(mineType || "image/png"); canvas = null; resolve(dataUrl); }); img.src = url; }); } /***/ }), /* 4 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ downloadByUrl; } /* harmony export */ }); /* harmony import */ var _open_window__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5); /** * 根据文件地址进行下载 * * Url 文件的地址 * * target 链接的打开方式,默认为 '_blank' * * fileName 保存的文件名,如果不提供会从 URL 中提取 */ function downloadByUrl({ url, target = "_blank", fileName }) { const isChrome = window.navigator.userAgent.toLowerCase().includes("chrome"); const isSafari = window.navigator.userAgent.toLowerCase().includes("safari"); if ((/iP/).test(window.navigator.userAgent)) { console.error("Your browser does not support download!"); return false; } if (isChrome || isSafari) { const link = document.createElement("a"); link.href = url; link.target = target; if (link.download !== undefined) { link.download = fileName || url.slice(url.lastIndexOf("/") + 1); } if (document.createEvent) { const e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); link.dispatchEvent(e); return true; } } if (!url.includes("?")) { url += "?download"; } (0,_open_window__WEBPACK_IMPORTED_MODULE_0__["default"])(url, { target }); return true; } /***/ }), /* 5 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ openWindow; } /* harmony export */ }); /** * 用于在浏览器中打开窗口 * @param {string} url 要打开的目标 URL * @param {IOptions} opt */ function openWindow(url, opt) { const { target = "__blank", noopener = true, noreferrer = true } = opt || {}; const feature = []; noopener && feature.push("noopener=yes"); noreferrer && feature.push("noreferrer=yes"); window.open(url, target, feature.join(",")); } /***/ }), /* 6 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ downloadDataFile; } /* harmony export */ }); /** * 根据文件数据进行下载 * @param {*} data Blob 对象的 BlobPart 参数 * @param {*} filename 保存的文件名 * @param {*} mime 文件的 MIME 类型 * @param {*} bom Blob 对象的 BlobPart 参数 */ function downloadDataFile(data, filename, mime, bom) { const blobData = bom === undefined ? [data] : [bom, data]; const blob = new Blob(blobData, { type: mime || "application/octet-stream" }); const blobURL = window.URL.createObjectURL(blob); const tempLink = document.createElement("a"); tempLink.style.display = "none"; tempLink.href = blobURL; tempLink.setAttribute("download", filename); if (tempLink.download === undefined) { tempLink.setAttribute("target", "_blank"); } document.body.append(tempLink); tempLink.click(); tempLink.remove(); window.URL.revokeObjectURL(blobURL); } /***/ }), /* 7 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ downloadBase64File; } /* harmony export */ }); /* harmony import */ var _image_base64_to_blob__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2); /* harmony import */ var _download_data_file__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6); /** * 根据 Base64 编码的字符串进行下载 * @param buf Base64 编码的字符串 * @param filename 保存的文件名 * @param mime 文件的 MIME 类型 * @param bom Blob 对象的 BlobPart 参数 */ function downloadBase64File(buf, filename, mime, bom) { const base64Buf = (0,_image_base64_to_blob__WEBPACK_IMPORTED_MODULE_0__["default"])(buf); (0,_download_data_file__WEBPACK_IMPORTED_MODULE_1__["default"])(base64Buf, filename, mime, bom); } /***/ }), /* 8 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ downloadUrlFile; } /* harmony export */ }); /* harmony import */ var _image_url_to_base64__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); /* harmony import */ var _download_base64_file__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7); /** * 根据在线图片的 URL 进行下载 * @param url 在线图片的 URL * @param filename 保存的文件名 * @param mime 文件的 MIME 类型 * @param bom Blob 对象的 BlobPart 参数 */ function downloadUrlFile(url, filename, mime, bom) { (0,_image_url_to_base64__WEBPACK_IMPORTED_MODULE_0__["default"])(url).then(base64 => { (0,_download_base64_file__WEBPACK_IMPORTED_MODULE_1__["default"])(base64, filename, mime, bom); }); } /***/ }), /* 9 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ copyText; } /* harmony export */ }); /** * 文本复制 * * `navigator.clipboard` 可能因浏览器设置或浏览器兼容而造成兼容问题 * * @param {string} text 要复制的文字 * @param {Function} promptFn 复制成功后的回调 */ function copyText(text, promptFn) { if (navigator.clipboard) { return navigator.clipboard. writeText(text). then(() => { promptFn && promptFn(); }). catch(error => { console.error(error); return error; }); } if (Reflect.has(document, "execCommand")) { return new Promise((resolve, reject) => { const textArea = document.createElement("textarea"); textArea.value = text; // 优化隐藏逻辑 textArea.style.opacity = "0"; textArea.style.position = "fixed"; textArea.style.top = "0"; textArea.style.left = "-9999px"; textArea.setAttribute("readonly", "readonly"); document.body.append(textArea); try { textArea.focus(); // 兼容移动端聚焦问题 textArea.select(); const success = document.execCommand("copy"); if (!success) { throw new Error("execCommand('copy') 执行失败"); } promptFn === null || promptFn === void 0 ? void 0 : promptFn(); } catch (error) { console.error(error); reject(error); } finally { textArea.remove(); // 确保清理 } }); } return Promise.reject(new Error("\"navigator.clipboard\" 或 \"document.execCommand\" 中存在API错误, 拷贝失败!")); } /***/ }), /* 10 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ queryStringToObject; } /* harmony export */ }); /** * window.location.search 的值转换为 Object * @param queryString window.location.search * @returns {Record<string, string>} Object */ function queryStringToObject(queryString) { const params = new URLSearchParams(queryString); const result = {}; params.forEach((value, key) => { result[key] = value; }); return result; } /***/ }), /* 11 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /** * 封装 Cookie 操作的工具类 * * 端口、协议不同,不影响 Cookie * * */ const cookieHelper = { /** * 设置 Cookie * @param {string} name - Cookie 的名称 * @param {string} value - Cookie 的值 * @param {CookieOptions} options - Cookie 的选项 */ setCookie(name, value, options) { let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`; if (options === null || options === void 0 ? void 0 : options.expires) { const expirationDate = new Date(Date.now() + options.expires * 1000); cookieString += `; expires=${expirationDate.toUTCString()}`; } if (options === null || options === void 0 ? void 0 : options.domain) { cookieString += `; domain=${options.domain}`; } if (options === null || options === void 0 ? void 0 : options.path) { cookieString += `; path=${options.path}`; } if (options === null || options === void 0 ? void 0 : options.secure) { cookieString += "; secure"; } if (options === null || options === void 0 ? void 0 : options.sameSite) { cookieString += `; samesite=${options.sameSite}`; } // eslint-disable-next-line unicorn/no-document-cookie document.cookie = cookieString; }, /** * 获取 Cookie 的值 * @param {string} name - Cookie 的名称 * @returns {string|null} Cookie 的值,如果不存在则返回 null */ getCookie(name) { const cookies = document.cookie.split("; "); for (const cookie of cookies) { const [cookieName, cookieValue] = cookie.split("="); if (decodeURIComponent(cookieName) === name) { return decodeURIComponent(cookieValue); } } return null; }, /** * 删除 Cookie * @param {string} name - Cookie 的名称 * @param {CookieOptions} options - Cookie 的路径(一版不需要) */ deleteCookie(name, options) { if (!this.getCookie(name)) { return; } // 设置过期时间为过去的时间来删除 Cookie const deleteOptions = { domain: options === null || options === void 0 ? void 0 : options.domain, expires: -1, path: options === null || options === void 0 ? void 0 : options.path, sameSite: options === null || options === void 0 ? void 0 : options.sameSite, secure: options === null || options === void 0 ? void 0 : options.secure }; this.setCookie(name, "", deleteOptions); } }; /* harmony default export */ __webpack_exports__["default"] = (cookieHelper); /* * // 使用示例 * const cookieOptions: CookieOptions = { * expires: 3600, * domain: 'example.com', * path: '/', * secure: true, * sameSite: 'None' * }; * * CookieHelper.setCookie('username', 'John Doe', cookieOptions); * const username = CookieHelper.getCookie('username'); * console.log(username); * * CookieHelper.deleteCookie('username', cookieOptions); */ /***/ }), /* 12 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /** * localStorage 的一些扩展 */ const localStorageHelper = { // private static readonly storageKeyPrefix = 'test'; /** * 设置 localStorage */ set({ key, value, expire }) { if (key === "" || key === null || key === undefined) { throw new Error("key 不能为空"); } if (value === "" || value === null || value === undefined) { throw new Error("value 不能为空"); } localStorage.setItem(key, JSON.stringify({ value, expire: expire ? Date.now() + expire * 24 * 60 * 60 * 1000 : null })); }, get(key) { const storedItem = localStorage.getItem(key); if (storedItem) { const parsedItem = JSON.parse(storedItem); if (parsedItem === null || parsedItem === void 0 ? void 0 : parsedItem.expire) { const now = Date.now(); if (parsedItem.expire === Infinity || parsedItem.expire > now) { return parsedItem.value; } localStorage.removeItem(key); return null; } delete parsedItem.expire; return parsedItem; } return null; }, delete(key) { localStorage.removeItem(key); }, clear() { localStorage.clear(); } }; /* harmony default export */ __webpack_exports__["default"] = (localStorageHelper); /***/ }), /* 13 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ isElement; } /* harmony export */ }); /** * 是否为 DOM * @param element 元素 * @return {element is Element} */ function isElement(element) { return (element instanceof Element || element !== undefined && element !== null && typeof element === "object" && "nodeType" in element && typeof element.nodeType === "number" && "nodeName" in element && typeof element.nodeName === "string"); } /***/ }), /* 14 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ isEqual; } /* harmony export */ }); /** * 比较对象是否相等 * @param obj1 * @param obj2 * @returns boolean */ function isEqual(obj1, obj2, visited = new Set()) { if (obj1 === obj2) { return true; } if (typeof obj1 !== "object" || obj1 === null || typeof obj2 !== "object" || obj2 === null) { return false; } if (visited.has(obj1) || visited.has(obj2)) { return true; } visited.add(obj1); visited.add(obj2); const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) { visited.clear(); return false; } for (const key of keys1) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key], visited)) { visited.clear(); return false; } } visited.clear(); // 新增日期比较和数组顺序比较 if (obj1 instanceof Date && obj2 instanceof Date) { return obj1.getTime() === obj2.getTime(); } if (Array.isArray(obj1) && Array.isArray(obj2)) { if (obj1.length !== obj2.length) { return false; } for (const [i, element] of obj1.entries()) { if (!isEqual(element, obj2[i], visited)) { return false; } } return true; } return true; } // // 测试 // const objA = { a: 1, b: { c: 2 } }; // const objB = { a: 1, b: { c: 2 } }; // const objC = { a: 1, b: { c: 3 } }; // console.log(isEqual(objA, objB)); // true // console.log(isEqual(objA, objC)); // false // // 循环引用测试 // const objD = { a: 1, b: { c: 2 } }; // objD.d = objD; // const objE = { a: 1, b: { c: 2 } }; // objE.b.d = objE; // console.log(isEqual(objD, objE)); // true /***/ }), /* 15 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ isFunction; } /* harmony export */ }); /* eslint-disable @typescript-eslint/no-explicit-any */ /** * 是否函数类型判断 * @param value * @return {value is Function} 如果 value 为 function,则返回 true,否则返回 false */ function isFunction(value) { return typeof value === "function"; } /***/ }), /* 16 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* eslint-disable @typescript-eslint/no-explicit-any */ /** * 判断是否为 null * @param value * @returns boolean */ function isNull(value) { return value == null; } /* harmony default export */ __webpack_exports__["default"] = (isNull); /***/ }), /* 17 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ isObject; } /* harmony export */ }); /** * 是否对象类型判断 * * value is Record<string, any> * 函数的返回类型是 value is Record<string, any>,这种形式的返回类型是 TypeScript 中用于表达类型守卫的一种方式。这意味着如果函数返回 true,TypeScript 将会把传入的参数视为 Record<string, any> 类型;如果返回 false,则参数不会被视为这个类型。 * * @return 如果 value 为 object,则返回 true,否则返回 false */ function isObject(value) { const type = typeof value; return value !== null && (type === "object" || type === "function"); } /***/ }), /* 18 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ isUndefined; } /* harmony export */ }); /** * 是否为 undefined * @param value value要检查的值 * @return {boolean} 如果 value 为 undefined,则返回 true,否则返回 false */ function isUndefined(value) { return value === undefined; } /***/ }), /* 19 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ clone; } /* harmony export */ }); /** * 浅拷贝 */ function clone(value) { /** * 或: * return Object.assign({}, value); */ return { ...value }; } /***/ }), /* 20 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ cloneDeep; } /* harmony export */ }); /* harmony import */ var _is_function__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(15); /* harmony import */ var _is_object__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17); /* eslint-disable guard-for-in */ /* eslint-disable @typescript-eslint/no-empty-object-type */ /** * 深拷贝 * * @param value * @param map 外部使用的时候,不需要传入 * @return value * * 对所有类型都进行了拷贝 * * lodashjs、underscorejs 对函数、Symbol、Set、Map 等没做深拷贝处理 * * 不建议使用:JSON.parse(JSON.stringify(value)); 它存在以下缺陷(案例见 ../stories/demo-clone-deep.html): * ① 无法解析 Symbol 作为 key 或者 value * ② 无法循环引用 */ function cloneDeep(value, map = new WeakMap()) { try { // Set 类型 if (value instanceof Set) { if (map.has(value)) { return map.get(value); } const newSet = new Set(); map.set(value, newSet); value.forEach(item => { newSet.add(cloneDeep(item, map)); }); return newSet; } // Map 类型 if (value instanceof Map) { if (map.has(value)) { return map.get(value); } const newMap = new Map(); map.set(value, newMap); value.forEach((val, key) => { newMap.set(cloneDeep(key, map), cloneDeep(val, map)); }); return newMap; } // Symbol 类型 if (typeof value === "symbol") { return Symbol(value.description); } // 函数类型 if ((0,_is_function__WEBPACK_IMPORTED_MODULE_0__["default"])(value)) { return function (...args) { return value.apply(this, args); }; } // 对象类型 if (!(0,_is_object__WEBPACK_IMPORTED_MODULE_1__["default"])(value)) { return value; } // 判断 map 中是否有值,有了直接 return if (map.has(value)) { return map.get(value); } // 判断传入的对象是数组, 还是对象 const newValue = Array.isArray(value) ? [] : {}; // Map 没有值 map.set(value, newValue); for (const key in value) { newValue[key] = cloneDeep(value[key], map); } // Symbol 作为 key 的处理(这个可以不做 Symbol(sKey.description) 处理) const symbolKeys = Object.getOwnPropertySymbols(value); for (const sKey of symbolKeys) { const newSKey = Symbol(sKey.description); Object.defineProperty(newValue, newSKey, { enumerable: true, configurable: true, writable: true, value: cloneDeep(Reflect.get(value, sKey), map) }); } return newValue; } catch { throw new Error("Deep clone handle error!"); } } /***/ }), /* 21 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ debounce; } /* harmony export */ }); /** * 防抖 * * 只有在某个时间内,没有再次触发某个函数时,才真正的调用这个函数 * * 防抖的应用场景: * ① 搜索框(确保不会每次输入都发送请求); * ② 频繁的点击按钮,触发某个事件; * ③ 监听浏览器滚动事件,完成某些特定操作; * ④ 用户缩放浏览器的 resize 事件。 * * @param {Function} func 执行的方法 * @param {number} wait 毫秒 * @param {boolean} immediate 立即执行(让其在第一次输入的时候,就给用户一个联想) * @returns 返回一个函数,该函数返回一个 Promise,解析为执行的方法的返回值。另外,该函数还具有一个 cancel 方法,用于取消防抖 */ function debounce(func, wait = 250, immediate = false) { /** * setTimeout 的返回类型是 number | NodeJS.Timeout。这是因为在 Node.js 环境中,setTimeout 返回的是一个 Timeout 对象,而在浏览器环境中,返回的是一个数字。 */ let timer = null; /** * 控制在中间暂停的时候,接下来也能立即执行 */ let isInvoke = false; const _debounce = function (...args) { /** * 在外部获取 fn 中的返回值 */ return new Promise((resolve, reject) => { try { if (timer) { clearTimeout(timer); } if (immediate && !isInvoke) { const result = func.apply(this, args); isInvoke = true; resolve(result); return; } timer = setTimeout(() => { /** * 确保 this 指向的正确 */ const result = func.apply(this, args); isInvoke = false; resolve(result); }, wait); } catch (error) { reject(error); } }); }; /** * 取消功能:在触发的过程中,突然要取消 * 取消之后,重置所有变量 */ _debounce.cancel = function () { if (timer) { clearTimeout(timer); timer = null; isInvoke = false; } }; return _debounce; } /* // 简易版 let timer = null; function debounce() { if(timer!=null){ window.clearTimeout(myTimer); } //重新启动定时器 timer = setTimeout(()=>{ console.log("我是防抖"); timer =null; },200); } // ts 类型定义解释: // // 通过泛型 T,你明确定义了 func 参数的类型,即一个函数,它接受任意参数并返回任意类型。 // // 对于返回的函数,你使用了 Parameters<T> 获取 func 参数的类型,确保返回的函数接受与原始函数相同的参数。 // // 使用 Promise<ReturnType<T>> 表示返回的函数返回一个 Promise,该 Promise 解析为原始函数的返回类型。 // // 你使用了一个交叉类型 &,将返回的函数与具有 cancel 方法的对象类型组合在一起。这使得你的函数在使用时既能调用返回的函数,又能调用 cancel 方法。 */ /***/ }), /* 22 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ throttle; } /* harmony export */ }); /** * 节流 * * ① 当事件触发时,会执行这个事件的响应函数,如果这个事件会被频繁触发,那么节流函数会按照一定的频率来执行函数 * ② 不管在这个中间有多少次触发这个事件,执行函数的频率总是固定的,不管在中间究竟点了几次 * ③ 他在初次是立即触发的 * * 节流的应用场景: * ① 监听页面的滚动事件; * ② 鼠标移动事件; * ③ 用户频繁点击按钮操作; * ④ 按照固定的频率去触发时。 * * @param {Function} func 执行的方法 * @param {number} wait 毫秒 * @param {IOptions} options * @returns 返回一个函数,该函数返回一个 Promise,解析为执行的方法的返回值。另外,该函数还具有一个 cancel 方法,用于取消防抖 * * 使用: * * const inputEl = document.querySelector("input"); * * const onInput = function(event) { * console.log(event); * }; * * const onInputThrottle = throttle(onInput, 3000); * * inputEl.oninput = onInputThrottle; */ const defaultOptions = { leading: true, trailing: false }; function throttle(func, wait = 300, options = defaultOptions) { const { leading, trailing } = options; let lastTime = 0; let timer = null; /** * 事件触发时真正执行的函数 */ const _throttle = function (...args) { return new Promise((resolve, reject) => { try { /** * 获取最新的时间 * 当第一次执行完 lastTime = nowTime 时,wait - (nowTime - lastTime) 一定大于 0,这个时候是不执行的 */ const nowTime = Date.now(); const remainTime = wait - (nowTime - lastTime); if (lastTime === 0 && leading === false) { lastTime = nowTime; return; } if (remainTime <= 0) { /** * 只有在这重置了,才能开启下一个定时器 */ if (timer) { clearTimeout(timer); timer = null; } const result = func.apply(this, args); resolve(result); lastTime = nowTime; return; } if (trailing === true && remainTime > 0 && timer === null) { timer = setTimeout(() => { timer = null; const result = func.apply(this, args); /** * 处理边界性问题 */ lastTime = leading === true ? Date.now() : 0; resolve(result); }, remainTime); } } catch (error) { reject(error); } }); }; /** * 取消节流 */ _throttle.cancel = function () { if (timer) { clearTimeout(timer); timer = null; } lastTime = 0; }; return _throttle; } /* // 简易版 let timer = null; function throttle() { if( timer !== null ){ return; } timer = setTimeout(()=>{ console.log("我是节流"); timer = null; },200); } */ /***/ }), /* 23 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ omitBy; } /* harmony export */ }); /* harmony import */ var _is_object__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(17); /** * 从创建的一个从对象中,排除满足某些条件的属性的属性 * @param obj 要处理的对象 * @param condition 用于判断是否排除属性的条件函数 * @returns 新的对象,排除了满足条件的属性 */ function omitBy(obj, condition) { const result = {}; if (!(0,_is_object__WEBPACK_IMPORTED_MODULE_0__["default"])(obj)) { return result; } for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { const value = obj[key]; if (!condition(value, key)) { result[key] = value; } } } return result; } /* // 示例 const sampleObject = { a: 1, b: 2, c: 3, d: 4, }; // 从对象中排除值大于 2 的属性 const result = omitBy(sampleObject, (value) => value > 2); console.log(result); // { a: 1, b: 2 } */ /***/ }), /* 24 */ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* binding */ objectValueToString; } /* harmony export */ }); /** * obj 中所有 value 转换为 string */ function objectValueToString(query) { return Object.fromEntries(Object.entries(query).map(([key, value]) => [key, String(value)])); } /***/ }) /******/ ]); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /* webpack/runtime/define property getters */ /******/ !function() { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = function(exports, definition) { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ }(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ !function() { /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } /******/ }(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ !function() { /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ }(); /******/ /************************************************************************/ var __webpack_exports__ = {}; // This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk. !function() { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ animationFrameThrottle: function() { return /* reexport safe */ _animation_frame_throttle__WEBPACK_IMPORTED_MODULE_0__["default"]; }, /* harmony export */ clone: function() { return /* reexport safe */ _clone__WEBPACK_IMPORTED_MODULE_18__["default"]; }, /* harmony export */ cloneDeep: function() { return /* reexport safe */ _clone_deep__WEBPACK_IMPORTED_MODULE_19__["default"]; }, /* harmony export */ cookieHelper: function() { return /* reexport safe */ _cookie_helper__WEBPACK_IMPORTED_MODULE_10__["default"]; }, /* harmony export */ copyText: function() { return /* reexport safe */ _copy_text__WEBPACK_IMPORTED_MODULE_7__["default"]; }, /* harmony export */ debounce: function() { return /* reexport safe */ _debounce__WEBPACK_IMPORTED_MODULE_20__["default"]; }, /* harmony export */ downloadBase64File: function() { return /* reexport safe */ _download_base64_file__WEBPACK_IMPORTED_MODULE_5__["default"]; }, /* harmony export */ downloadByUrl: function() { return /* reexport safe */ _download_url__WEBPACK_IMPORTED_MODULE_3__["default"]; }, /* harmony export */ downloadDataFile: function() { return /* reexport safe */ _download_data_file__WEBPACK_IMPORTED_MODULE_4__["default"]; }, /* harmony export */ downloadUrlFile: function() { return /* reexport safe */ _download_url_file__WEBPACK_IMPORTED_MODULE_6__["default"]; }, /* harmony export */ imageBase64ToBlob: function() { return /* reexport safe */ _image_base64_to_blob__WEBPACK_IMPORTED_MODULE_1__["default"]; }, /* harmony export */ imageUrlToBase64: function() { return /* reexport safe */ _image_url_to_base64__WEBPACK_IMPORTED_MODULE_2__["default"]; }, /* harmony export */ isElement: function() { return /* reexport safe */ _is_element__WEBPACK_IMPORTED_MODULE_12__["default"]; }, /* harmony export */ isEqual: function() { return /* reexport safe */ _is_equal__WEBPACK_IMPORTED_MODULE_13__["default"]; }, /* harmony export */ isFunction: function() { return /* reexport safe */ _is_function__WEBPACK_IMPORTED_MODULE_14__["default"]; }, /* harmony export */ isNull: function() { return /* reexport safe */ _is_null__WEBPACK_IMPORTED_MODULE_15__["default"]; }, /* harmony export */ isObject: function() { return /* reexport safe */ _is_object__WEBPACK_IMPORTED_MODULE_16__["default"]; }, /* harmony export */ isUndefined: function() { return /* reexport safe */ _is_undefined__WEBPACK_IMPORTED_MODULE_17__["default"]; }, /* harmony export */ localStorageHelper: function() { return /* reexport safe */ _local_storage_helper__WEBPACK_IMPORTED_MODULE_11__["default"]; }, /* harmony export */ objectValueToString: function() { return /* reexport safe */ _object_value_to_string__WEBPACK_IMPORTED_MODULE_23__["default"]; }, /* harmony export */ omitBy: function() { return /* reexport safe */ _omit_by__WEBPACK_IMPORTED_MODULE_22__["default"]; }, /* harmony export */ openWindow: function() { return /* reexport safe */ _open_window__WEBPACK_IMPORTED_MODULE_9__["default"]; }, /* harmony export */ queryStringToObject: function() { return /* reexport safe */ _query_string_to_object__WEBPACK_IMPORTED_MODULE_8__["default"]; }, /* harmony export */ throttle: function() { return /* reexport safe */ _throttle__WEBPACK_IMPORTED_MODULE_21__["default"]; } /* harmony export */ }); /* harmony import */ var _animation_frame_throttle__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); /* harmony import */ var _image_base64_to_blob__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); /* harmony import */ var _image_url_to_base64__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3); /* harmony import */ var _download_url__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4); /* harmony import */ var _download_data_file__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6); /* harmony import */ var _download_base64_file__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7); /* harmony import */ var _download_url_file__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8); /* harmony import */ var _copy_text__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9); /* harmony import */ var _query_string_to_object__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(10); /* harmony import */ var _open_window__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5); /* harmony import */ var _cookie_helper__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(11); /* harmony import */ var _local_storage_helper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(12); /* harmony import */ var _is_element__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(13); /* harmony import */ var _is_equal__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(14); /* harmony import */ var _is_function__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(15); /* harmony import */ var _is_null__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(16); /* harmony import */ var _is_object__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(17); /* harmony import */ var _is_undefined__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(18); /* harmony import */ var _clone__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(19); /* harmony import */ var _clone_deep__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(20); /* harmony import */ var _debounce__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(21); /* harmony import */ var _throttle__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(22); /* harmony import */ var _omit_by__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(23); /* harmony import */ var _object_value_to_string__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(24); }(); /******/ return __webpack_exports__; /******/ })() ; }); //# sourceMappingURL=index.js.map