xeas v0.2.7

XEAS

版本0.2.x

使用

require

const xeas = require("xeas/dist/xeas.amd.js");

browser

<script src="xeas/dist/xeas.win.js"></script>

import

import xeas from "xeas";

DOM

• 操作dom相关方法

addEvent

在dom对象elem上添加type类型的处理函数callback

/**
 * @param {Element} elem
 * @param {String} type
 * @param {function} callback
 * @return {void}
 */

使用

DOM.addEvent(/* DOM对象 */, "click", () => {
    // 处理逻辑
});

AutoAdaptive

通过监听屏幕尺寸变化设置html的fontsize实现基于rem的自动适配

/**
 * @constructor
 * @param {Array<subarea>} scopes
 */

构造器

• constructor

/**
 * @description: html标签的fontSize属性 自动适配
 * @param {Array<subarea>} scopes
 * @return {AutoAdaptive}
 */

• scopes默认值

new Array(
    // mobile
    {
        max: 768,
        size: 750,
    },
    // pad
    {
        min: 769,
        max: 1024,
        size: 1024,
    },
    // pc
    {
        min: 1025,
        size: 1920,
    },
);

成员方法

• start

/**
 * @description: 开启屏幕尺寸变化监听，并设置html的fontSize
 * @param {number} [rate=100]
 * @param {number} [fontSize=14] body 上的font-size
 * @return {void}
 */

• stop

/**
 * @description: 停止监听屏幕变化
 * @return {void}
 */

使用

// 创建实例对象
const autoAdaptive = new DOM.AutoAdaptive();
// 启动监听
autoAdaptive.start();
// 停止监听
autoAdaptive.stop();

AutoRefresh

监视页面更新

构造器

/**
 * @description: 每2000ms检查一次是否有更新，如有更新自动执行更新逻辑
 */
constructor();
/**
 * @description: 每2000ms检查一次是否有更新，如有更新调用callback
 * @param {Function} callback 页面更新回调
 */
constructor(callback: () => void);
/**
 * @description: 每间隔指定毫秒后检查是否更新，如有更新调用callback
 * @param {Function} callback 页面更新回调
 * @param {number} delay 每次延迟的毫秒数。如果未指定，则其默认值为 2000ms。
 */
constructor(callback: () => void, delay: number);

成员方法

• cancel

/**
 * @description: 取消监听
 */

使用

const autoRefresh = new DOM.AutoRefresh(() => {
    // 页面发生更新处理
}, 2000);
// autoRefresh.cancel(); // 取消监听

cancelHandler

取消默认事件

/**
 * @param {Event} event
 * @return {*}
 */

使用

DOM.cancelHandler(event);

downloadFile

下载文件

/**
 * @function
 * @description: 下载文件
 * @param {string} url 文件地址；blob地址
 * @param {string | number} name 文件名，默认当前时间戳
 * @return {void}
 */

使用

DOM.downloadFile("http://文件地址");

getEventSource

获取事件源对象

/**
 * @param {Event} e
 * @return {EventTarget | null}
 */

使用

// 返回事件源对象
const targetEl = DOM.getEventSource(e);

getScrollOffset

获取滚动条x,y轴滚动距离

/**
 * @return {distance}
 */

使用

// 返回滚动条滚动参数
const scrollParam = DOM.getScrollOffset();

• 返回参数

interface distance {
    x: number; // x 轴滚动距离
    y: number; // y 轴滚动距离
}

getViewportOffset

返回可视窗口尺寸

/**
 * @return {distance}
 */

使用

// 返回可视窗口尺寸
DOM.getViewportOffset();

• 返回参数

interface distance {
    w: number; // 可视窗口宽度
    h: number; // 可视窗口高度
}

getStyle

获取元素css属性值

/**
 * @param {Element} elem
 * @param {string | number} prop
 * @return {string}
 */

使用

// 获取指定样式值
const colorStr = DOM.getStyle(this.$refs.boxRef, "color");

loadScript

脚本异步加载

/**
 * @param {string} url
 * @param {Function} callback
 * @return {void}
 */

使用

DOM.loadScript(
    "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js",
    () => {
        // 加载成功回调
    }
);

getCurrentELementChildNode

返回当前元素的元素子节点

/**
 * @param {HTMLElement} node
 * @return {nodeArray}
 */

使用

const result = DOM.getCurrentELementChildNode(source as HTMLElement);

• 返回参数

interface nodeArray {
    length: number;
    push(...items: any[]): number;
    splice(start: number, deleteCount?: number): Array<any>;
}

stopBubble

停止事件冒泡

/**
 * @param {Event} event
 * @return {void}
 */

使用

DOM.stopBubble(event);

compressImg

压缩图片

/**
 * @description: 压缩图片
 * @param {File} file
 * @param {number} [quality=1] 图片质量，值0-1之间，可不填默
 * @param {number} [zoom=1] 宽度缩放比例，可自定义大小
 * @return {Promise<File>}
 */

使用

DOM.compressImg(/* 文件 */, 0.8, 0.8);

imgUrlToFile

图片地址生成File文件

/**
 * @description: 图片地址生成File文件
 * @param {string} url 图片路径
 * @param {string} [fileName] 图片名称，默认当前时间戳
 * @return {Promise<File>}
 */

使用

DOM.imgUrlToFile("图片地址").then(file: File => {
    console.log(file);
})

BOM

AnimationFrameTimer

动画帧定时器

构造器

/**
 * @description: 动画帧定时器
 * @param {Function} callback 要重复调用的函数，每一帧回调callback函数
 */
constructor(callback: () => boolean | void);
/**
 * @description: 动画帧定时器
 * @param {Function} callback 要重复调用的函数，每经过指定 delay 毫秒后执行一次。第一次调用发生在 delay 毫秒之后，返回true取消定时器
 * @param {number} delay 每次延迟的毫秒数
 */
constructor(callback: () => boolean | void, delay: number);

成员方法

• cancel

/**
 * @description: 取消定时器，在下一次callback时取消
 */

使用

let i = 1;
const adTimer = new BOM.AnimationFrameTimer(() => {
    console.log(adTimer);
    if (i >= 3) adTimer.cancel();
    i++;
}, 200);
// adTimer.cancel();

Tools

• js 基础工具类

deepClone

深度克隆数组或对象

/**
 * @param {T} origin - 源对象
 * @param {T} [target] - 将源对象克隆至目标对象,如果不传默认创建空对象
 * @return {T}
 */

使用

const obj3 = Tools.deepClone(obj1[, obj2]);

NumCnToggle

阿拉伯数字，中文数字相互转换

构造器

• constructor

default constructor

成员方法

• toCN

/**
 * @description: 阿拉伯数字转中文数字
 * @param {number} num
 * @return {string}
 */

• toNum

/**
 * @description: 中文数字转阿拉伯数字
 * @param {string} chnStr
 * @return {number}
 */

使用

const numCnToggle = new Tools.NumCnToggle();
console.log(numCnToggle.toCN(1204)); // 一千二百零四
console.log(numCnToggle.toNum("一千二百零四")); // 1204

randomNum

生成 n,m 的随机整数

/**
 * @param {Number} minNum
 * @param {Number} maxNum
 * @return {Number}
 */

使用

// 产生1-10的随机数
const num = Tools.randomNum(1, 10);

ValidateRules

校验规则

静态方法

• verify

/**
 * @description: 校验
 * @param {string | number} val
 * @param {keyof typeof ValidateRules.rules} type
 * @return {boolean}
 */

使用

• type

const bl = Tools.ValidateRules.verify("a244123", "ACCOUNTS");
// true

retainValidNum

保留有效小数

/**
 * @param {string | number} num 目标数据
 * @param {number} [len=2] 保留小数长度
 * @return {string}
 */

使用

const strNum = Tools.retainValidNum(12.13, 4);
// 12.1300

fillZero

基于小数点(前|后)填充零

/**
 * @param {string | number} num 目标数据
 * @param {number} len 补零长度
 * @param {boolean} isR 补零方向
 * @return {string}
 */

使用

const strNum = Tools.fillZero(12.13, 4, false);
// 000012.13

timeFormat

日期时间格式化

/**
 * @param {string} fmt 日期格式
 * @param {Date} [date] 日期对象，默认当前时间
 * @return {string}
 */

使用

const dateStr = Tools.timeFormat("yyyy-MM-dd", new Date());

timeFrom

多久以前

/**
 * @description: 多久以前
 * @param {*} targetDate 目标时间
 * @param {string} format 时间格式，如果此参数为false，返回均为"多久之前"的结果
 * @return {}
 */

使用

const result = Tools.timeFrom("2022-08-16 22:14:20");
console.log(result);

UrlQs

地址栏参数处理

构造器

• constructor

default constructor

静态方法

• stringify

/**
 * @description: 地址栏参数处理
 * @param {object} data 参数对象
 * @param {boolean} [encode=true] 是否编码
 * @return {string}
 */

• parse

/**
 * @description: 反序列化
 * @param {string} str 编码后字符串
 * @param {string} [decode=true] 是否解码
 * @return {object}
 */

使用

const { UrlQs } = Tools;
const query = {
    a: "你好",
    b: ["你", "好"],
    c: {
        d: "你好"
    }
};
const queryStringify = UrlQs.stringify(query);
// a=%E4%BD%A0%E5%A5%BD&b=%5B%22%E4%BD%A0%22%2C%22%E5%A5%BD%22%5D&c=%7B%22d%22%3A%22%E4%BD%A0%E5%A5%BD%22%7D
console.log(queryStringify);
const queryParse = UrlQs.parse(queryStringify);
//{
//    a: "你好",
//    b: ['你', '好'],
//    c: {d: '你好'}
//}
console.log(queryParse);

Thread

静态方法

• sleep

/**
 * @description: 休眠指定毫秒数
 * @param {number} [ms=0] 休眠毫秒数
 * @return {type} Promise
 */

使用

// 配合 async 和 await 使用
Thread.sleep(1000);

debounce

防抖，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效

/**
 * @description: 防抖，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效
 * @param {Function} func 需要执行的函数
 * @param {number} [wait=500] 间隔时间（毫秒）
 * @return {Function}
 */

throttle

节流，规定时间内，只触发一次

/**
 * @description: 节流，规定时间内，只触发一次
 * @param {Function} func 需要执行的函数
 * @param {number} [wait=500] 延迟执行时间（毫秒）
 * @param {boolean} [immediate=true] 是否表立即执行
 * @return {Function}
 */

Encode

编码转换

静态方法

/**
 * @description: 编码转换
 * @return {*}
 */

使用

const str = Tools.Encode.utf16ToEntities("1😀2👉3");
console.log(str);
// 1😀2👉3
const emoji = Tools.Encode.entitiesToUtf16("1😀2👉3");
console.log(emoji);
// 1😀2👉3

toFixed

保留有效小数位，0不显示

/**
 * @description: 保留有效小数位，0不显示
 * @param {number} num 目标数据
 * @param {number} [accuracy=0] 小数精度
 * @param {boolean} [round=false] 是否四舍五入
 * @return {number}
 */

使用

console.log(Tools.toFixed(1.4351, 2)); // 1.43
console.log(Tools.toFixed(1.4341, 2)); // 1.43
console.log(Tools.toFixed(-1.4351, 2)); // -1.43
console.log(Tools.toFixed(-1.4341, 2)); // -1.43
console.log(Tools.toFixed(1.4351, 2, true)); // 1.44
console.log(Tools.toFixed(1.4341, 2, true)); // 1.43
console.log(Tools.toFixed(-1.4351, 2, true)); // -1.44
console.log(Tools.toFixed(-1.4341, 2, true)); // -1.43

Md5

md5加密

sliceByPoint

截取字符串，以码点的形式

/**
 * @function 改变this指向调用，bind、apply、call或挂载在String原型链上
 * @description: 截取字符串，以码点的形式
 * @param {number} pStart 起始位置
 * @param {number} pEnd 结束位置
 * @return {string}
 */

使用

const str = "取第一只🐕🐱";
console.log(str.slice(4, 5)); // �
console.log(Tools.sliceByPoint.call(str, 4, 5)); // 🐕

groupBy

数组分组

/**
 * @description: 数组分组
 * @param {T[]} arr 目标数组
 * @param {Function | string} generateKey 以什么方式进行分组，函数返回或接收一个字符串
 * @return {Record<string, T>}
 */

ChunkSplitor

分时函数

/**
 * @description: 分时函数
 * @param {T[] | number} datas
 * @param {Function} consumer 数据消费者
 * @param {ChunkSplitor} chunkSplitor 分块
 * @return {void}
 */
/**
 * @description: 分块函数
 */
type ChunkSplitor = (task: (hasTime: (time: number) => boolean) => void) => void;

使用

Tools.performChunk(10000, (item, idx) => console.log(item, idx));