@mt-kit/utils
Version:
1,233 lines (1,124 loc) • 44.3 kB
JavaScript
(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